Flutter - Introduzione ai gesti

I gesti sono principalmente un modo per un utente di interagire con un'applicazione mobile (o qualsiasi dispositivo touch). I gesti sono generalmente definiti come qualsiasi azione / movimento fisico di un utente nell'intenzione di attivare un controllo specifico del dispositivo mobile. I gesti sono semplici come toccare lo schermo del dispositivo mobile per azioni più complesse utilizzate nelle applicazioni di gioco.

Alcuni dei gesti ampiamente utilizzati sono menzionati qui:

• Tap - Toccare la superficie del dispositivo con la punta del dito per un breve periodo e quindi rilasciare la punta del dito.

• Double Tap - Toccando due volte in breve tempo.

• Drag - Toccando la superficie del dispositivo con il polpastrello e quindi muovendo il polpastrello in modo costante e infine rilasciando il polpastrello.

• Flick - Simile al trascinamento, ma in modo più veloce.

• Pinch - Pizzicare la superficie del dispositivo usando due dita.

• Spread/Zoom - Opposto di pizzicamento.

• Panning - Toccando la superficie del dispositivo con il polpastrello e spostandolo in qualsiasi direzione senza rilasciare il polpastrello.

Flutter fornisce un eccellente supporto per tutti i tipi di gesti attraverso il suo widget esclusivo, GestureDetector. GestureDetector è un widget non visivo utilizzato principalmente per rilevare il gesto dell'utente. Per identificare un gesto mirato su un widget, il widget può essere posizionato all'interno del widget GestureDetector. GestureDetector acquisirà il gesto e invierà più eventi in base al gesto.

Di seguito sono riportati alcuni dei gesti e gli eventi corrispondenti:

• Tap
• onTapDown
• onTapUp
• onTap
• onTapCancel

• Tocca due volte
• onDoubleTap

• Premere a lungo
• onLongPress

• Trascinamento verticale
• onVerticalDragStart
• onVerticalDragUpdate
• onVerticalDragEnd

• Trascinamento orizzontale
• onHorizontalDragStart
• onHorizontalDragUpdate
• onHorizontalDragEnd

• Pan
• onPanStart
• onPanUpdate
• onPanEnd

Ora, modifichiamo l'applicazione Hello World per includere la funzione di rilevamento dei gesti e proviamo a capire il concetto.

• Modificare il contenuto del corpo del widget MyHomePage come mostrato di seguito -

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

• Si noti che qui abbiamo posizionato il widget GestureDetector sopra il widget Text nella gerarchia dei widget, catturato l'evento onTap e infine mostrato una finestra di dialogo.

• Implementa la funzione * _showDialog * per presentare una finestra di dialogo quando l'utente inserisce il messaggio hello world . Utilizza i widget generici showDialog e AlertDialog per creare un nuovo widget di dialogo. Il codice è mostrato di seguito -

// 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'applicazione verrà ricaricata nel dispositivo utilizzando la funzione di ricarica a caldo. Ora, fai semplicemente clic sul messaggio, Hello World e mostrerà la finestra di dialogo come di seguito -

• Ora chiudi la finestra di dialogo facendo clic sull'opzione di chiusura nella finestra di dialogo.

• Il codice completo (main.dart) è il seguente:

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

Infine, Flutter fornisce anche un meccanismo di rilevamento dei gesti di basso livello tramite il widget Listener . Rileverà tutte le interazioni dell'utente e quindi invia i seguenti eventi:

• PointerDownEvent
• PointerMoveEvent
• PointerUpEvent
• PointerCancelEvent

Flutter fornisce anche una piccola serie di widget per eseguire gesti specifici e avanzati. I widget sono elencati di seguito:

• Dismissible - Supporta il gesto di sfioramento per chiudere il widget.

• Draggable - Supporta il gesto di trascinamento per spostare il widget.

• LongPressDraggable - Supporta il gesto di trascinamento per spostare un widget, quando anche il suo widget principale è trascinabile.

• DragTarget- Accetta qualsiasi widget trascinabile

• IgnorePointer - Nasconde il widget e i suoi figli dal processo di rilevamento dei gesti.

• AbsorbPointer - Interrompe il processo di rilevamento dei gesti stesso e quindi anche qualsiasi widget sovrapposto non può partecipare al processo di rilevamento dei gesti e, quindi, non viene generato alcun evento.

• Scrollable - Supporta lo scorrimento del contenuto disponibile all'interno del widget.