Syvä sukellus Hero-widgetteihin räpylässä

Oppiaihe Hero-widgetien voimalle Flutterissa

Tämä artikkeli on neljäs artikkelisarja sarjassa, joka on tarkoitettu yksityiskohtaiseen tutkimukseen Flutter-widgetistä. Kun olemme peittäneet ListViews-, TextFields- ja FloatingActionButtons -sivut perusteellisesti, siirrymme nyt Hero-widgettiin Flutterissa.

Johdatus sankarianimaatioihin

Sankarianimaatio yhdessä lauseessa on yksinkertaisesti elementti yhdestä näytöstä, joka “lentää” seuraavaan, kun sovellus siirtyy seuraavalle sivulle.

Hero-animaatiot ottavat elementin, kuten kuvakkeen, jota kutsutaan nyt sankariksi, ja kun sivunsiirto on käynnistynyt, yleensä napsauttamalla kuvaketta, sankari "lentää" seuraavalle sivulle. Kun käyttäjä navigoi takaisin aiemmalle sivulle, animaatio menee toiseen suuntaan ja kuvake palaa takaisin paikoilleen.

Keskustelemme paitsi sankarin perusanimaatioista myös asioista, joita voimme räätälöidä siitä. Katsotaanpa ensin perusteet.

Perusankari-animaation luominen

Hero-animaatiot ovat todennäköisesti yksi helpoimmista animaatioista Flutterissa, ja ne eivät vaadi paljon asennusta. Kun tarkastelemme yllä olevaa esimerkkiä, voimme nähdä, että molemmilla sivuilla on sama sovelluskuvake-widget. Tarvitsemme vain tavan kertoa Flutterille, että molemmat ovat yhteydessä toisiinsa.

Teemme tämän käärimällä elementin, kuten kuvakkeen, sankariowidgettiin.

Sankari(
  tunniste: "DemoTag",
  lapsi: kuvake (
    Icons.add,
    koko: 70,0,
  ),
),

Toimitamme sille tunnisteen, joka antaa tälle sankarille nimen. Tämä on välttämätöntä, koska jos meillä on useita sankareita samalla sivulla, kukin sankari tietää minne lentää.

Nyt sovellus tietää, että on sankari-widget, joka haluaa lentää seuraavalle sivulle. Nyt tarvitsemme vain paikkaa, johon lentää.

Tarvitsemme vain Hero-widgetin toisella sivulla, jolla on sama tunniste.

Sankari(
  tunniste: "DemoTag",
  lapsi: kuvake (
    Icons.add,
    koko: 150,0,
  ),
),

Ja tämä johtaa:

Hero-animaatio, joka on luotu yllä olevalla koodilla

Hero-animaatioiden mukauttaminen

Hero-widget antaa meille mahdollisuuden mukauttaa animaation näkökohtia. Tutkitaan muutamia mahdollisuuksia.

Paikkamerkkien lisääminen

Kun widget lentää pois paikasta, jossa se oli ennen, ja ennen kuin widget saapuu määränpäähän, määräpaikassa on tyhjää tilaa. Voimme lisätä paikkamerkin tähän sijaintiin.

Käytämme nyt CircularProgressIndicatoria paikanvaraajaksi.

Sankari(
    tunniste: "DemoTag",
    lapsi: kuvake (
      Icons.add,
      koko: 150,0,
    ),
    placeholderBuilder: (konteksti, widget) {
      paluukontti (
        korkeus: 150,0,
        leveys: 150,0,
        lapsi: CircularProgressIndicator (),
      );
    },
  ),

Käytämme placeholderBuilder -sovellusta rakentaaksesi paikkamerkinnän ja palauttamalla widgetin, jonka haluaisimme olevan paikanvaraajana.

Paikkamerkin käyttäminen:

CircularProgressIndicator vie sankarin paikalle, kunnes se saapuu.

Hero-widgetin vaihtaminen

Flutter antaa meille mahdollisuuden muuttaa widgettiä, joka todella lentää yhdeltä sivulta toiselle muuttamatta kahden sivun widgettejä.

Käytämme sankarina rakettikuvaketta “+” -kuvakkeen sijasta vaihtamatta sankarin widgetien lapsia.

Sankarikuvake muuttuu, mutta lopulliset kuvakkeet pysyvät ennallaan.

Teemme tämän käyttämällä parametria flightShuttleBuilder (siis rakettiesimerkki).

Sankari(
  tunniste: "DemoTag",
  lapsi: kuvake (
    Icons.add,
    koko: 150,0,
  ),
  flightShuttleBuilder: (flightContext, animaatio, suunta,
      fromContext, toContext) {
    paluukuvake (FontAwesomeIcons.rocket, koko: 150.0,);
  },
),

FlightShuttleBuilder -menetelmällä on 5 parametria ja se antaa meille animaation sekä animaation suunnan.

Toistaiseksi raketti-kuvakkeen koko on 150,0 molemmissa suunnissa. Meillä voi olla erilaiset konfiguraatiot kullekin suunnalle käyttämällä menetelmän suuntaparametria.

if (direction == HeroFlightDirection.push) {
  paluukuvake (
    FontAwesomeIcons.rocket,
    koko: 150,0,
  );
} else if (direction == HeroFlightDirection.pop) {
  paluukuvake (
    FontAwesomeIcons.rocket,
    koko: 70,0,
  );
}
Koot ovat nyt erilaiset eri suuntiin.

Hero-animaation tekeminen toimimaan iOS: n taaksepäin pyyhkäisyeleillä

Oletusarvon mukaan sankarianimaatiot toimivat, kun Takaisin-painiketta painetaan iOS: ssä, mutta ne eivät toimi taaksepäin pyyhkäisemällä.

Takaisin-painikkeen käyttö:

Takaisin-painike laukaisee sankarianimaation.

Takaisin pyyhkäisemällä:

Takaisin pyyhkäiseminen ei laukaise sankarianimaatioa.

Voit ratkaista tämän yksinkertaisesti asettamalla transitOnUserGestures-arvon todelliseksi molemmissa sankariwidgetissä. Tämä on oletusarvoisesti väärä.

Sankari(
  tunniste: "DemoTag",
  lapsi: kuvake (
    Icons.add,
  ),
  transitOnUserGestures: totta,
),

Ja tämä laukaisee sankarianimaatioita myös pyyhkäisemällä takaa.

Se on tämä artikkeli! Toivottavasti nautit siitä, ja jätät muutaman taputuksen, jos teit. Seuraa minua saadaksesi lisää Flutter-artikkeleita ja kommentoidaksesi palautetta, joka sinulla voi olla tästä artikkelista.

Tutustu myös muihin profiileihini ja artikkeleihini:

Viserrys

GitHub

Jotkut muista artikkeleistani