2020/10/18 Flutter : Handle tapsの訳

アプリの中で、ユーザーに対して情報を表示するだけではなく、ユーザーに対してインタラクティブなユーザーエクスペリエンス(UX)を提供したい場合。タップ・ドラッグなどのユーザーの基本的なアクションに対応するため、GestureDetectorウィジェットを使います。

このページでは、タップされるとスナックバーを表示するカスタムボタンをの作成を、以下の手順に沿って学びます。

1. ボタンを作ります。
2. GestureDetectorウィジェットでラップし、onTapプロパティにコールバックを設定します(渡します)。

GestureDetector(
  // childプロパティに設定したウィジェットがタップされた時スナックバーを表示する
  onTap: () {
    final snackBar = SnackBar(content: Text("Tap"));

    Scaffold.of(context).showSnackBar(snackBar);
  },
  // ↓カスタムボタン
  child: Container(
    padding: EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Theme.of(context).buttonColor,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Text('My Button'),
  ),
);

注意点

• マテリアルリップルエフェクトをボタンに追加したい場合は、Add Material touch ripples をご覧ください。
• まとめのサンプルではカスタムボタンを作っていますが、Flutterには

ElevatedButton, TextButton, and CupertinoButton

などの便利な組み込みウィジェットが用意されています。

参考

https://flutter.dev/docs/cookbook/gestures/handling-taps