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

Icon

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

ティファ

本記事では「Icon Widget」の基本的な使い方について紹介していくよ!

目次

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

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

Icons

Icon(Icons.train)

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

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

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

Icon
google fonts
Google Fonts Icons

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

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

color

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

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

color

size

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

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

size
よかったらシェアしてね!
目次
閉じる