本エントリではIconButtonの使用方法についてまとめる。
IconButtonとは
IconButtonはアイコンにタップ機能を組み合わせたボタンを作成するウィジェット。
画像はIcon(Icons.person)をアイコンに設定している。
必須のプロパティ
icon: 表示するアイコンを指定onPressed: アイコンがタップされた際に実行するイベントハンドラ
onPressedがnullの場合の表示
イベントハンドラが設定されていない場合、アイコンがグレースケールに表示されてタップができなくなる。
次にIconButtonの詳しい使用方法について説明していく。
デザイン
IconButtonのデザイン設定について説明する。
サイズ
iconSizeプロパティにてサイズを指定できる。
ちなみにデフォルトのサイズは24。
画像のようにアイコンのサイズを指定できる。
アイコンの色
アイコンの色はcolorプロパティで設定できる。
タップ時の背景色
タップ時のアイコンの背景色はhighlightColorプロパティで設定できる。
タップ中の背景色
タップ中にアイコンの背景にじわっと広がる範囲の色はsplashColorプロパティで設定できる。
タップ時の処理
IconButtonをタップした際の処理の設定について説明する。
通常タップ
onPressedにイベントハンドラとしてコールバック関数を渡せばよい。
以下の例ではIconButtonを押すたびに_counterの値を1ずつインクリメントしている。
長押しタップ
IconButtonにはonLongPressのようなプロパティが存在しない。
そのためGestureDetectorなどでラップしてonLongPressプロパティにイベントハンドラを設定すれば良い。
以下の例では説明のために通常タップと長押しで以下のように異なるイベントハンドラを呼んでいる。
- 通常タップ:
IconButtonのonPressedに設定されたイベントハンドラが反応し、_onPressedCounterが1ずつインクリメント - 長押しタップ:
GestureDetector````のonLongPressに設定されたイベントハンドラが反応しonLongPress```が1ずつインクリメント
下のgif画像でもタップの仕方が異なると、異なる変数がインクリメントされていることがわかる。
その他
アイコンの回転
IconButtonに限らず、ウィジェットを回転させるには専用のウィジェットでラップする。
今回はシンプルにCounterでラップして回転させる方法を説明する。
Containerウィジェットを回転させるにはtransformプロパティを設定すれば良い。
以下の例では_rotationDegreeに回転したい角度（時計回り）を入れることでContainerウィジェットを回転させている。
15度ずつ_rotaitonDegreeに入れる値を増やすと以下の画像の様になる。
ちなみにtransformAlignmentプロパティにAlignment.centerを渡している理由は、回転軸をIconButtonの中央に設定するため。
詳しくは以下リンクを参照のこと。
またウィジェットを回転させる方法については以下のエントリでまとめているので、適宜参考にしてほしい。