Flutter - Introduction aux gestes

Les gestes sont principalement un moyen pour un utilisateur d'interagir avec une application mobile (ou tout autre appareil tactile). Les gestes sont généralement définis comme toute action / mouvement physique d'un utilisateur dans l'intention d'activer un contrôle spécifique de l'appareil mobile. Les gestes sont aussi simples que d'appuyer sur l'écran de l'appareil mobile pour des actions plus complexes utilisées dans les applications de jeu.

Certains des gestes largement utilisés sont mentionnés ici -

  • Tap - Toucher la surface de l'appareil avec le bout du doigt pendant une courte période, puis relâcher le bout du doigt.

  • Double Tap - Tapotez deux fois en peu de temps.

  • Drag - Toucher la surface de l'appareil avec le bout du doigt puis bouger le bout du doigt de manière régulière et enfin relâcher le bout du doigt.

  • Flick - Similaire au glisser, mais en le faisant de manière plus rapide.

  • Pinch - Pincer la surface de l'appareil à l'aide de deux doigts.

  • Spread/Zoom - Face au pincement.

  • Panning - Toucher la surface de l'appareil du bout du doigt et le déplacer dans n'importe quelle direction sans relâcher le bout du doigt.

Flutter offre un excellent support pour tout type de gestes grâce à son widget exclusif, GestureDetector. GestureDetector est un widget non visuel principalement utilisé pour détecter le geste de l'utilisateur. Pour identifier un geste ciblé sur un widget, le widget peut être placé à l'intérieur du widget GestureDetector. GestureDetector capturera le geste et enverra plusieurs événements en fonction du geste.

Certains gestes et événements correspondants sont donnés ci-dessous -

  • Tap
    • onTapDown
    • onTapUp
    • onTap
    • onTapCancel
  • Tapez deux fois
    • onDoubleTap
  • Appui long
    • onLongPress
  • Glissement vertical
    • onVerticalDragStart
    • onVerticalDragUpdate
    • onVerticalDragEnd
  • Traînée horizontale
    • onHorizontalDragStart
    • onHorizontalDragUpdate
    • onHorizontalDragEnd
  • Pan
    • onPanStart
    • onPanUpdate
    • onPanEnd

Maintenant, modifions l'application hello world pour inclure la fonction de détection des gestes et essayons de comprendre le concept.

  • Modifiez le contenu du corps du widget MyHomePage comme indiqué ci-dessous -

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),
  • Observez qu'ici nous avons placé le widget GestureDetector au-dessus du widget Texte dans la hiérarchie des widgets, capturé l'événement onTap et enfin affiché une fenêtre de dialogue.

  • Implémentez la fonction * _showDialog * pour présenter une boîte de dialogue lorsque l'utilisateur tabule le message Hello world . Il utilise les widgets génériques showDialog et AlertDialog pour créer un nouveau widget de dialogue. Le code est indiqué ci-dessous -

// 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();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}
  • L'application se rechargera dans l'appareil à l'aide de la fonction de rechargement à chaud. Maintenant, cliquez simplement sur le message, Hello World et il affichera la boîte de dialogue comme ci-dessous -

  • Maintenant, fermez la boîte de dialogue en cliquant sur l' option de fermeture dans la boîte de dialogue.

  • Le code complet (main.dart) est le suivant -

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', )
            )
         ),
      );
   }
}

Enfin, Flutter fournit également un mécanisme de détection des gestes de bas niveau via le widget Listener . Il détectera toutes les interactions des utilisateurs, puis distribuera les événements suivants -

  • PointerDownEvent
  • PointerMoveEvent
  • PointerUpEvent
  • PointerCancelEvent

Flutter fournit également un petit ensemble de widgets pour effectuer des gestes spécifiques et avancés. Les widgets sont répertoriés ci-dessous -

  • Dismissible - Prend en charge le geste flick pour rejeter le widget.

  • Draggable - Prend en charge le geste de glisser pour déplacer le widget.

  • LongPressDraggable - Prend en charge le geste de glisser pour déplacer un widget, lorsque son widget parent est également déplaçable.

  • DragTarget- Accepte tout widget déplaçable

  • IgnorePointer - Masque le widget et ses enfants du processus de détection des gestes.

  • AbsorbPointer - Arrête le processus de détection de geste lui-même et ainsi tout widget qui se chevauche ne peut pas non plus participer au processus de détection de geste et, par conséquent, aucun événement n'est déclenché.

  • Scrollable - Supporte le défilement du contenu disponible à l'intérieur du widget.