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

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

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

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

Icons

Icon(Icons.train)

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

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

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

Iconの基本となるプロパティ

• color：アイコンの色を指定します。
• size：アイコンのサイズを指定します。

color

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

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

size

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

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