![見出し画像](https://assets.st-note.com/production/uploads/images/37829177/rectangle_large_type_2_72f184761d56c2c2d83c2286465d0c4a.jpeg?width=1200)
Photo by
mericanadesico
【Flutter】GestureDetectorを使って、スワイプしたときの位置を取得する
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プロパティと組み合わせてどこからどこまでスワイプしたか判定したりすることもできるのでぜひ活用してみてください。
この記事が気に入ったらサポートをしてみませんか?