見出し画像

【Flutter】GestureDetectorのタップ範囲を拡大する

Flutterラボ

画像1

普通はタップできないWidgetをタップできるようにすることができるGestureDetectorですが、以下のコードの場合、Text部分しかタップ範囲になりません。

GestureDetector(
 child: Container(
   width: 300,
   height: 100,
   alignment: Alignment.center,
   child: Text('タップ範囲を拡大する'),
 ),
 onTap: () {},
)

300×100のContainer全体をタップ範囲にしたい場合は、以下の1行をプロパティに追加することで解決します。

behavior: HitTestBehavior.opaque

1行追加した後のコードはこちらです。

GestureDetector(
 behavior: HitTestBehavior.opaque, //この行を追加
 child: Container(
   width: 300,
   height: 100,
   alignment: Alignment.center,
   child: Text('タップ範囲を拡大する'),
 ),
 onTap: () {},
)

リンク


この記事が気に入ったらサポートをしてみませんか？