플러터 무료아이콘 Font Awesome 사용법과 예제

개발자라면 누구나 멋진 아이콘을 프로젝트에 추가하고 싶어 합니다. Font Awesome은 플러터 무료아이콘을 쉽게 사용할 수 있는 훌륭한 도구입니다. 이번 글에서는 Flutter에서 Font Awesome을 사용하는 방법에 대해 작성합니다.

pubspec.yaml 파일수정

Flutter 프로젝트에서 Font Awesome을 사용하려면 먼저 패키지를 추가해야 합니다. pubspeck.yaml파일을 열고 font_awesome_flutter 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^10.1.0

예제 코드

아래 예제 코드를 참고하여 여러분의 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 Flutter 예제'),
        ),
        body: Center(
          child: FaIcon(
            FontAwesomeIcons.thumbsUp,
            size: 50.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

여러 아이콘 사용하기

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('다양한 아이콘 예제'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FaIcon(FontAwesomeIcons.home, size: 50, color: Colors.green),
            FaIcon(FontAwesomeIcons.user, size: 50, color: Colors.red),
            FaIcon(FontAwesomeIcons.bell, size: 50, color: Colors.amber),
          ],
        ),
      ),
    );
  }
}

버튼에 아이콘 추가하기

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('아이콘 버튼 예제'),
        ),
        body: Center(
          child: ElevatedButton.icon(
            onPressed: () {},
            icon: FaIcon(FontAwesomeIcons.facebook, color: Colors.white),
            label: Text('Facebook 로그인'),
            style: ElevatedButton.styleFrom(primary: Colors.blue),
          ),
        ),
      ),
    );
  }
}