Et dybt dykk i helten-widgets i flutter

En tutorial til styrken af ​​Hero-widgets i Flutter

Denne artikel er den fjerde artikel i en række artikler beregnet til en detaljeret undersøgelse af Flutter-widgets. Efter at have dækket ListViews, TextFields og FloatingActionButtons i dybden, går vi nu ind i Hero-widgeten i Flutter.

Introduktion til Hero-animationer

En helte-animation i en sætning er simpelthen et element i en skærm, der "flyver" til den næste, når appen går til næste side.

Hero-animationer tager et element som et ikon, der nu kaldes en “Hero”, og når sideovergangen er udløst, normalt ved at klikke på ikonet, “flyver” helten til næste side. Når brugeren navigerer tilbage til den tidligere side, går animationen i den anden retning, og ikonet vender tilbage til dets sted.

Vi vil ikke kun diskutere grundlæggende helteanimationer, men ting, vi kan tilpasse til det. Lad os se det grundlæggende først.

Oprettelse af en Basic Hero-animation

Heltanimationer er sandsynligvis en af ​​de nemmeste animationer at gøre i Flutter og kræver ikke meget opsætning. Når vi ser på eksemplet ovenfor, kan vi se, at den samme appikonwidget findes på begge sider. Alt, hvad vi har brug for, er en måde at fortælle Flutter, at begge er forbundet.

Det gør vi ved at indpakke et element som et ikon i en Hero-widget.

Helt(
  tag: "DemoTag",
  barn: Ikon (
    Icons.add,
    størrelse: 70,0,
  ),
),

Vi leverer det et mærke for at give denne specifikke helt et navn. Dette er nødvendigt, fordi hvis vi har flere helte på samme side, ved hver helt, hvor han skal flyve til.

Nu ved appen, at der er en helt-widget, der vil flyve til næste side. Nu er alt, hvad vi har brug for, et sted at flyve til.

Alt, hvad vi har brug for, er en Hero-widget på den anden side med samme tag.

Helt(
  tag: "DemoTag",
  barn: Ikon (
    Icons.add,
    størrelse: 150,0,
  ),
),

Og dette resulterer i:

Hero-animationen oprettet med koden ovenfor

Tilpasning af helte-animationer

Hero-widgeten giver os mulighed for at tilpasse aspekter af animationen. Lad os undersøge et par muligheder.

Tilføjelse af pladsholdere

Når widgeten flyver væk fra det sted, det plejede at være i, og inden widgetten ankommer til destinationen, er der tom plads på destinationen. Vi kan tilføje en pladsholder til dette sted.

Lad os bruge en CircularProgressIndicator som en pladsholder i øjeblikket.

Helt(
    tag: "DemoTag",
    barn: Ikon (
      Icons.add,
      størrelse: 150,0,
    ),
    placeholderBuilder: (kontekst, widget) {
      returbeholder (
        højde: 150,0,
        bredde: 150,0,
        barn: CircularProgressIndicator (),
      );
    },
  ),

Vi bruger placeholderBuilder til at konstruere pladsholderen og returnere den widget, vi gerne vil have som pladsholder.

Brug af en pladsholder:

CircularProgressIndicator indtager pladsen som helten, indtil den ankommer.

Ændring af Hero widget

Flutter giver os mulighed for at ændre den widget, der faktisk flyver fra den ene side til den anden uden at ændre widgets på de to sider.

Lad os bruge et raketikon i stedet for et “+” ikon som helten uden at ændre heltenes widgets børn.

Heltikonet ændres, men de sidste ikoner forbliver de samme.

Vi gør dette ved hjælp af parameteren flightShuttleBuilder (Raketeksemplet).

Helt(
  tag: "DemoTag",
  barn: Ikon (
    Icons.add,
    størrelse: 150,0,
  ),
  flightShuttleBuilder: (flightContext, animation, direction,
      fraContext, toContext) {
    returikon (FontAwesomeIcons.rocket, størrelse: 150,0,);
  },
),

FlightShuttleBuilder-metoden har 5 parametre og giver os animationen såvel som animationen.

For tiden forbliver raketikonstørrelsen på 150,0 i begge retninger. Vi kan have forskellige konfigurationer for hver retning ved hjælp af metodens retningsparameter.

if (retning == HeroFlightDirection.push) {
  returikon (
    FontAwesomeIcons.rocket,
    størrelse: 150,0,
  );
} andet hvis (retning == HeroFlightDirection.pop) {
  returikon (
    FontAwesomeIcons.rocket,
    størrelse: 70,0,
  );
}
Størrelser er nu forskellige i forskellige retninger.

At få helte-animationer til at fungere med iOS-tilbage-svejsebevægelser

Som standard fungerer helteanimationer, når der trykkes på tilbage-knappen på iOS, men de fungerer ikke på rygswipe.

Brug af tilbage-knappen:

Tilbage-knap udløser heltanimationen.

Brug af rygswipe:

Rygsvep udløser ikke heltanimationen.

For at løse dette skal du blot indstille transitOnUserGestures til sandt på begge Hero-widgets. Dette er som standard falsk.

Helt(
  tag: "DemoTag",
  barn: Ikon (
    Icons.add,
  ),
  transitOnUserGestures: sandt,
),

Og dette vil også udløse helte-animationer på rygsveip.

Det er det for denne artikel! Jeg håber, du nød det, og lad et par klapper hvis du gjorde det. Følg mig for flere Flutter-artikler og kommenter for alle feedback, du måtte have om denne artikel.

Tjek også mine andre profiler og artikler:

Twitter

GitHub

Nogle af mine andre artikler