本エントリではfont_awesome_flutterの使い方を説明する。
font_awesome_flutterとは
Webサイトなどでよく使用されているアイコンツールキットFont Awesomeで使用可能なアイコンを、Flutterアプリでも簡単に使用できるようにパッケージ化したもの。
Font Awesomeは一部のアイコンは無料。課金すると特殊なアイコンが使用できたり手厚いサポートが受けられるようになる。
本エントリでは無料で使用できるアイコンの使用方法について説明する。
使い方
インストール
通常のパッケージと同様にpubspec.yamlに記述する。
dependencies: ... font_awesome_flutter: ^10.2.1
使用する際には最新版をインストールすること。
アイコン表示方法
font_awesome_flutterを使用したアイコンの表示は、以下の形式でFaIcon()ウィジェットを使用する。
FaIcon(FontAwesomeIcons.アイコン名)
FaIcon()ウィジェットはIcon()ウィジェットとほぼ同じ要領で使用できる。 例えばgamepadというアイコンを表示するには以下のように記述。
アイコンの探し方
無料アイコン一覧は以下。
例えば次のinstagramアイコンを表示したいとする。
ここでアイコンのタイトルはinstagramなので次のように記述すれば良い。
FaIcon(FontAwesomeIcons.instagram)
デザイン設定
FaIconウィジェットのデザイン設定について説明する。
サイズ
sizeプロパティにdouble値を渡すことで設定できる。
カラー
colorプロパティを指定することで設定できる。
その他設定
セマンティックテキスト
semanticLabelプロパティを指定することで設定できる。セマンティックテキストとはメタデータの一種。 基本的にユーザーには表示されず、主にアクセシビリティモードなどで読み上げられたりする。
