【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全ガイド!

【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全ガイド!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • ボタン長押し処理の基本
  • ボタンを長押しした数秒後に処理を実行する方法
  • ボタンを長押ししている間、処理を実行し続ける方法
  • ボタン長押し処理時の状態管理の方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

ボタン長押し処理の基本

概要

Flutterでは、GestureDetectorInkWellウィジェットを使って、ボタンの長押し処理を簡単に実装できます。ここでは、GestureDetectorを使った基本的な長押し処理のサンプルコードをご紹介します。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: LongPressDemo(),
        ),
      ),
    );
  }
}

class LongPressDemo extends StatefulWidget {
  @override
  _LongPressDemoState createState() => _LongPressDemoState();
}

class _LongPressDemoState extends State<LongPressDemo> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        _incrementCounter();
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Text(
          '長押しでカウントアップ: $_counter',
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 7-18行目: MyAppクラスでMaterialAppウィジェットを使用してアプリの基本構成を定義します。
  • 20-23行目: LongPressDemo StatefulWidgetを定義して、状態管理を可能にします。
  • 28-32行目: _LongPressDemoState クラス内で、_incrementCounterメソッドを定義して、ボタンが長押しされた時にカウンターを増やします。
  • 36-51行目: GestureDetectorを使用して長押しイベントを検出し、カウンターを増やすUIを構築します。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】ボタン長押し処理の基本

ボタンを長押し数秒後に処理を実行

概要

ボタンを長押し数秒後に処理を実行するには、Timerクラスを利用します。以下のコードでは、ボタンを長押しして、2秒後にカウンターが増加します。

Timerについては、以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

サンプルコード

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: LongPressAfterDelayDemo(),
        ),
      ),
    );
  }
}

class LongPressAfterDelayDemo extends StatefulWidget {
  @override
  _LongPressAfterDelayDemoState createState() => _LongPressAfterDelayDemoState();
}

class _LongPressAfterDelayDemoState extends State<LongPressAfterDelayDemo> {
  int _counter = 0;
  Timer? _timer;

  void _startIncrementCounterAfterDelay() {
    _timer = Timer(Duration(seconds: 2), () {
      setState(() {
        _counter++;
      });
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        _startIncrementCounterAfterDelay();
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Text(
          '2秒後に長押しでカウントアップ: $_counter',
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 21-24行目: LongPressAfterDelayDemo StatefulWidgetを定義します。これにより、ウィジェットの状態が変化したときにUIを更新できます。
  • 30-36行目: _startIncrementCounterAfterDelayメソッドを定義して、2秒間の遅延後にカウンターを増やします。これはTimerクラスを使用して実現されます。
  • 39-42行目: disposeメソッドをオーバーライドして、ウィジェットが破棄される時にタイマーをキャンセルします。これはリソースのリークを防ぐために重要です。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】ボタンを長押し数秒後に処理を実行

ボタン長押し時に処理を実行し続ける方法

概要

ボタンを長押ししている間、継続的に処理を行うには、Timerクラスを利用します。以下のコードでは、ボタンを長押ししている間、0.5秒ごとにカウンターが増加します。

サンプルコード

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ContinuousLongPressDemo(),
        ),
      ),
    );
  }
}

class ContinuousLongPressDemo extends StatefulWidget {
  @override
  _ContinuousLongPressDemoState createState() => _ContinuousLongPressDemoState();
}

class _ContinuousLongPressDemoState extends State<ContinuousLongPressDemo> {
  int _counter = 0;
  Timer? _timer;

  void _startContinuousIncrement() {
    _timer = Timer.periodic(Duration(milliseconds: 200), (timer) {
      setState(() {
        _counter++;
      });
    });
  }

  void _stopContinuousIncrement() {
    _timer?.cancel();
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPressStart: (details) {
        _startContinuousIncrement();
      },
      onLongPressEnd: (details) {
        _stopContinuousIncrement();
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Text(
          '長押しで連続カウント: $_counter',
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 21-24行目: ContinuousLongPressDemo StatefulWidgetを定義して、ウィジェットが状態変更に対応できるようにします。
  • 30-40行目: _startContinuousIncrement_stopContinuousIncrementメソッドを定義して、ユーザーが長押しを始めた時にカウンターを連続して増やし、長押しをやめた時に停止します。これはTimer.periodicを使用しています。
  • 43-46行目: disposeメソッドをオーバーライドして、ウィジェットが破棄される際にタイマーをキャンセルし、リソースリークを防ぎます。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】ボタン長押し時実行し続ける処理

まとめ

いかがでしたでしょうか?今回は、ボタン長押し処理の基本から長押し処理時の状態管理する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次