Een diepe duik in hero-widgets in Flutter

Een tutorial over de kracht van Hero-widgets in Flutter

Dit artikel is het vierde artikel in een reeks artikelen bedoeld voor een gedetailleerde studie van Flutter-widgets. Nadat we ListViews, TextFields en FloatingActionButtons diepgaand hebben behandeld, gaan we nu naar de Hero-widget in Flutter.

Inleiding tot Hero-animaties

Een Hero-animatie in één zin is gewoon een element van het ene scherm dat naar de volgende 'vliegt' wanneer de app naar de volgende pagina gaat.

Heldanimaties hebben een element als een pictogram dat nu een 'Held' wordt genoemd. Zodra de paginatransitie is geactiveerd, meestal door op het pictogram te klikken, 'vliegt' de held naar de volgende pagina. Wanneer de gebruiker terug naar de vorige pagina navigeert, gaat de animatie in de andere richting en gaat het pictogram terug naar zijn plaats.

We bespreken niet alleen basisheld-animaties, maar ook dingen die we eraan kunnen aanpassen. Laten we eerst de basis bekijken.

Een basisheldanimatie maken

Hero-animaties zijn waarschijnlijk een van de gemakkelijkste animaties in Flutter en vereisen niet veel installatie. Als we het bovenstaande voorbeeld bekijken, zien we dat dezelfde app-pictogramwidget op beide pagina's bestaat. Het enige dat we nodig hebben, is een manier om Flutter te vertellen dat beide zijn gekoppeld.

We doen dit door een element als een pictogram in een Hero-widget te verpakken.

Held(
  tag: "DemoTag",
  kind: pictogram (
    Icons.add,
    maat: 70.0,
  )
)

We leveren het een tag om deze specifieke held een naam te geven. Dit is nodig omdat als we meerdere helden op dezelfde pagina hebben, elke held weet waar hij naartoe moet vliegen.

Nu weet de app dat er een heldenwidget is die naar de volgende pagina wil vliegen. Nu hebben we alleen nog een plek nodig om naar toe te vliegen.

Het enige dat we nodig hebben is een Hero-widget op de tweede pagina met dezelfde tag.

Held(
  tag: "DemoTag",
  kind: pictogram (
    Icons.add,
    maat: 150.0,
  )
)

En dit resulteert in:

De Hero-animatie gemaakt met de bovenstaande code

Hero-animaties aanpassen

Met de Hero-widget kunnen we aspecten van de animatie aanpassen. Laten we een paar mogelijkheden bekijken.

Tijdelijke aanduidingen toevoegen

Nadat de widget van de plaats is gevlogen waar hij was en voordat de widget op de bestemming aankomt, is er lege ruimte op de bestemming. We kunnen een tijdelijke aanduiding toevoegen aan deze locatie.

Laten we voorlopig een CircularProgressIndicator gebruiken als tijdelijke aanduiding.

Held(
    tag: "DemoTag",
    kind: pictogram (
      Icons.add,
      maat: 150.0,
    )
    placeholderBuilder: (context, widget) {
      retourcontainer (
        hoogte: 150.0,
        breedte: 150.0,
        child: CircularProgressIndicator (),
      );
    },
  )

We gebruiken de placeholderBuilder om de placeholder te construeren en de widget terug te sturen die we graag als placeholder willen hebben.

Een tijdelijke aanduiding gebruiken:

De CircularProgressIndicator neemt de plaats van de held in totdat deze arriveert.

De Hero-widget wijzigen

Met Flutter kunnen we de widget wijzigen die daadwerkelijk van de ene pagina naar de andere vliegt zonder de widgets op de twee pagina's te wijzigen.

Laten we een raketpictogram gebruiken in plaats van een "+" -pictogram als de held zonder de kinderen van de hero-widgets te veranderen.

Het heldenpictogram verandert, maar de laatste pictogrammen blijven hetzelfde.

We doen dit met de parameter flightShuttleBuilder (vandaar het raketvoorbeeld).

Held(
  tag: "DemoTag",
  kind: pictogram (
    Icons.add,
    maat: 150.0,
  )
  flightShuttleBuilder: (flightContext, animatie, richting,
      fromContext, toContext) {
    terugkeer pictogram (FontAwesomeIcons.rocket, grootte: 150.0,);
  },
)

De methode flightShuttleBuilder heeft 5 parameters en geeft ons de animatie en de richting van de animatie.

Voor nu blijft de grootte van het raketpictogram in beide richtingen 150,0. We kunnen verschillende configuraties hebben voor elke richting met behulp van de richtingsparameter van de methode.

if (direction == HeroFlightDirection.push) {
  terugkeer pictogram (
    FontAwesomeIcons.rocket,
    maat: 150.0,
  );
} anders if (direction == HeroFlightDirection.pop) {
  terugkeer pictogram (
    FontAwesomeIcons.rocket,
    maat: 70.0,
  );
}
Maten verschillen nu in verschillende richtingen.

Hero-animaties laten werken met iOS-veegbewegingen

Standaard werken hero-animaties wanneer op de terug-knop wordt gedrukt op iOS, maar werken ze niet bij terugvegen.

Terugknop gebruiken:

Terugknop activeert de heldanimatie.

Terugvegen gebruiken:

Terug vegen activeert de held-animatie niet.

Om dit op te lossen, zet je gewoon transitionOnUserGestures op true op beide Hero-widgets. Dit is standaard niet waar.

Held(
  tag: "DemoTag",
  kind: pictogram (
    Icons.add,
  )
  transitionOnUserGestures: waar,
)

En dit zal ook hero-animaties activeren bij het terug vegen.

Dat is het voor dit artikel! Ik hoop dat je ervan genoten hebt en laat een paar klappen achter als je dat deed. Volg mij voor meer Flutter-artikelen en commentaar voor eventuele feedback over dit artikel.

Bekijk ook mijn andere profielen en artikelen:

tjilpen

GitHub

Enkele van mijn andere artikelen