【アプリ開発】Flutterでドラッグを検出する

[temp id=4]

最近勉強を始めたFlutterを使ったアプリ開発でドラッグの処理を実装することがあったので手順を共有します。(2021/01/23時点)

使用するWidget

使用するWidgetはGestureDetectorになります。

例文

GestureDetector(
  child: Text(
    'ドラッグしてください。',
  ),
  //横方向ドラッグの開始時に呼ばれる
  onHorizontalDragStart: (dragStartPoint){
    print(dragStartPoint.toString() + ":横方向ドラッグが開始されました。");
  },
  //横方向ドラッグ中に呼ばれる
  onHorizontalDragUpdate: (dragPoint){
    print(dragPoint.toString() + ":横方向ドラッグ中です。");
  },
  //横方向ドラッグ後に呼ばれる
  onHorizontalDragEnd: (dragEndPoint){
    print(dragEndPoint.toString() + ":横方向ドラッグされました。");
  },
),

[ad]

解説

ロングタップを実装するウィジェットをGestureDetectorでラップしてください。

そうすることでタッチイベントなどのジェスチャーを検出することができます。

onHorizontalDragStart: (dragStartPoint)引数に指定したdragStartPointにはドラッグ中の場所を示す値が入っています。

例えば以下のような状態です。

DragUpdateDetails(Offset(-1.0, 0.0)):横方向ドラッグ中です。

DragUpdateDetailsというオブジェクトの中にoffsetが含まれています。これはドラッグを開始した位置からの距離を表しています。

どのくらいドラッグしたら〜みたいな処理をしたい場合はこれを利用します。