Un tuffo profondo nei widget degli eroi in Flutter

Un tutorial sulla potenza dei widget Hero in Flutter

Questo articolo è il quarto articolo di una serie di articoli pensati per uno studio dettagliato dei widget Flutter. Dopo aver approfondito ListViews, TextFields e FloatingActionButtons, andremo ora nel widget Hero in Flutter.

Introduzione alle animazioni degli eroi

Un'animazione di eroe in una frase è semplicemente un elemento di una schermata che "vola" alla successiva quando l'app passa alla pagina successiva.

Le animazioni degli eroi prendono un elemento come un'icona che ora è chiamato un "eroe" e una volta che la transizione di pagina viene attivata, di solito facendo clic sull'icona, l'eroe "vola" alla pagina successiva. Quando l'utente torna alla pagina precedente, l'animazione si sposta nella direzione opposta e l'icona torna al suo posto.

Discuteremo non solo le animazioni di base degli eroi ma anche le cose che possiamo personalizzare al riguardo. Vediamo prima le basi.

Creazione di un'animazione di base dell'eroe

Le animazioni degli eroi sono probabilmente una delle animazioni più semplici da eseguire in Flutter e non richiedono molta configurazione. Dando un'occhiata all'esempio sopra, possiamo vedere che lo stesso widget icona app esiste su entrambe le pagine. Tutto ciò di cui abbiamo bisogno è un modo per dire a Flutter che entrambi sono collegati.

Lo facciamo avvolgendo un elemento come un'icona in un widget Hero.

Eroe(
  tag: "DemoTag",
  child: Icon (
    Icons.add,
    taglia: 70.0,
  ),
),

Gli forniamo un tag per dare un nome a questo eroe specifico. Questo è necessario perché se abbiamo più eroi sulla stessa pagina, ogni eroe sa dove volare.

Ora l'app sa che esiste un widget eroe che vuole volare alla pagina successiva. Ora tutto ciò di cui abbiamo bisogno è un posto dove volare.

Tutto ciò di cui abbiamo bisogno è un widget Hero sulla seconda pagina con lo stesso tag.

Eroe(
  tag: "DemoTag",
  child: Icon (
    Icons.add,
    dimensione: 150.0,
  ),
),

E questo si traduce in:

L'animazione dell'eroe creata con il codice sopra

Personalizzare le animazioni degli eroi

Il widget Hero ci consente di personalizzare aspetti dell'animazione. Esploriamo alcune possibilità.

Aggiunta di segnaposto

Dopo che il widget vola via dal luogo in cui si trovava e prima che il widget arrivi a destinazione, nella destinazione c'è spazio vuoto. Possiamo aggiungere un segnaposto a questa posizione.

Per ora usiamo un Indicatore di progressi circolari come segnaposto.

Eroe(
    tag: "DemoTag",
    child: Icon (
      Icons.add,
      dimensione: 150.0,
    ),
    placeholderBuilder: (contesto, widget) {
      Return Container (
        altezza: 150,0,
        larghezza: 150,0,
        figlio: CircularProgressIndicator (),
      );
    },
  ),

Usiamo placeholderBuilder per costruire il segnaposto e restituire il widget che vorremmo avere come segnaposto.

Utilizzando un segnaposto:

CircularProgressIndicator prende il posto dell'eroe fino al suo arrivo.

Modifica del widget Hero

Flutter ci consente di cambiare il widget che in realtà vola da una pagina all'altra senza cambiare i widget sulle due pagine.

Usiamo un'icona a forma di razzo anziché un'icona "+" come eroe senza cambiare i figli dei widget dell'eroe.

L'icona dell'eroe cambia ma le icone finali rimangono le stesse.

Lo facciamo usando il parametro flightShuttleBuilder (Da qui, l'esempio del razzo).

Eroe(
  tag: "DemoTag",
  child: Icon (
    Icons.add,
    dimensione: 150.0,
  ),
  flightShuttleBuilder: (flightContext, animazione, direzione,
      fromContext, aContext) {
    Icona di ritorno (FontAwesomeIcons.rocket, dimensione: 150.0,);
  },
),

Il metodo flightShuttleBuilder ha 5 parametri e ci fornisce l'animazione e la direzione dell'animazione.

Per ora, la dimensione dell'icona del razzo rimane a 150,0 per entrambe le direzioni. Possiamo avere diverse configurazioni per ciascuna direzione usando il parametro direction del metodo.

if (direction == HeroFlightDirection.push) {
  Icona di ritorno (
    FontAwesomeIcons.rocket,
    dimensione: 150.0,
  );
} else if (direction == HeroFlightDirection.pop) {
  Icona di ritorno (
    FontAwesomeIcons.rocket,
    taglia: 70.0,
  );
}
Le dimensioni sono ora diverse in diverse direzioni.

Far funzionare le animazioni di Hero con i gesti di scorrimento posteriore di iOS

Per impostazione predefinita, le animazioni degli eroi funzionano quando si preme il pulsante Indietro su iOS ma non funzionano con il back-swipe.

Utilizzando il pulsante Indietro:

Il pulsante Indietro attiva l'animazione dell'eroe.

Usando il colpo indietro:

Il colpo indietro non attiva l'animazione dell'eroe.

Per risolvere questo problema, imposta semplicemente transizioneOnUserGestures su true su entrambi i widget Hero. Questo è falso per impostazione predefinita.

Eroe(
  tag: "DemoTag",
  child: Icon (
    Icons.add,
  ),
  transizioneOnUserGestures: true,
),

E questo attiverà anche le animazioni degli eroi al back swipe.

Questo è tutto per questo articolo! Spero vi sia piaciuto e lasciare qualche applauso se lo avete fatto. Seguimi per altri articoli di Flutter e commenta per qualsiasi feedback tu possa avere su questo articolo.

Sentiti libero di dare un'occhiata anche ai miei altri profili e articoli:

cinguettio

GitHub

Alcuni dei miei altri articoli