Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】ダブルタップを検知する(GestureDetector)
2021.11.04
onTapやonPressedでシングルタップを検知することはよくありますが、ダブルタップも簡単に検知できるのでその方法を紹介します。
GestureDetectorウィジェトのonDoubleTapプロパティで検知できます。
class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
String _text = '';
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(_text, style: const TextStyle(fontSize: 30),),
GestureDetector(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
onTap: () {
setState(() {
_text = 'シングルタップ';
});
},
onDoubleTap: () {
setState(() {
_text = 'ダブルタップ';
});
},
),
],
),
),
);
}
}
GestureDetectorでダブルタップ以外にも、ロングタップやドラッグなどいろいろな動作が取得できるのでぜひ使ってみてください。
ちなみに、シングルタップだけしかないときよりも、ダブルタップがあるときのほうがシングルタップの検知が遅くなるのでご注意ください。
Flutterラボ
hatchoutschool

85min
プレミアム会員
見放題
GoogleMapを用いて地図アプリを作成する
2022.04.16
¥6,600
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13