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

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

どのようにFlutterを学んでいる?

私は書籍でFlutterを学んでいます。おすすめは基礎から学ぶ Flutterです。

基礎から学ぶ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が含まれています。これはドラッグを開始した位置からの距離を表しています。

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

暇な時間にU-NEXT!

今なら無料1ヶ月無料トライアル600円分の有料コンテンツを使えるチャンス!

見放題作品が31日間無料で視聴可能最新作はレンタル配信!

600円分のポイントプレゼント!DVD・ブルーレイよりも先行配信の最新作、放送中ドラマの視聴や最新コミックの購入に使用可能

 

追加料金なく、80誌以上の雑誌が読み放題

 

アプリ開発
スポンサーリンク
uediveをフォローする
SEの休日

コメント

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