Bygg mobilapper på tvers av plattformer med Googles Flutter

Innhold

• 01. Sett deg opp
• 02. Løs eventuelle problemer
• 03. Finn en IDE og start et nytt prosjekt
• 04. Sett opp virtuelle enheter
• 04. Test startapplikasjonen
• 06. Utforsk Flutters widget-system
• 07. Rediger innholdet ditt
• 08. Last inn noen eiendeler
• 09. Fullfør

Det har vært mange mobile rammer på tvers av plattformer gjennom årene, med jevne forbedringer av utvikleropplevelse og ytelse hele tiden. Googles Flutter er et nytt tillegg til pakken, og er spesielt interessant fordi den i stedet for å bruke en JavaScript-bro som mange rammer (som React Native) gjør, til ekte native-kode.

Du kan finne ut litt om hvordan det fungerer i introduksjonsvideoen nedenfor, eller lese videre for en trinnvis guide for å komme i gang med Flutter. For mer råd, ta en titt på samlingen vår av veiledninger som forklarer hvordan du bygger en app. Eller hvis du bygger et nettsted, velger du en nettstedsbygger og en webhostingtjeneste fra guidene våre. Ikke fornøyd med lagringsplassen din? Her er noen skylagringsalternativer.

I denne opplæringen vil vi se på hvordan du konfigurerer Flutter og utforske det grunnleggende om å bygge apper ved hjelp av rammeverket, ved hjelp av macOS for vår utvikling. Vi antar at du har programmert før og vet hvordan du bruker Bash-skallet, men kanskje ikke har utviklet seg for mobil.

01. Sett deg opp

Du må laste ned og installere noen ting før du kan bruke Flutter:

• Xcode for iOS-støtte
• Android Studio for Android-støtte
• Android SDK (last ned via Android Studio når du oppretter et nytt prosjekt)

Når du har alle disse, kjører du Xcode og Android Studio, installerer tilleggskomponentene de tilbyr og oppretter et nytt prosjekt for å sikre at de kjører.

Nå er du klar til å komme i gang med Flutter. Last ned Flutter SDK. Pakk den ut hvor du vil at den skal installeres. Vi må oppdatere banen vår slik at macOS kan finne Flutter uansett hvor du påberoper deg den. Åpne (eller opprett) $ HOME / .bash_profile:

sudo atom $ HOME / .bash_profile

Legg nå til flutter / bin-katalogen til din $ PATH:

eksporter PATH = / Brukere / simon / dev / flutter / bin: $ PATH

Kjør en skallkommando for å oppdatere bash-profilen:

kilde $ HOME / .bash_profile

Nå kan vi begynne å bruke Flutter CLI. Det første du må gjøre er å sørge for at du har den nyeste versjonen:

flagrende oppgradering

02. Løs eventuelle problemer

Når det er gjort, tilbyr Flutter et praktisk diagnostisk verktøy som vil kontrollere om alt du trenger er installert og konfigurert riktig. Det er veldig nyttig:

flagrer lege

Legg merke til hva legen forteller deg, og svar på eventuelle problemer som oppstår. Du må kanskje kjøre legen et par ganger for å få ytterligere tilbakemeldinger og handle på det.

Når verktøyet er fornøyd med Flutter, Android Toolchain, iOS Toolchain og Android Studio, er du god å gå. Ikke bekymre deg for tilkoblede enheter for nå.

Xcode kan kreve noen ekstra trinn på skallet for å få det fullstendig konfigurert:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer brew install --HEAD libimobiledevice brew install ideviceinstaller brew install cocoapods pod setup

Og Android Studio trenger ofte at lisensavtalen godtas:

flagre lege - Android-lisenser

03. Finn en IDE og start et nytt prosjekt

Nå som Flutter er konfigurert, vil du ha en IDE å jobbe i. Det er plugins tilgjengelig for Android Studio og IntelliJ. Vi kommer til å gå med VS Code, som også har sitt eget Flutter-plugin.

Start VS Code og klikk View> Command Palette. Skriv ’install’ og velg Extensions: Install Extension-handlingen. Søk etter 'flutter' og installer Flutter-plugin. Når du er ferdig, start VS Code på nytt.

Vi er nå klare til å begynne å utvikle oss. Start et nytt prosjekt gjennom kommandopaletten ved å velge alternativet Flutter: New Project. Gi prosjektet et navn, velg hvor du vil lagre det, og VS-kode vil påkalle Flutter for å generere det nye prosjektet.

04. Sett opp virtuelle enheter

For å teste prosjektet vårt, vil vi ha en enhetssimulator som tillater oss på skrivebordet. Nederst til høyre i VS Code (i den blå linjen) ser du noe som sier No Devices. Hvis du har utviklet for mobil før, når du klikker på dette, vil du se simulatorene dine tilgjengelige i kommandopaletten.

Hvis du ikke har noen simulatorer, kan du kjøre følgende i terminalen for å åpne iOS-simulatoren for første gang:

åpen -en simulator

Du bør da se en iOS-simulator tilgjengelig når du starter VS Code på nytt.

Android er mer komplisert. Last inn Android Studio, og klikk på Verktøy> Android> AVD Manager i et Android-prosjekt. Velg Opprett virtuell enhet.

Velg enheten du vil etterligne - for eksempel en Google Pixel 2. Klikk Neste, og du kan også velge et systembilde (dvs. OS-versjon) du vil laste ned. På neste side under Emulert ytelse velger du Maskinvare - GLES 2.0 for å aktivere maskinvaregrafikkakselerasjon på emulatoren. Fullfør prosessen.

Når du har opprettet den virtuelle enheten i Android Studio, starter du VS Code på nytt, og du ser Android-emulatoren din vises sammen med iOS-simulatoren i enhetslisten til VS Code.

