[ Flutter ] Icon 사용하기

Flutter에서 아이콘을 사용하는 방법에 대해 알아보겠습니다. Flutter에서는 다양한 방법으로 아이콘을 사용할 수 있으며, 기본적으로 제공되는 아이콘부터, 커스텀 아이콘을 추가하는 방법까지 다양합니다.

1. 기본적인 아이콘 사용

Flutter는 Icons 클래스를 통해 Material Design 아이콘을 제공합니다. 이 클래스를 사용하여 쉽게 아이콘을 표시할 수 있습니다. 예를 들어, 화면에 'home' 아이콘을 표시하려면 다음과 같이 작성합니다:

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: Icon(
            Icons.home,
            size: 100.0, // 아이콘 크기
            color: Colors.blue, // 아이콘 색상
          ),
        ),
      ),
    );
  }
}

아이콘 리스트

Flutter의 기본 아이콘 리스트를 확인하려면, 공식 문서에서 확인할 수 있습니다: Material Icons

2. 아이콘 팩 사용

기본 제공되는 아이콘 외에도 Flutter에서는 다른 아이콘 팩을 사용할 수 있습니다. 예를 들어, font_awesome_flutter 패키지를 사용하면 Font Awesome 아이콘을 사용할 수 있습니다.

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.heart,
            size: 100.0,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

3. 커스텀 아이콘 사용

커스텀 아이콘을 사용하려면, 아이콘을 Flutter에서 사용할 수 있도록 해야 합니다. 일반적으로 flutter_svg 패키지를 사용하여 SVG 포맷의 아이콘을 불러와 사용할 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom SVG Icon Example'),
        ),
        body: Center(
          child: SvgPicture.asset(
            'assets/custom_icon.svg',
            width: 100.0,
            height: 100.0,
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

4. 요약

• 기본 아이콘: Icons 클래스를 사용하여 Material Design 아이콘을 사용.
• 아이콘 팩: font_awesome_flutter와 같은 패키지를 사용하여 추가적인 아이콘을 사용.
• 커스텀 아이콘: flutter_svg 패키지를 사용하여 SVG 아이콘을 불러와 사용.

필요에 따라 다양한 방법으로 아이콘을 추가하고 꾸밀 수 있습니다. 각 방법의 사용 예시를 참고하여 프로젝트에 적합한 방법을 선택하면 됩니다.