[Flutter]「IconButton（アイコンボタン）」の使い方

どうも、ちょげ(@chogetarou)です。

この記事では、FlutterのIconButtonウェジェットの使い方を解説します。

使い方

IconButtonは、アイコンをボタンのように扱うことの出来るようにするウェジェットです。

このウェジェットを使うには、少なくとも次の２つの引数を指定します。

• icon : 表示するアイコンを指定
• onPressed : アイコンをタップした時の処理

ボタンとして使うアイコンは「icon」引数、タップした時の処理は「onPressed」引数で指定します。

また、「onPressed」引数には、「() { }」、もしくは関数を使います。

IconButton(
      icon: Icon(Icons.android),
      onPressed: () {
            //処理
      },
)

//onPressedを「_onTap関数」（例）に置き換える
IconButton(
       icon: Icon(Icons.android),
      onPressed: _onTap(),
)

icon引数には、基本的にIconウェジェットを使います。

細かい設定

IconButtonには、他の引数を使うことで、細かい設定をすることが出来ます。

代表的なものを２つ紹介します。

サイズ

「iconSize」引数を使うことで、アイコンのサイズを指定することが出来ます。

IconButton(
      icon: Icon(Icons.android),
      onPressed: () {
            //処理
      },
      iconSize: 20,
)

指定した数値がアイコンの縦と横の長さになります。

色

IconButtonでは、「color」引数を使うことで色を設定することが出来ます。

IconButton(
          icon: Icon(Icons.android),
          onPressed: () {
            //処理
          },
          color: Colors.red,
 )

colorに指定した色がアイコンの色になります。

まとめ

IconButtonを使うには、「icon」引数でアイコン、「onPressed」でタップ時の処理を定義します。

また、IconButtonに用意されている引数を使うことで細かい設定をすることが出来ます。

[Flutter]「ListView」のスクロール方向を変える方法

2021.8.30 ListViewウェジェットのスクロール方向を変える方法を紹介します。

www.choge-blog.com

2021.08.30

[Flutter]「ListView」を横スクロール(horizontal scroll)にする方法

2021.8.30 ListViewを横スクロールにする方法を紹介します。

www.choge-blog.com

2021.08.30

[Flutter]「ListTile（リストタイル）」の使い方

2021.8.30 FlutterのListTileウェジェットの使い方を解説します。

www.choge-blog.com

2021.08.30