今回はFlutterの外部パッケージ「font_awesome_flutter」を使ってFont Awesomeのフォントを使用する方法を紹介します。
目次
pubspec.yamlファイルに追加
flutter pub add font_awesome_flutter
このコマンドをターミナルで実行すると「font_awesome_flutter」のパッケージがpubspec.yamlファイルに追加されます。
dependencies:
font_awesome_flutter: ^9.2.0
pubspec.yamlファイルに上記のように追加されていればOKです。(本記事とバージョンが異なっていても問題ありません)
最新のバージョンをチェック > font_awsome_flutter
Dartファイルにコードを追加
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
次に上記のコードをDartファイルに追加します。これで「font_awesome_flutter」が使用できるようになりました。
font_awesome_flutterの基本的な使い方
FaIcon(
FontAwesomeIcons.使用したいフォント
)
//例
FaIcon(
FontAwesomeIcons.font
)
FaIcon Widgetの引数に「FontAwsomeIcons.フォント名」を渡して使用します。使用できるフォントは下リンクから確認できます。
font_awesome_flutterの使用例
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(
body: Center(
child: FaIcon(FontAwesomeIcons.font), //ここで使用!
),
),
);
}
}
このコードを実行すると下のように表示されます。

色やサイズも変更できる
FaIcon(
FontAwesomeIcons.font,
color: Colors.red,
size: 300,
)
colorプロパティ、sizeプロパティでそれぞれフォントの色やサイズを変更できます。

以上です。