Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】GestureDetectorを使って、スワイプしたときの位置を取得する
2020.11.01
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プロパティと組み合わせてどこからどこまでスワイプしたか判定したりすることもできるのでぜひ活用してみてください。
Flutterラボ
hatchoutschool
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