【Flutter】ボタンの長押し判定を実装する

2023年2月8日

ボタンを長押しした際に処理を実行する方法を紹介します。

今回はマテリアルボタンの1つ「ElevatedButton」で長押し判定を実装していきます。

ボタン長押しで処理を実行させる方法

「ElevatedButton」で長押し判定を実装するには「onLongPress」を使用します。

ワンタップの処理は「onPressed」です。

ElevatedButton(
  child: Text('Click Me'),
  onPressed: () => print('タップされました'),
  onLongPress: () => print('長押しされました'),
),

サンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLiked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: ElevatedButton(
            child: Text('Click Me'),
            onPressed: () => print('タップされました'),
            onLongPress: () => print('長押しされました'),
          ),
        ),
      ),
    );

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/ElevatedButton-class.html