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

Icon
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • Icon Widgetの基本的な使い方が知りたい

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

\ 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
タイトルとURLをコピーしました