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