Share
Flutter er raskt blitt en av de mest populære rammene for å utvikle mobilprogrammer på tvers av plattformer. De fleste Android- og iOS-utviklere i dag begynner å bli enige om at det er et raskere og mer fremtidssikkert alternativ til andre kryssplattformsrammer som React Native og NativeScript.
Google selv forlater ingen stein unturned for å tiltrekke flere utviklere til den. For eksempel har Google I / O i år hatt flere dybdegående sesjoner som fokuserte på å utvikle materialdesign kompatible apper med den. Under en av sesjonene annonserte Google også at Flutter skal være en førsteklasses plattform for Material Design.
I denne serien av opplæringsprogrammer skal jeg hjelpe deg med å mestre grunnleggende om å utvikle Android-apper med Flutter. I denne opplæringen, som starter av serien, skal jeg fokusere på Flutter-widgets, byggeblokkene i alle Flutter-apper.
For å få mest mulig ut av denne serien trenger du:
Etter at du har installert noen lette plugins, kan du bruke Android Studio, IDE-innfødte Android-apputviklere er mest vant til å utvikle Flutter-apper.
Start med å starte Android Studio og velg Konfigurer> Plugins alternativet på velkomstskjermbildet.
I dialogboksen som dukker opp, trykker du på Bla Repositories knappen og søk etter Flutter-plugin.
Når du har funnet pluginet, trykker du på det Installere knapp. På dette tidspunktet blir du spurt om du vil installere Dart-plugin også. trykk Ja å fortsette.
Etter at begge pluginene er installert, trykker du på Start Android Studio på nytt knappen for å fullføre konfigurasjonen.
Etter omstart vil du kunne se en Start et nytt Flutter-prosjekt knappen på Android Studio velkomstskjermen. Trykk på den for å begynne å lage ditt første Flutter-prosjekt.
På neste skjermbilde velger du Flutter Application alternativet og trykk neste.
Du ser nå et skjema som ber om ulike detaljer om Flutter-programmet, for eksempel navn og sted. Pass på at du skriver inn gyldige verdier i alle feltene.
Flutter-pluginet kommer ikke sammen med Flutter SDK. Derfor må du installere SDK separat. Du kan gjøre det ved å trykke på Installer SDK knappen nå.
Avhengig av hvor raskt Internett-tilkoblingen din er, kan det ta litt tid å fullføre installasjonen. Etter at det er vellykket, vil du kunne trykke på neste knappen for å fullføre prosjektoppsettet.
Gjennom denne opplæringen vil du skrive kode inne i lib / main.dart fil. Det vil som standard inneholde noen prøvekode, som du ikke trenger. Så slett alt innholdet før du fortsetter.
Flutter-rammen bruker Dart-programmeringsspråket, et lettlært språk hvis syntaks er veldig lik den til Java og C. Følgelig, som de fleste frittstående Java og C-programmer, trenger en Flutter-app også en hoved() funksjon, en spesiell funksjon som tjener som inngangspunkt til appen.
Følg deretter følgende kode til main.dart fil:
void main () // Å GJØRE
På dette punktet kan du trykke på Shift-F10 å bygge og kjøre appen. Hvis du ikke oppdaget noen feil i de forrige trinnene, bør du se appen vise et tomt hvitt lerret på enheten.
Alle Flutter-apper består av en eller flere widgets, forekomster av klasser som lar deg tegne tekst og bilder på skjermen. Vanligvis trenger du ikke å programmere noen widgets på lavt nivå fra grunnen av at rammene kommer med et bredt utvalg av forhåndsdefinerte, vakre widgets som følger designsprogene til både Android- og iOS-plattformene.
For å kunne bruke grunnleggende widgets i appen din, importerer du widgets bibliotek ved å legge til følgende kode i begynnelsen av main.dart fil:
importer 'pakke: flutter / widgets.dart';
De enkleste widgets du kan lage er statløse widgets. Som du kanskje har gjettet, har de ingen tilstand knyttet til dem og er dermed statiske. De er ideelle for å vise etiketter, titler og andre brukergrensesnittelementer hvis innholdet ikke vil endre seg når appen kjører. For å opprette en stateless widget må du utvide StatelessWidget klassen og overstyr den bygge() metode. Følgende prøvekode viser deg hvordan:
klasse MyFirstWidget utvider StatelessWidget @override Widget build (BuildContext kontekst) // Mer kode her
Som du kan se i koden ovenfor, er bygge() metoden må returnere a Widget gjenstand. Du er fri til å plukke og returnere noen av dusinvis av forhåndsdefinerte widgets Flutter tilbyr. Hvis du for eksempel vil vise en tekstlinje, kan du opprette og returnere en Tekst widget som vist nedenfor:
Accentsconagua
returnere Tekst ("Dette er fint!", textDirection: TextDirection.ltr);Merk at du alltid må huske å spesifisere retningen til teksten din mens du bruker en Tekst widget.
Hvis du kjører appen med en gang, vil du imidlertid ikke kunne se teksten. Det er fordi du fortsatt ikke har instantiated din stateless widget. Så gå til hoved() metode, instans widgeten i den, og send den til runApp () metode. Dette er hvordan:
runApp (ny MyFirstWidget ());
I det øyeblikket du legger til koden ovenfor og lagrer prosjektet, bør Android Studio automatisk laste på nytt appen på enheten din automatisk, slik at du kan se teksten.
Hvis du vil vise et bilde i stedet for tekst, kan du bare erstatte Tekst widget med en Bilde widget inne i klassen din bygge() metode. Følgende kode viser hvordan du lager en Bilde widget som laster ned og viser et fjernbilde:
returnere Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");Når du lagrer prosjektet ditt igjen, bør du se noe slikt på enheten din:
Alle Flutter apps kan betraktes som widget trær. Appen du opprettet i forrige trinn er et widget-tre med bare en widget. Ved hjelp av Tekst eller Bilde widgets som de øverste elementene i widget-treet er imidlertid ikke en god ide fordi du ikke vil kunne legge til noen småbarn til dem.
Flutter tilbyr flere widgets som kan fungere som containere for andre widgets. De mest brukte er de Rad og Kolonne widgets. Som deres navn tyder på, Rad widget lar deg plassere flere widgets ved siden av hverandre, og Kolonne Widget hjelper deg med å plassere widgets en under den andre. De er uunnværlige når du lager dypere widgettrær.
Følgende kode viser hvordan du bruker Kolonne widget for å lage et widgettre som har to barn: a Tekst widget og an Bilde widget.
Tekst myText = Tekst ("Dette er et fint bilde!", TextDirection: TextDirection.ltr); Bilde myImage = Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg"); returnere kolonne (barn: [myText, myImage]); Appen skal nå se slik ut:
I tillegg er det widgets som hjelper deg med å bedre plassere en enkelt widget. For eksempel, Senter Widget hjelper deg med å sentrere en widget. Tilsvarende a Container widget lar deg legge til utfylling og marginer til widgets.
Følgende kode viser hvordan du senterer Kolonne widget du nettopp opprettet ved å legge den inn i a Senter widget:
retur senter (barn: kolonne (barn:[myText, myImage], mainAxisSize: MainAxisSize.min));
I ovennevnte kode, merk at Kolonne widget bruker en ekstra egenskap som kalles mainAxisSize, hvis verdi er satt til min. Det er nødvendig fordi før du senterer en kolonne, må du gjøre sin høyde lik summen av høyden til alle sine barn. Uten eiendommen, den Kolonne widgeten vil være like stor som enhetens skjerm, og Senter widgeten har ingen effekt på den.
Alt dette har du brukt enkle widgets som er en del av widgets bibliotek. Flutter har et alternativt bibliotek kalt materiale, som tilbyr materiale design widgets. For å bruke den i appen din, erstatt setningen som importerer widgets bibliotek med følgende:
import 'pakke: flutter / material.dart';
Deretter må du ha en. For å bruke Material Design styling til widgets MaterialApp widget øverst i widget-treet ditt. Du må også legge inn alle widgets du opprettet tidligere inne i a stillas~~POS=TRUNC widget, som kan fungere som hjemmeskjermen til MaterialApp widget.
Videre, fordi de fleste Material Design-apper har en applinje, kan du eventuelt sette inn stillas~~POS=TRUNC widgeten appbar eiendom til en ny appbar widget.
Følgende kode viser deg hvordan du gjør alt som er konsistent:
returnere MaterialApp (hjem: Stillas (appBar: AppBar (tittel: Tekst ("Min App")), kropp: Senter (barn: Kolonne (barn: [myText, myImage], mainAxisSize: MainAxisSize.min),))); Appen bør se mye bedre nå.
Statløse widgets er uforanderlige. Med koden du skrev i de forrige trinnene, er det ingen enkel måte å endre innholdet på Tekst widget eller Bilde widget. Hvorfor? Fordi Flutter-rammen foretrekker reaktiv programmering over imperativ programmering. Følgelig har de fleste av sine widgets ikke setter metoder som kan oppdatere innholdet deres på kjøretid. For eksempel, Tekst widgeten har nei setText () Metode som lar deg endre teksten den viser.
Stateful widgets, derimot, er mutable, om enn ikke direkte. De stole på Stat Objekter å bestemme hva de skal vise ved en gitt instans. Som sådan, når en Stat objekt endringer, vil rammen automatisk oppdatere innholdet i en stateful-widget som er koblet til den.
For å opprette en stateful widget, må du utvide StatefulWidget klassen og overstyr den createState () metode.
klasse MySecondWidget utvider StatefulWidget @override Statecreatestate () // å gjøre
Deretter må du opprette en ny egendefinert Stat klasse inneholder variabler som danner tilstanden til stateful widgeten. I tillegg, inne i klassen, må du overstyre bygge() metode for å returnere widget-treet ditt.
Følgende kode viser hvordan du lager en Stat klasse som inneholder en enkelt variabel som heter url:
klassen MyState utvider statenString url = "https://source.unsplash.com/random/800x600"; // Et tilfeldig bilde fra Unsplash @ override Widget build (BuildContext kontekst) // Mer kode her
For et konkret eksempel, la oss nå lage et Material Design widget-tre som inneholder en Bilde widget, som viser et tilfeldig bilde, og a RaisedButton widget, som brukeren kan trykke for å laste inn et nytt tilfeldig bilde. Følgende kode viser deg hvordan:
returnere MaterialApp (hjem: Stillas (kropp: Senter (barn: Kolonne (mainAxisSize: MainAxisSize.min, barn:[RaisedButton (barn: Tekst ("Press Me"), onPressed: changeURL,), Image.network (url)]))));
Legg merke til at Bilde Widgets konstruktør tar nå url variabel som sin inngang, i stedet for en streng bokstavelig. Dette gjør det mulig for rammen å bruke den nyeste verdien av variabelen når Bilde widget er tegnet.
Vær også oppmerksom på at RaisedButton Widget har en onPressed attributt som peker på en eventlytter som heter changeURL (). Metoden eksisterer ikke ennå, så opprett den.
void changeURL () // Mer kode her
Innenfor metoden må du selvsagt endre verdien av url variabel. Du bør imidlertid ikke endre det direkte. Hvis du gjør det, vil Flutter-rammen ikke bli varslet om endringen. For å oppdatere tilstanden til en stateful-widget riktig må du alltid gjøre alle endringene dine inne i setState () metode.
For nå, for å vise tilfeldige bilder, foreslår jeg at du bruker Unsplash Source-tjenesten. Alt du trenger å gjøre for å laste ned et tilfeldig bilde fra det, er å lage en HTTP-forespørsel til nettadressen og sende en unik spørringsstreng til den.
Følgende kode viser hvordan du gjør det ved å bruke et tidsstempel for å konstruere den unike spørringsstrengen:
setState (() url = "https://source.unsplash.com/random/800x600/?" + "q = $ new DateTime.now (). millisekunderSinceEpoch";);
På dette tidspunktet er din egendefinerte Stat klassen er klar. Alt du trenger å gjøre er å instantiere det og returnere det fra createState () metode for stateful-widgeten din.
returner MyState ();
Hvis du sender en forekomst av din stateful widget til runApp () metode, last appen opp, og trykk på knappen et par ganger, du bør se det vise et nytt bilde hver gang.
Du vet nå hvordan du skal arbeide med statsløse og stateful widgets i Flutter apps. Du lærte også hvordan du bruker et Material Design-tema til dem, endrer innholdet dynamisk og gjør dem interaktive.
Det er verdt å merke seg at Flutter ikke bruker noen mobile plattforms innfødte widgets. Den trekker alle widgets selv, ved hjelp av en høy ytelse 2D grafikkmotor kalt Skia, som bruker GPUen i stor utstrekning. Som et resultat kjører Flutter apps ofte på nær 60 fps og føler seg veldig flytende og lydhør.
Hvis du vil vite mer om widgets i Flutter, kan du se den offisielle dokumentasjonen.
