【Flutter】font_awesome_flutterのアイコンセットを使う

font_awesome_flutterとは
使い方

font_awesome_flutterとは

Font AwesomeのアイコンセットをFlutterアプリケーションで使用するためのプラグインです。
このパッケージには、Font Awesomeの無料アイコンが含まれており、簡単に多様なアイコンをアプリに組み込むことができます。また、Font Awesomeのプロアイコンを使用することも可能です。

font_awesome_flutter | Flutter package

The Font Awesome Icon pack available as Flutter Icons. Provides 2000 additional icons to use in your apps.

使い方

インストール

dependencies:
  font_awesome_flutter: ^10.7.0

インポート

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

基本的な使い方

アイコンを表示するために、FaIconウィジェットとFontAwesomeIconsクラスを使用します。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: FaIcon(FontAwesomeIcons.gamepad),
      onPressed: () {
        print("Pressed");
      },
    );
  }
}

アイコン名

アイコン名は公式サイトの名前に基づいていますが、lower camel case（例: angleDoubleUp）で書かれています。複数のスタイルがあるアイコンの場合、スタイル名がプレフィックスとして使用されます（例: solidArrowAltCircleUp）。数値で始まるアイコン名は、その数値が英語で書かれます（例: solidOne）。

カスタムバージョンの設定

プロジェクトにカスタムアイコンセットを使用するには、以下の手順に従います。

このリポジトリをクローンし、依存関係をインストールします。

git clone https://github.com/fluttercommunity/font_awesome_flutter.git
cd font_awesome_flutter
flutter pub get

カスタマイズツールを実行します。Windowsの場合はconfigurator.batを、LinuxやMacの場合は./configurator.shを使用します。以下はLinuxやMacの場合の例です。

./configurator.sh

プロアイコンの有効化

プロアイコンを使用するには、以下の手順に従います。

カスタムfont_awesome_flutterバージョンの場所に移動します。
Font Awesome ProのWebバージョンをダウンロードし、webfontsディレクトリからすべての.ttfファイルとmetadataディレクトリのicons.jsonファイルをpath/to/your/font_awesome_flutter/lib/fontsに移動します。
カスタマイズツールを実行します。

./configurator.sh

アイコンの動的取得

アイコンを名前で動的に取得するには、以下のコマンドを実行して動的なマッピングを生成します。

./configurator.sh --dynamic

その後、以下のように使用します。

import 'package:font_awesome_flutter/name_icon_mapping.dart';

...

FaIcon(faIconNameMapping['solid abacus']);