【Flutter入門】font_awesome_flutterの使い方

所有時間１分

今回は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

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プロパティでそれぞれフォントの色やサイズを変更できます。

以上です。