【Flutter】Iconの基本的な使い方

この記事がおすすめな人

Icon Widgetを使えば、様々なアイコンを表示させることができます。

\ Widgetの扱い方が不安な方はこちら！ /

Iconのコンストラクタで必須なパラメータ

Iconを使用するには、コンストラクタで表示するアイコンのデータを指定する必要があります。またアイコンのデータを指定するには、Iconsを使用します。

Icon(Icons.train)

「Icons.アイコン名」で、Iconsのアイコンを指定できます。

使用できるアイコンを探すには「Icons > Constants」から調べることができますが、「Google Fonts > Icons」でFlutterで使用できるアイコンを検索エンジンを使って調べることができます。

Google Fontsではアイコン名の表示が、Iconsで使用できる名前と少し異なるので修正が必要です。Google Fontsのアイコン名の「頭文字」を「小文字」に、そして「スペース」を「 _ 」に変更します。

Icon(
  Icons.train,
  color: Colors.red,
)

colorプロパティで、アイコンの色を指定します。

Icon(
  Icons.train,
  color: Colors.red,
  size: 150,
)

sizeプロパティで、アイコンのサイズをピクセル値で指定します。