Flutter-ジェスチャーの概要

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

広く使用されているジェスチャーのいくつかをここで説明します-

  • Tap −デバイスの表面に指先で短時間触れてから、指先を離します。

  • Double Tap −短時間で2回たたく。

  • Drag −デバイスの表面に指先で触れ、安定して指先を動かし、最後に指先を離します。

  • Flick −ドラッグに似ていますが、より高速な方法で実行します。

  • Pinch −2本の指でデバイスの表面をつまむ。

  • Spread/Zoom −つまむの反対。

  • Panning −指先でデバイスの表面に触れ、指先を離さずに任意の方向に動かします。

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', ) 
   ) 
),
  • ここでは、GestureDetectorウィジェットをウィジェット階層のTextウィジェットの上に配置し、onTapイベントをキャプチャして、最後にダイアログウィンドウを表示していることを確認してください。

  • * _showDialog *関数を実装して、ユーザーがhelloworldメッセージをタブで移動したときにダイアログを表示します。一般的な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というメッセージをクリックするだけで、次のようなダイアログが表示されます-

  • 次に、ダイアログの閉じるオプションをクリックして、ダイアログを閉じます。

  • 完全なコード(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は、リスナーウィジェットを介して低レベルのジェスチャ検出メカニズムも提供します。すべてのユーザーインタラクションを検出し、次のイベントをディスパッチします-

  • PointerDownEvent
  • PointerMoveEvent
  • PointerUpEvent
  • PointerCancelEvent

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

  • Dismissible −ウィジェットを閉じるためのフリックジェスチャをサポートします。

  • Draggable −ウィジェットを移動するためのドラッグジェスチャをサポートします。

  • LongPressDraggable −親ウィジェットもドラッグ可能である場合に、ウィジェットを移動するためのドラッグジェスチャをサポートします。

  • DragTargetドラッグ可能なウィジェットを受け入れます

  • IgnorePointer −ウィジェットとその子をジェスチャ検出プロセスから非表示にします。

  • AbsorbPointer −ジェスチャ検出プロセス自体を停止するため、重複するウィジェットもジェスチャ検出プロセスに参加できず、イベントは発生しません。

  • Scrollable −ウィジェット内で利用可能なコンテンツのスクロールをサポートします。