Nå, hvis du klikker på Ingen enheter, kan du velge en iOS- eller Android-enhet, og en virtuell telefon vil skyte opp på skrivebordet ditt. Prøv det med en iPhone X-simulator.

04. Test startapplikasjonen

Nå kjører simulatoren, du kan teste ut startappen. Trykk på F5 eller klikk Feilsøk> Start feilsøking. Appen lastes på simulatoren, og du kan prøve å samhandle med den.Vær tålmodig hvis det ikke skjer umiddelbart, da det kan ta litt tid å bygge.

Før vi kan gjøre det samme på Android, må vi installere avhengigheter for gradering for prosjektet vårt (en liten nyanse av Flutter akkurat nå). Naviger til prosjektets rotkatalog og kjør:

android / gradlew

Deretter kan du åpne en Android-emulator og kjøre prosjektet i feilsøkingsmodus som du gjorde for iOS.

En flott funksjon ved Flutter er at den støtter 'hot reloading' - det vil si at du kan endre kilden din og se endringene reflektert i simulatoren med en gang. I main.dart, la oss gjøre noen endringer i MyApp-klassen mens iPhone X-simulatoren kjører:

primarySwatch: Colors.green, home: new MyHomePage (tittel: ‘Oppskriftsbok’), =

Du bør se at endringene trer i kraft så snart du lagrer.

06. Utforsk Flutters widget-system

Det vi ennå ikke har snakket om er Dart-programmeringsspråket som Flutter bruker. Dart er et objektorientert språk med C-stil syntaks, utviklet av Google og all Flutter-utvikling bruker det. Hvis du allerede har erfaring med nett- eller mobilutvikling, bør det ikke være helt fremmed for deg.

Alt i Flutter er basert på widgets, som er byggesteinene til en app. Hvis du har brukt React før, er Flutters tilnærming veldig lik, og widgets er analoge med komponenter. I hovedsak kan hele appen din spaltes i et hierarki av widgets.

Dette er lett å se i MyApp klasse. MyApp er en StatelessWidget (dette betyr at det er uforanderlig). De bygge() metoden vi overstyrer, forteller Flutter hvordan widgeten skal gjengis. Dette ligner på React’s gjengi () funksjon.

Metoden returnerer a MaterialApp widget, som representerer en app som bruker Googles Material Design. Dette har igjen flere egenskaper, som i seg selv er widgets: ThemeData definerer den visuelle stilen som skal brukes og MyHomePage er en egendefinert widget definert lenger ned i main.dart filen som inneholder brødteksten til appen.

07. Rediger innholdet ditt

I motsetning til statsløse MyApp, MyHomePage er en stateful widget. Dette betyr at oppførselen er definert av _MyHomePageState klasse, slik at den kan lagre informasjon og endre deretter, for eksempel når du trykker på knappen i appen.

Du kan se at den for tiden bruker mange innebygde widgets som Flutter tilbyr for å håndtere vanlige ting som layout, knapper og tekstvisning. La oss gjøre noen endringer i den klassen for å endre det appen vår presenterer.

klasse _MyHomePageState utvider StateMyHomePage> {@override Widget build (BuildContext context) {return new Scaffold (appBar: new AppBar (title: new Text (widget.title),), body: new Container (decoration: new BoxDecoration (color: Colors. brun [100]), barn: ny RecipeWidget ())); }}

Vi har kvittet det eksisterende innholdet og erstattet det med en brun Container-widget, men vi må også lage en tilpasset widget, RecipeWidget, som skal legges i beholderen.

klasse RecipeWidget utvider StatelessWidget {@override Widget build (BuildContext context) {ListWidget> widgets = new ListWidget> (); returner ny ListView (barn: widgets); }}

08. Last inn noen eiendeler

La oss deretter laste noen eiendeler med appen, slik at vi kan legge dem til i Listevisning widget innenfor OppskriftWidget. Statiske eiendeler for en app er spesifisert i pubspec.yaml under fladderen:

eiendeler: - img / breakfast.webp - img / curry.webp - img / pasta.webp

Vi oppretter også en enkel datastruktur i main.dart, sammenkobler bilder med strenger for å fungere som et miniatyrbilde og et sammendrag av oppskrifter.

var recipes = {'breakfast.webp': 'Start dagen riktig med denne næringsrike frokosten.', 'pasta.webp': 'Wow vennene dine ved å lage din egen ferske pasta.', 'curry.webp': 'Vis frem dine kulinariske ferdigheter med en rik karri. ',};

09. Fullfør

Til slutt, la oss oppdatere OppskriftWidget for å lage en liste over widgets som viser oppskriftene. Vi bruker Image.asset for å laste de statiske eiendelene vi inkluderte i pubspec.yaml.

recipes.forEach ((thumb, caption) => widgets.add (new Container (child: new Padding (padding: new EdgeInsets.all (16.0), child: new ListTile (leading: Image.asset ('img /' + thumb) , bredde: 80.0), tittel: Tekst (bildetekst))), dekorasjon: ny BoxDecoration (kant: ny kant (nederst: ny kant) (farge: Farger. brun)), farge: Farger. brun [200]))) ;

Forhåpentligvis begynner du å få en følelse av hvordan Flutter bruker widgets til å konstruere apper. Prøv å bruke simulatoren til å rotere enheten. Flutter-oppsettet imøtekommer automatisk endringene. Til sammenligning, prøv appen på Android-emulatoren.

Denne artikkelen ble opprinnelig publisert i nett, verdens mest solgte magasin for webdesignere og utviklere. Kjøpe utgave 310 eller abonnere.