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

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

完成形

左が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プロパティと組み合わせてどこからどこまでスワイプしたか判定したりすることもできるのでぜひ活用してみてください。