🔨

【Flutter】画像やContainerなどのWidgetをボタンにする(onTap()を付与する)方法

2021/06/30に公開1

画像をボタンにして画面遷移がしたい!
要素を複数入れた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タップで動くものなど、さまザナなイベントに対して、動作を指定することができます。

気になるかたは、ぜひいろいろ調べて見てください。(私が解説しているわけではないので、他の方の記事や公式を参考にしてください。)
公式ドキュメント↓
https://flutter.dev/docs/development/ui/advanced/gestures

Discussion

snowyowlsnowyowl

とてもありがたい記事ありがとうございます。しかし、、

onTap(){
//ここに画面遷移などのイベントを書く。
},

ではなく、正しくは

onTap:(){
//ここに画面遷移などのイベントを書く。
},
だと思います。