🔨
【Flutter】画像やContainerなどのWidgetをボタンにする(onTap()を付与する)方法
画像をボタンにして画面遷移がしたい!
要素を複数入れたContainerをボタンにしたい!
という思いを実現する方法です。
結論:ボタンにしたいWidgetを丸ごとGestureDetectorで囲む
GestureDetector を使うことで、その子要素であるWidgetにonTap()要素を追加することができます。
例えば、
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
productsList[index],
style: Theme.of(context).textTheme.headline5,
),
Text(
productsInfo[index],
),
],
),
)
みたいなContainerを丸ごとボタンにしたいと思ったら、以下のようにGestureDetectorで囲います。
GestureDetector(
onTap(){
//ここに画面遷移などのイベントを書く。
},
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
productsList[index],
style: Theme.of(context).textTheme.headline5,
),
Text(
productsInfo[index],
),
],
),
),
)
最後にGestureDetectorの中に、onTap要素を入れれば完了です。
GestureDetectorは様々なプロパティを持つ
GestureDetectorは、今回取り扱ったonTap()だけではなく、ダブルタップ時に動くものや、長押し時に動くもの、iOSの3Dタップで動くものなど、さまザナなイベントに対して、動作を指定することができます。
気になるかたは、ぜひいろいろ調べて見てください。(私が解説しているわけではないので、他の方の記事や公式を参考にしてください。)
公式ドキュメント↓
Discussion
とてもありがたい記事ありがとうございます。しかし、、
onTap(){
//ここに画面遷移などのイベントを書く。
},
ではなく、正しくは
onTap:(){
//ここに画面遷移などのイベントを書く。
},
だと思います。