こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- ボタン長押し処理の基本
- ボタンを長押しした数秒後に処理を実行する方法
- ボタンを長押ししている間、処理を実行し続ける方法
- ボタン長押し処理時の状態管理の方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
ボタン長押し処理の基本
概要
Flutterでは、GestureDetector
やInkWell
ウィジェットを使って、ボタンの長押し処理を簡単に実装できます。ここでは、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を構築します。
動作確認
それでは、動作を確認してみましょ〜
ボタンを長押し数秒後に処理を実行
概要
ボタンを長押し数秒後に処理を実行するには、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
メソッドをオーバーライドして、ウィジェットが破棄される時にタイマーをキャンセルします。これはリソースのリークを防ぐために重要です。
動作確認
それでは、動作を確認してみましょ〜
ボタン長押し時に処理を実行し続ける方法
概要
ボタンを長押ししている間、継続的に処理を行うには、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
メソッドをオーバーライドして、ウィジェットが破棄される際にタイマーをキャンセルし、リソースリークを防ぎます。
動作確認
それでは、動作を確認してみましょ〜
まとめ
いかがでしたでしょうか?今回は、ボタン長押し処理の基本から長押し処理時の状態管理する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] 【Flutter】ボタン長押し処理の基本から長押し処理時の状態管理までの完全… […]