Flutter Icon - 온더테크

Flutter에서 아이콘을 사용하려면 `Icon` 위젯을 사용합니다. Flutter는 다양한 아이콘 세트를 제공하며, 그 중에서 Material Icons가 가장 널리 사용됩니다. 또한, 커스텀 아이콘 세트를 사용하거나 자신의 아이콘을 추가할 수도 있습니다.

기본 아이콘 사용

Flutter의 `Icon` 위젯을 사용하여 Material Icons에서 아이콘을 쉽게 추가할 수 있습니다. 다음은 기본 아이콘을 사용하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Icon Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                Icons.home,
                size: 50.0,
                color: Colors.blue,
              ),
              SizedBox(height: 20),
              Icon(
                Icons.favorite,
                size: 50.0,
                color: Colors.red,
              ),
              SizedBox(height: 20),
              Icon(
                Icons.settings,
                size: 50.0,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 `Icons.home`, `Icons.favorite`, `Icons.settings` 아이콘을 사용하여 화면에 표시하고 있습니다. 각 아이콘의 크기(`size`)와 색상(`color`)을 설정할 수 있습니다.

커스텀 아이콘 사용

만약 기본 제공되는 아이콘 외에 커스텀 아이콘을 사용하고 싶다면, 다음과 같이 `ImageIcon` 위젯을 사용하여 로컬 또는 네트워크에서 이미지를 불러와 아이콘으로 사용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Custom Icon Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ImageIcon(
                AssetImage('assets/custom_icon.png'),
                size: 50.0,
                color: Colors.blue,
              ),
              SizedBox(height: 20),
              ImageIcon(
                NetworkImage('https://example.com/path/to/icon.png'),
                size: 50.0,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 `ImageIcon`을 사용하여 로컬 이미지(`assets/custom_icon.png`)와 네트워크 이미지(`https://example.com/path/to/icon.png`)를 아이콘으로 사용하고 있습니다. `AssetImage`와 `NetworkImage`를 사용하여 이미지 경로를 지정합니다.

커스텀 아이콘 추가

Flutter 프로젝트에 커스텀 아이콘을 추가하려면, 프로젝트의 `pubspec.yaml` 파일에 아이콘 파일을 포함시켜야 합니다.

1. 프로젝트 폴더에 `assets` 디렉토리를 생성하고 아이콘 이미지를 추가합니다.
2. `pubspec.yaml` 파일에 다음과 같이 경로를 추가합니다:

flutter:
  assets:
    - assets/custom_icon.png

이제 `AssetImage`를 사용하여 로컬 이미지를 아이콘으로 사용할 수 있습니다.

아이콘 패키지 사용

Flutter에서는 다양한 아이콘 패키지를 사용할 수 있습니다. 예를 들어, `font_awesome_flutter` 패키지를 사용하면 Font Awesome 아이콘을 쉽게 사용할 수 있습니다.

1. `pubspec.yaml` 파일에 패키지를 추가합니다:

dependencies:
  font_awesome_flutter: ^10.1.0

2. 패키지를 사용하여 아이콘을 추가합니다:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Font Awesome Icon Example'),
        ),
        body: Center(
          child: FaIcon(
            FontAwesomeIcons.thumbsUp,
            size: 50.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

이 예제에서는 `font_awesome_flutter` 패키지를 사용하여 Font Awesome의 `thumbsUp` 아이콘을 표시하고 있습니다. `FaIcon` 위젯을 사용하여 Font Awesome 아이콘을 추가할 수 있습니다.

이와 같이 Flutter에서는 다양한 방법으로 아이콘을 사용할 수 있으며, 기본 제공되는 아이콘 외에도 커스텀 아이콘 및 추가 아이콘 패키지를 활용할 수 있습니다.

Post Views: 147

Leave a Reply Cancel reply