すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】IconButtonの使用方法まとめ

本エントリではIconButtonの使用方法についてまとめる。

IconButtonとは

api.flutter.dev

デフォルト IconButton

IconButtonはアイコンにタップ機能を組み合わせたボタンを作成するウィジェット

画像はIcon(Icons.person)をアイコンに設定している。

必須のプロパティ

  • icon : 表示するアイコンを指定
  • onPressed : アイコンがタップされた際に実行するイベントハンドラ

onPressednullの場合の表示

onPressedがnull時のIconButton

イベントハンドラが設定されていない場合、アイコンがグレースケールに表示されてタップができなくなる。

次にIconButtonの詳しい使用方法について説明していく。


デザイン

IconButtonのデザイン設定について説明する。

サイズ

iconSizeプロパティにてサイズを指定できる。 ちなみにデフォルトのサイズは24。

iconSize: 100とdefault

画像のようにアイコンのサイズを指定できる。

アイコンの色

アイコンの色はcolorプロパティで設定できる。

color: Colors.redに設定

タップ時の背景色

タップ時のアイコンの背景色はhighlightColorプロパティで設定できる。

highlightColor: Colors.redに設定

タップ中の背景色

タップ中にアイコンの背景にじわっと広がる範囲の色はsplashColorプロパティで設定できる。

splashColor: Colors.redに設定


タップ時の処理

IconButtonをタップした際の処理の設定について説明する。

通常タップ

onPressedイベントハンドラとしてコールバック関数を渡せばよい。

以下の例ではIconButtonを押すたびに_counterの値を1ずつインクリメントしている。

通常タップ処理

長押しタップ

IconButtonにはonLongPressのようなプロパティが存在しない。 そのためGestureDetectorなどでラップしてonLongPressプロパティにイベントハンドラを設定すれば良い。

以下の例では説明のために通常タップと長押しで以下のように異なるイベントハンドラを呼んでいる。

  • 通常タップ: IconButtononPressedに設定されたイベントハンドラが反応し、_onPressedCounterが1ずつインクリメント
  • 長押しタップ: GestureDetector````のonLongPressに設定されたイベントハンドラが反応しonLongPress```が1ずつインクリメント

下のgif画像でもタップの仕方が異なると、異なる変数がインクリメントされていることがわかる。

GestureDetectorでラップしたIconButton


その他

アイコンの回転

IconButtonに限らず、ウィジェットを回転させるには専用のウィジェットでラップする。 今回はシンプルにCounterでラップして回転させる方法を説明する。

Containerウィジェットを回転させるにはtransformプロパティを設定すれば良い。 以下の例では_rotationDegreeに回転したい角度(時計回り)を入れることでContainerウィジェットを回転させている。

15度ずつ_rotaitonDegreeに入れる値を増やすと以下の画像の様になる。

IconButtonを15度ずつ回転

ちなみにtransformAlignmentプロパティにAlignment.centerを渡している理由は、回転軸をIconButtonの中央に設定するため。 詳しくは以下リンクを参照のこと。

api.flutter.dev

またウィジェットを回転させる方法については以下のエントリでまとめているので、適宜参考にしてほしい。

note-tmk.hatenablog.com