IconDataについて
-
Icon(Icons.add)のような書き方をすることでアイコンの画像を設定することが出来る。
// FloadingButtonを押すとインクリメントされる例
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _incrementSomething,
child: const Icon(Icons.add)
),
)
- この
Iconsの型がIconやIconsではなく、どうやらIconDataなるものを継承しているようで、興味が出たので調べてみた
IconDataのinitializerを確認する
IconData.new(
int codePoint,
{
String? fontFamily,
String? fontPackage,
bool matchTextDirection = false,
List<String>? fontFamilyFallback
}
)
-
matchTextDirectionの初期値がfalseで、そこからさらに追加でパラメータを設定できそう。 -
fontFamily,fontPackage,matchTextDirection、fontFamilyFallbackは全てfinal
なので、実行時に値がセットされて固定される模様。
以下公式のサイトで各パラメータを確認してみる。
fontFamily → String?
The font family from which the glyph for the codePoint will be selected.
- アイコンの文字コードがどのフォントファイルから描画されるかを指定することが出来る。
fontPackage → String?
The name of the package from which the font family is included.
- FontFamilyがパッケージとしてincludeされている際に、そのPackageの名前を指定することが出来る。
matchTextDirection → bool
Whether this icon should be automatically mirrored in right-to-left environments.
- テキストの方向によって自動的に左右反転するかを設定できる。
- 使用用途があまりピンとこないが、アラビア語や「→」を「←」にしたいときなどに役立つのだろうか。
fontFamilyFallback → List?
The ordered list of font families to fall back on when a glyph cannot be found in a higher priority font family.
- 指定したFontFamilyが見つからない際に、代替フォントをList形式で指定できる。優先度も設定することが可能で、高い優先順位のフォントから順番に適用される。
Icon型にラップする
Icon(Icons.add)
- こうして
IconData型の中にある.addアイコンの情報を呼び出して、最終的にそれをIcon型に変換する。
フォント一覧を確認できる
-
IconDataを継承しているIconsの話になるが、Googleが公開しているサイト（https://fonts.google.com/icons ）を参照すれば、Iconsとして使えるアイコンの一覧を確認することが出来る。（AppleのSF SymbolsをGoogle FontsのUIでやっているようなイメージである） - 検索バーで欲しいアイコンの単語を入力することで、検索フィルターに合致するフォント一覧を返してくれる。