Share
Hva du skal skapeHvis du leter etter alternative tilnærminger til Android applikasjonsutvikling, bør du vurdere å gi Googles Flutter, et rammeverk basert på Dart-programmeringsspråket, et forsøk.
Apper som er bygget med Flutter, er i stor grad ikke skiller seg fra de som ble bygget ved hjelp av Android SDK, både når det gjelder utseende og ytelse. Hva mer, med mindre tweaks, kan de også kjøres på iOS-enheter.
I denne opplæringen vil jeg introdusere deg til det grunnleggende om Flutter ved å vise deg hvordan du bygger en enkel tipskalkulator-app for Android.
For å kunne følge denne opplæringen må du:
Kjører ved 60 fps, brukergrensesnitt opprettet med Flutter utfører langt bedre enn de som er opprettet med andre plattformsutviklingsrammer som React Native og Ionic. Hvis det ikke opphisser deg, er det noen flere grunner til at du kanskje vil bruke Flutter:
Du kan få den nyeste versjonen av Flutter ved å klone sitt GitHub-depot.
git klon https://github.com/flutter/flutter.git
Flutter har flere avhengigheter, for eksempel Dart SDK og Material Design fonter. Heldigvis, første gang du kjører Flutter's diagnostiske verktøy, er alle installert automatisk.
cd flutter / bin ./flutter lege
For å kunne bygge Android-apper må du også peke Flutter til katalogen der du installerte Android Studio.
./ flutter config --android-studio-dir ~ / android-studio
Selv om du kan bruke Flutter's CLI direkte til å lage og kjøre nye apper, vil du sannsynligvis ha en langt bedre utviklingsopplevelse hvis du bruker en IDE. Den anbefalte IDE for Flutter er IntelliJ IDEA.
Før du begynner å utvikle Flutter-apper med den, må du imidlertid installere plugins for både Dart og Flutter. For å gjøre det, start med å velge Konfigurer> Plugins i IntelliJ velkomstskjermen.
I dialogboksen som dukker opp, trykker du på Bla gjennom repositorier ... knappen og søk etter Dart plugg inn. Når du har funnet det, trykker du på Installere knappen for å installere den.
På samme måte, søk etter og installer Flutter plugg inn.
Når begge pluginene er installert, starter du IntelliJ IDEA.
Du må nå peke Flutter-pluginet til katalogen der du installerte Flutter. For å gjøre det, velg Konfigurer> Innstillinger på velkomstskjermbildet, og i dialogboksen som dukker opp, navigerer til Språk og rammer> Flutter. I Flutter SDK-banen feltet, skriv inn den absolutte banen til katalogen.
trykk OK for å fullføre konfigurasjonen.
For å opprette et nytt Flutter-prosjekt, trykk på Opprett nytt prosjekt knappen på velkomstskjermbildet. I Nytt prosjekt dialog, velg Flutter og trykk neste.
Du kan nå gi et meningsfylt navn til prosjektet ditt og trykke på Bli ferdig.
Når prosjektet er generert, foreslår jeg at du trykker på Løpe knappen for å sikre at Dart SDK, pluginene og Flutter-rammen er konfigurert riktig. Hvis de er, etter flere sekunder, bør du se følgende skjerm på enheten eller emulatoren:
Vær oppmerksom på at fra dette punktet du ikke trenger å trykke på Løpe knappen igjen selv etter at kodeendringer er gjort. Flutter støtter varm oppdatering, en funksjon som lar deg øyeblikkelig skyve oppdateringer til appen uten å starte den på nytt.
I denne opplæringen lager vi en tipskalkulator-app med følgende widgets:
Accentsconagua
Tekstfelt å akseptere et regningsbeløpTekstfelt å akseptere en tipsprosentRaisedButton Brukeren kan trykke for å beregne tipsetHver Flutter-widget kan enten være en StatelessWidget eller a StatefulWidget. Som navnet antyder, a StatefulWidget har en Stat objekt assosiert med det, som tillater det ikke bare å lagre data, men også å reagere på endringer i dataene.
EN StatelessWidget, På den annen side er det en enklere gjenstand, ikke utformet for å vedvarende lagre data. For å holde denne opplæringen kort, lager vi vår tipskalkulator som en StatelessWidget. Derfor, åpne main.dart, fjern alt innholdet, og legg til følgende kode for det:
import 'pakke: flutter / material.dart'; klasse TipCalculator utvider StatelessWidget
I ovennevnte kode, den importere Linjen er viktig fordi material.dart er biblioteket som inneholder alle de Materialdesign widgets vi skal bruke i denne appen.
For å lagre regningsbeløpet og tipsprosenten, legg til to medlemsvariabler i klassen.
dobbelt billAmount = 0.0; dobbelt tipsPercenta = 0,0;
For å begynne å opprette brukergrensesnittet til appen, overstyrer du bygge() metode.
@override Widget build (BuildContext kontekst) // Mer kode går her
La oss nå lage de to Tekstfelt widgets. Når vi gjør det, kan vi spesifisere detaljer som etikettene vi ønsker å knytte til widgets og typene av de virtuelle tastaturene som må vises når de er i fokus.
Fordi vi ikke direkte kan hente innholdet i a Tekstfelt widget, må vi også knytte en onChanged hendelseshåndterer med den. Inne i handleren, som mottar en Inndataverdi objekt, kan vi oppdatere innholdet i klassens medlemsvariabler.
Følgelig legger du til følgende kode inne i bygge() metode:
// Opprett første inntastingsfelt TextField billAmountField = ny TextField (labelText: "Bill amount (\ $)", keyboardType: TextInputType.number, onChanged: (InputValue verdi) prøv billAmount = double.parse (value.text); fange (unntak) billAmount = 0.0;); // Opprett et annet inntastingsfelt TextField tipPercentageField = nytt TextField (labelText: "Tips%", keyboardType: TextInputType.number, hintText: "15", onChanged: (InputValue verdi) prøv tipPercentage = double.parse (value.text) ; fangst (unntak) tipPercentage = 0.0;);
Selv om du aldri har jobbet med Dart før, må koden ovenfor være ganske intuitiv, så lenge du er kjent med Java. For eksempel kan du se at vi bruker parse () metode for å konvertere hver Tekstfelt Widgets tekstinnhold til en dobbelt gjenstand. Fordi det parse () Metoden kan kaste en FormatException, Det er også omgitt av en prøv ... fange blokkere.
Opprette en RaisedButton Widget er som å lage en Tekstfelt widget. Men for å tilordne en etikett til den må du opprette en ny Tekst widget og legg den til som sin barn.
// Opprett knapp RaisedButton calculateButton = new RaisedButton (barn: ny tekst ("Beregn"), påPressed: () // Mer kode går her);Inne i onPressed hendelseshåndterer på knappen, beregner vi tipset og det totale beløpet som skal betales, og vises både i en modal dialog. For å opprette dialogboksen kan vi bruke AlertDialog klasse. Når en gang er opprettet, kan dialogboksen vises ved å sende den som et argument til showdialog () metode.
Følgelig legger du til følgende kode inne i onPressed hendelse handler:
// Beregn tips og total dobbelt calculatedTip = billAmount * tipPercentage / 100.0; dobbelt totalt = billAmount + calculatedTip; // Generer dialog AlertDialog dialog = ny AlertDialog (innhold: ny tekst ("Tips: \ $$ calculatedTip \ n" "Totalt: \ $$ totalt")); // Vis dialogruteDialog (kontekst: kontekst, barn: dialog);I ovennevnte kode, merk at vi har brukt Darts strenginterpoleringsfunksjon for å legge inn variabler inni innhold i dialogboksen. Du kan også se at streng-bokstavene i Dart kan kobles sammen ved å plassere dem ved siden av hverandre - selv om du kan bruke + operatør også, hvis du vil.
En flutter app er vanligvis ingenting annet enn et tre av widgets. Med andre ord, oppretter du en Flutter-app ved å bare opprette flere widgets og etablere foreldre og barns forhold mellom dem.
Foreløpig er det ingen relasjoner mellom widgets vi opprettet i forrige trinn. Som du kanskje har gjettet, skal de alle være søsken, så la oss nå lage en overordnet widget for dem.
En widget som kan ha flere barn refereres vanligvis til som en layout-widget. Flutter tilbyr flere layout widgets å velge mellom. For vår app, den Kolonne Widget er mest hensiktsmessig fordi det posisjonerer alle sine barn en under den andre.
I tillegg, for å kunne overholde Material Design-spesifikasjonen, må vi legge til en utfylling av 16 dp til Kolonne widget. Vi kan gjøre det ved å gjøre det til en barn av a Container widget.
Containerbeholder = Ny Container (polstring: const EdgeInsets.all (16.0), barn: ny kolonne (barn: [billAmountField, tipPercentageField, calculateButton]));
Et materialdesign brukergrensesnitt er ikke komplett uten en applikasjonslinje. Derfor opprett en som nå bruker appbar widget.
AppBar appBar = ny AppBar (tittel: ny tekst ("Tips kalkulator"));Layouts som inneholder app barer og containere er så vanlig at Flutter tilbyr a stillas~~POS=TRUNC widget for å hjelpe deg raskt å etablere et forhold mellom dem.
Stillas stillas = nytt stillas (appBar: appBar, body: container);
Med stillas~~POS=TRUNC widgeten ved sin rot, er vår widget treet nå klart. Du kan gå videre og bruke stillas~~POS=TRUNC widget som returverdi av bygge() metode.
returnere stillas;
Hvis du finner det vanskelig å visualisere treet, bør følgende diagram hjelpe:
Vår Dart-fil trenger en hoved() fungere som inngangspunkt. Inne i det må vi ringe runApp () funksjon å faktisk oppblåse og gjengi widget treet vi opprettet i forrige trinn.
I tillegg våre TipCalculator Widget må plasseres inne i a MaterialApp widget slik at et Material Design-tema og fargevalg kan brukes på det. Legg derfor til følgende kode i main.dart:
void main () runApp (nytt MaterialApp (tittel: 'Tips kalkulator', hjemme: ny TipCalculator ()));
Du kan nå trykke på Hot Reload App knappen for å begynne å bruke appen på enheten din.
I denne opplæringen lærte du hvordan du bruker Flutter og Dart, sammen med IntelliJ IDEA, for å lage en enkel app for Android.
Etter min mening har Flutter nesten alt en utvikler kan se etter i en plattform for mobil apputviklingsrammer. Før du bestemmer deg for å begynne å bygge din neste store app med den, vær imidlertid oppmerksom på at det fortsatt er et veldig nytt og raskt utviklende rammeverk.
Hvis du vil vite mer om Flutter, kan du se den offisielle dokumentasjonen.
