【Flutter】IconButton|アイコンボタン・タップ時のエフェクト設定

今回はIconButton の基本的な使い方を紹介します。

IconButton を使えばアイコン型のボタンをつくれます。

\ 世界最大級のオンライン学習サービス /

目次

IconButtonの使い方

IconButton(
  icon: Icon(Icons.home),
  color: Colors.blue,
  iconSize: 50,
  onPressed: () {},
),

icon でアイコンボタンのテーマアイコンを指定します。

IconButton の色とサイズはそれぞれcolor iconSize で指定できます。

タップイベントのエフェクト設定

IconButton(
  icon: Icon(Icons.home),
  color: Colors.blue,
  iconSize: 50,
  highlightColor: Colors.lightBlue.withOpacity(0.3),
  splashColor: Colors.grey.withOpacity(0.4),
  splashRadius: 50,
  onPressed: () {},
),

タップイベント時のカラーエフェクトはhighlightColor splashColor で設定し、エフェクトの広がり(半径)はsplashRadius で指定できます。

ボタンが無効(Disable状態)の時の色を指定

IconButton(
  icon: Icon(Icons.home),
  color: Colors.blue,
  iconSize: 50,
  disabledColor: Colors.grey,
  onPressed: null,
),

disabledColor でボタンが無効状態の時の色を指定できます。

onPressednull の時ボタンが無効となっています。

一緒に読みたい

参考

  • URLをコピーしました!
目次