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

Flutter

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

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

スポンサーリンク

使い方

インターフェース, インターネット, プログラム, ブラウザ, Www

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

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

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

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

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

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

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

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

onPressedには、「(){}」と関数の2つを指定出来ます。

「どちらのがいいのか?」と思う人もいるかもしれません。

どちらでも良いのですが、用意した関数を使うことが推奨されています。

というのも、UI(ボタンやテキスト)とロジック(処理)は分けて記述した方が良いという考え方があるからです。

スポンサーリンク

細かい設定

プログラマー, プログラミング, コード, 仕事, コンピューター

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

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

サイズ

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

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

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

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

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

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

アイコンボタンには、色を設定する引数が他にもあります。

color引数で指定するのは、デフォルトの色です。

「disabledColor」引数などを使えば、ボタンがタップ出来ない時の色などを設定出来ます。

つまり、他の引数を使うことで、状況によっての色を設定することも出来るのです。

スポンサーリンク

まとめ

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

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

コメント

タイトルとURLをコピーしました