Flutterラボの

プレミアム会員になる

【Flutter】GestureDetectorを使って、スワイプしたときの位置を取得する

2020.11.01

GestureDetectorは、画面のタップやスワイプに関する処理を実装することができるので、アプリ開発には欠かせないウィジェットとなります。

今回は、その中で画面のスワイプをしたときにその座標を返すonPanUpdateプロパティを紹介したいと思います。

完成形

画像1

左がX座標、右がY座標です。

コード

GestureDetectorウィジェットのonPanUpdateプロパティを使えば実装することができます。

class TopPage extends StatefulWidget {
 @override
 _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {

 double _currentPositionX = 0;
 double _currentPositionY = 0;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Stack(
       children: [
         Center(
           child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text('${_currentPositionX.round()}', style: TextStyle(fontSize: 60.0),),
               Icon(Icons.close),
               Text('${_currentPositionY.round()}', style: TextStyle(fontSize: 60.0),),
             ],
           ),
         ),
         GestureDetector(
           onPanUpdate: (DragUpdateDetails details) {
             _currentPositionX = details.localPosition.dx;
             _currentPositionY = details.localPosition.dy;

             setState(() {});
           },
           child: Container(width: double.infinity, height: double.infinity, color: Colors.transparent,),
         ),
       ],
     ),
   );
 }

}

今回はスワイプ中の座標を取得して表示していますが、onPanStartプロパティやonPanEndプロパティと組み合わせてどこからどこまでスワイプしたか判定したりすることもできるのでぜひ活用してみてください。


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt