【Flutter】アイコン・画像・テキストをボタンにしたい

Flutterでは標準で様々なButtonウィジェットが存在している。ボタンではなくてアイコンであったり、画像、テキストをタップした時に、何かしらの機能を実装したい場合についてまとめておこうと思う。

アイコン
画像
テキスト
まとめ

アイコン

アイコンをボタンにしたい場合はIconButtonウィジェットを使用すれば良い。このアイコンというのはflutter標準で入っているものであり、下記のようなピクトグラムである。

使い方は下記のようにすれば良い。

IconButton(
  icon: const Icon(Icons.account_circle, size: 40),
  onPressed: () {
　　　　//何かしらを変更
    setState(() {});
  },
),

iconオプションに表示させるアイコンを設定する。on Pressedで押した時の動作を設定する。よくある例ではアイコンをタップすることでページを遷移させたり、表示される文字を変更しページを更新するパターンである。

画像

画像をボタンにしたい場合は方法が2種類ある。GestureDetectorを使用する方法とInkwellを使用する方法である。どちらもパフォーマンス的には同じだが

GestureDetector　取得できるアクションが多い。
Inkwell　押した時のエフェクトが設定できる。

と違いがある。ただしInkwellの場合、エフェクトをたくさんかけるほど重くなるのは言うまでもない。それぞれ用途に応じて使い分けると良いと思う。

★GestureDetectorの場合
GestureDetector(
  onTap(){},  // onDoubleTap(){}でタブルタップ時の反応を設定
  child: Image.network('画像のパス'),
),

★Inkwellの場合
Ink.image(
  height: 100,
  width: 100,
  image: const AssetImage('画像のパス'),
　　child: Inkwell(
  　　onTap(){},
  　　splashColor: Colors.blue,  //押下時のスプラッシュカラー
　　),
),

Inkwellを押下した時

テキスト

テキストをボタンにしたい場合は、TextButtonウィジェットを使用すれば良い。

TextButton(
  onPressed: (){},
  child: Text('Push'),
),

この画像は押した時の挙動なので、実際には枠が存在しない。枠が欲しい場合は、OutlineButtonウィジェットやElevatedButtonウィジェットを使用すると良い。OutlineButtonは文字通り枠だけが追加されたボタンで、ElevatedButtonは影がついたボタンである。モダンっぽい。。。

OutlineButton