📔

GestureDetectorを使ってみた

2024/02/03に公開

Flutter

はじめに

今回はジェスチャー操作を実装できるGestureDetectorを使ってみたので、学んだことをまとめようと思います。

GestureDetectorとは

GestureDetectorはタップ、長押し、スワイプなどの様々なジェスチャーを検出し、それに応じたアクションを実行することができます。小要素を持つ場合、サイズは小要素に設定されているものが優先されます。

使い方

以下のようにして使用します

GestureDetector(
  onTap: () {
    print('onTap');
  },
  child: Container(
    //Containerの中身の実装
  )
),

この場合は、Containerの中身をタップした時にコンソールにonTapと表示されます。

使用例

実際に簡単なものを作成したいと思います。今回は操作によって色が変化するものを作成していきたいと思います。

import 'package:flutter/material.dart';

void main() {
  runApp(const GestureDetectorExampleApp());
}

class GestureDetectorExampleApp extends StatefulWidget {
  const GestureDetectorExampleApp({super.key});

  @override
  _GestureDetectorExampleAppState createState() => _GestureDetectorExampleAppState();
}

class _GestureDetectorExampleAppState extends State<GestureDetectorExampleApp> {
  Color _color = Colors.blue; // 状態を保持する変数を定義

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GestureDetector Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _color = Colors.yellow; // タップ時に状態を更新
              });
            },
            onDoubleTap: () {
              setState(() {
                _color = Colors.red; // ダブルタップ時に状態を更新
              });
            },
            onLongPress: () {
              setState(() {
                _color = Colors.green; // 長押し時に状態を更新
              });
            },
            child: Container(
              width: 200,
              height: 200,
              color: _color,
              child: const Center(
                child: Text(
                  'Tap me',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

上記のコードの解説をします。解説はGestureDetectorに関連する部分のみします。

解説

color変数の設定

まず、色の状態を保持する_color変数を設定します。

Color _color = Colors.blue;

各処理内容の実装

次にGestureDetectorを使って、各操作時の処理内容を記述していきます。今回はonTap、onDoubleTap、onLongPress、の時の処理を記述しています。操作内容によって色が変化するようになっています。

 GestureDetector(
            onTap: () {
              setState(() {
                _color = Colors.yellow; // タップ時に状態を更新
              });
            },
            onDoubleTap: () {
              setState(() {
                _color = Colors.red; // ダブルタップ時に状態を更新
              });
            },
            onLongPress: () {
              setState(() {
                _color = Colors.green; // 長押し時に状態を更新
              });
            },

小要素の設定

最後にGestureDetectorの小要素のContainerのcolorプロパティに_colorを設定します。

child: Container(
              width: 200,
              height: 200,
              color: _color,
              child: const Center(
                child: Text(
                  'Tap me',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              ),
            ),

おわりに

今回はGestureDetectorの基本的な内容について説明しました。GestureDetectorを使うことで、多様なジェスチャーに対応する処理を実装することができます。今回紹介した以外にもいろんなプロパティがあるので、ぜひ実際に触ってみてください。新しいことがわかったらまた記事を書きたいと思います。最後まで読んでいただきありがとうございました。