【Flutter】Font Awesomeアイコンを表示

2022年12月27日2023年2月1日

こんにちは、フラメルです。

今回はFont Awesomeのアイコンを表示させる方法について紹介します。

パッケージの導入

下記コマンドを実行してpub.devのパッケージ「font_awesome_flutter」をpubspec.yamlに追加します。

flutter pub add font_awesome_flutter

次にdartファイルに下記コードをコピペします。

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Font Awesomeの使用方法

Font Awesomeアイコンを使用するにはFaIconの引数にFontAwesomeIcons.〇〇を渡して使用できます。（〇〇の部分はアイコン名）

アイコンのサイズはsizeで調整できます。

FaIcon(
  FontAwesomeIcons.dog,
  size: 100,
),

サンプルコード

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('Flutter'),
        ),
        body: Center(
          child: FaIcon(
            FontAwesomeIcons.dog,
            size: 100,
          ),
        ),
      ),
    );
  }
}

以上です。