フラッター-ジェスチャーの紹介

_ジェスチャー_は、主にユーザーがモバイル（またはタッチベースのデバイス）アプリケーションと対話する方法です。ジェスチャは、一般に、モバイルデバイスの特定のコントロールをアクティブにすることを目的とした、ユーザーの物理的な動作/動きとして定義されます。ジェスチャーは、モバイルデバイスの画面をタップして、ゲームアプリケーションで使用されるより複雑なアクションを実行するのと同じくらい簡単です。

広く使用されているジェスチャのいくつかはここに記載されています-

タップ-指先で短時間デバイスの表面に触れてから指先を離します。
ダブルタップ-短時間で2回タップ。
ドラッグ-指先でデバイスの表面に触れてから、安定した方法で指先を動かし、最後に指先を離します。
フリック-ドラッグに似ていますが、より高速に実行します。
ピンチ-2本の指でデバイスの表面をつまむ。
スプレッド/ズーム-ピンチの反対。
パンニング-指先でデバイスの表面に触れ、指先を離さずに任意の方向に動かします。

Flutterは、専用のウィジェットである GestureDetector を介して、あらゆる種類のジェスチャに対する優れたサポートを提供します。 GestureDetectorは、主にユーザーのジェスチャーを検出するために使用される非視覚的なウィジェットです。ウィジェットを対象とするジェスチャを識別するために、ウィジェットをGestureDetectorウィジェット内に配置できます。 GestureDetectorはジェスチャをキャプチャし、ジェスチャに基づいて複数のイベントをディスパッチします。

ジェスチャのいくつかと対応するイベントを以下に示します-

Tap

onTapDown
onTapUp
onTap
onTapCancel

ダブルタップ

onDoubleTap

長押し

onLongPress

垂直ドラッグ

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

水平ドラッグ

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

Pan

onPanStart
onPanUpdate
onPanEnd

ここで、hello worldアプリケーションを変更してジェスチャ検出機能を含め、概念を理解してみましょう。

以下に示すように、_MyHomePage_ウィジェットの本文の内容を変更します-

body: Center(
   child: GestureDetector(
      onTap: () {
         _showDialog(context);
      },
      child: Text( 'Hello World', )
   )
),

ここで、ウィジェット階層のTextウィジェットの上に_GestureDetector_ウィジェットを配置し、onTapイベントをキャプチャし、最後にダイアログウィンドウを表示したことに注目してください。
_showDialog 関数を実装して、ユーザーが_hello world message_をタブで移動したときにダイアログを表示します。汎用の_showDialog_および_AlertDialog_ウィジェットを使用して、新しいダイアログウィジェットを作成します。コードは以下に示されています-

//user defined function void _showDialog(BuildContext context) {
  //flutter defined function
   showDialog(
      context: context, builder: (BuildContext context) {
        //return object of type Dialog
         return AlertDialog(
            title: new Text("Message"),
            content: new Text("Hello World"),
            actions: <Widget>[
               new FlatButton(
                  child: new Text("Close"),
                  onPressed: () {
                     Navigator.of(context).pop();
                  },
               ),
            ],
         );
      },
   );
}

アプリケーションは、ホットリロード機能を使用してデバイスにリロードします。今、メッセージ、Hello Worldをクリックするだけで、以下のようなダイアログが表示されます-

ホットリロード機能

次に、ダイアログの_close_オプションをクリックして、ダイアログを閉じます。
完全なコード（main.dart）は次のとおりです-

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData( primarySwatch: Colors.blue,),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

  //user defined function
   void _showDialog(BuildContext context) {
     //flutter defined function showDialog(
         context: context, builder: (BuildContext context) {
           //return object of type Dialog return AlertDialog(
               title: new Text("Message"),
               content: new Text("Hello World"),
               actions: <Widget>[
                  new FlatButton(
                     child: new Text("Close"),
                     onPressed: () {
                        Navigator.of(context).pop();
                     },
                  ),
               ],
            );
         },
      );
   }
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center(
            child: GestureDetector(
               onTap: () {
                  _showDialog(context);
               },
            child: Text( 'Hello World', )
            )
         ),
      );
   }
}

最後に、Flutterは_Listener_ウィジェットを介して低レベルのジェスチャー検出メカニズムも提供します。すべてのユーザーインタラクションを検出し、次のイベントをディスパッチします-

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutterは、特定のジェスチャだけでなく高度なジェスチャを実行するための小さなウィジェットセットも提供します。ウィジェットは以下のとおりです-

Dismissible -ウィジェットを閉じるフリックジェスチャをサポートします。
ドラッグ可能-ウィジェットを移動するためのドラッグジェスチャーをサポートしています。
LongPressDraggable -親ウィジェットもドラッグ可能な場合、ウィジェットを移動するドラッグジェスチャをサポートします。
DragTarget -_Draggable_ウィジェットを受け入れます
IgnorePointer -ジェスチャ検出プロセスからウィジェットとその子を非表示にします。
AbsorbPointer -ジェスチャ検出プロセス自体を停止するため、重複するウィジェットもジェスチャ検出プロセスに参加できないため、イベントは発生しません。
スクロール可能-ウィジェット内で利用可能なコンテンツのスクロールをサポートします。

Flutter-introduction-to-gestures

フラッター-ジェスチャーの紹介