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

スポンサーリンク
アプリ開発

最近勉強を始めた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() + ":横方向ドラッグされました。");
  },
),
スポンサーリンク

解説

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

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

設定するプロパティ検出されるジェスチャー
onHorizontalDragStartドラッグ開始
onHorizontalDragUpdateドラッグ中
onHorizontalDragEndドラッグ終了

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

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

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

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

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

コメント

タイトルとURLをコピーしました