【Flutter】GestureDetector｜タッチイベントを実装

2022年12月3日2023年1月13日

こんにちは、フラメルです。

今回はContainerやIconなどタッチイベントのないウィジェットにタッチイベントを実装できるGestureDetectorの使い方を紹介します。

タッチイベントの実装方法

タッチイベントを実装したいウィジェットをGestureDetectorのchildでラップします。

次にタップされた時に実行する処理をonTapの引数として渡します。onTapでは一度タップされた時の処理を実行します。他にも２度タップで処理が実行されるonDoubleTapや長押しで処理が実行されるonLongPressなどがあります。

GestureDetector(
  child: Container(
    width: 150,
    height: 150,
    color: Colors.blue,
  ),
  onTap: () => print('シングルクリック'),
  onDoubleTap: () => print('ダブルクリック'),
  onLongPress: () => print('ロングプレス'),
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: GestureDetector(
            child: Container(
              width: 150,
              height: 150,
              color: Colors.blue,
            ),
            onTap: () => print('シングルクリック'),
            onDoubleTap: () => print('ダブルクリック'),
            onLongPress: () => print('ロングプレス'),
          ),
        ),
      ),
    );
  }
}

以上です。