【Flutter】ユーザ操作を検知する【入門】

Flutter入門用の記事となります。本記事では、ユーザの「タッチ」や「ドラッグ」といった操作をアプリで検出する方法を紹介します。

参考：Handle taps

はじめに

アプリで情報を表示するだけではなく、ユーザ操作を検出し、フィードバックを行なったりすることがあると思います。Flutterでは、GestureDetectorを用いることでこれを実現できます。

GestureDetectorを使う

方法はとても簡単です。

• ボタンを作成する
• GestureDetectorでボタンをラップする

これだけです。以下にボタンが押されたことを検出し、SnackBarを表示するサンプルを示します。

参考：【Flutter】snackbarの使い方【Toast】

// GestureDetectorでButtonをラップする
GestureDetector(
  // child(Button)がタップされたらSnackBarを表示する
  onTap: () {
    // タップされるとここが呼び出される
    const snackBar = SnackBar(content: Text('タップされました'));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  },
  child: Container(
    padding: const EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Colors.lightBlue,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: const Text('ボタン'),
  ),
)