※https://docs.flutter.dev/cookbook/gestures/handling-taps のリファレンスブログです。
このFlutterの「Handle taps」のレシピでは、ユーザーのタップ操作（タッチ）に反応するカスタムボタンの作成方法について触れています。主に「GestureDetector」ウィジェットを使用して、タップイベントを処理する方法が紹介されています。
１．カスタムボタンの作成
最初に、ボタンとして表示されるカスタムウィジェットを作成します。これは、Containerウィジェットを使用してデザインされています。このボタンには、青い背景色と丸みを帯びた角の装飾 (BoxDecoration) が設定され、テキスト (“My Button”) が表示されます。
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(8),
),
child: const Text('My Button'),
),２．GestureDetector でのラッピング
GestureDetector ウィジェットを使用して、このカスタムボタンをラップ（包む）します。GestureDetector は、ユーザーのタップやドラッグなどのジェスチャー（操作）を検知するウィジェットです。onTap コールバックを使用して、ユーザーがボタンをタップした際に特定のアクションを実行するように設定します。
GestureDetector(
onTap: () {
const snackBar = SnackBar(content: Text('Tap'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(8),
),
child: const Text('My Button'),
),
);３．SnackBar を表示する
上記の onTap コールバックでは、ユーザーがボタンをタップした際に SnackBar を表示するようにしています。SnackBar は、画面の下部に表示される短いメッセージを表示するUI要素で、アクションの完了や通知をユーザーに伝えるのに便利です。
const snackBar = SnackBar(content: Text('Tap'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);４．実装例全体
サンプルコード全体は、GestureDetector を使ってボタンのタップイベントを検知し、そのイベントが発生すると SnackBar が表示されるシンプルなデモアプリです。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Gesture Demo';
return const MaterialApp(
title: title,
home: MyHomePage(title: title),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({super.key, required this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: const Center(
child: MyButton(),
),
);
}
}
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
// GestureDetector でボタンをラップ
return GestureDetector(
onTap: () {
const snackBar = SnackBar(content: Text('Tap'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(8),
),
child: const Text('My Button'),
),
);
}
}補足：
GestureDetector は多くのジェスチャー（タップ、ダブルタップ、ドラッグ、ロングプレスなど）を検知できます。
InkWell を使うと、マテリアルデザインの「インクスプラッシュ」効果を追加できます。これを使うことで、タップ時に波紋のような効果がボタン上に表示され、視覚的にわかりやすくなります。
上記の例では、カスタムボタンのタップ検出を行っていますが、GestureDetector は他の多くのジェスチャーを検知できるので、アプリにインタラクティブな要素を簡単に追加できます。