Build Cross-Platform Mobile Apps med Googles fladder

Sep 13, 2025
hvordan

Der har været mange cross-platform mobile rammer gennem årene, med stabile forbedringer af udvikler erfaring og ydeevne hele vejen igennem. Googles flutter er en ny tilføjelse til pakken, og er særligt interessant, fordi det end mange rammer (som reagerer indfødte), gør det muligt for ægte native kode.

Du kan finde ud af lidt om, hvordan det fungerer i den indledende video nedenfor, eller læs videre for en trin-for-trin guide til at komme i gang med fladder. For flere råd, tag et kig på vores samling af vejledninger, der forklarer Sådan opbygges en app . Eller hvis du bygger på et websted, skal du vælge en Website Builder. og Web Hosting. service fra vores guider. Ikke tilfreds med din opbevaring? Her er nogle Sky lagring muligheder.

I denne vejledning ser vi på, hvordan vi opretter fladder og udforsker det grundlæggende ved at opbygge apps ved hjælp af rammerne ved hjælp af MacOS til vores udvikling. Vi antager, at du har programmeret før og ved, hvordan du bruger bash shell, men måske ikke har udviklet sig til mobil.

01. Få opsætning

Du skal downloade og installere et par ting, før du kan gøre brug af flutter:

  • Xcode til iOS-support
  • Android Studio til Android Support
  • Android SDK (download via Android Studio, når du opretter et nyt projekt)

Når du har alle disse, skal du køre Xcode og Android Studio, installere de ekstra komponenter, de tilbyder, og opret et nyt projekt for at sikre, at de løber.

Nu er du klar til at komme i gang med fladder. Download Flutter sdk. . Uddrag det til, hvor du vil have det installeret. Vi skal opdatere vores vej, så MacOS kan finde flutter, hvor du ikke påberåber det. Åben (eller opret) $ HOME / .BASH_PROFILE : 

sudo atom $HOME/.bash_profile

Tilføj nu fladt / bin-mappen til din $ Path. : 

export PATH=/Users/simon/dev/flutter/bin:$PATH

Kør en shell kommando for at opdatere bash profil: 

source $HOME/.bash_profile

Nu kan vi begynde at bruge Flutter CLI. Den første ting at gøre er at sikre, at du har den nyeste version: 

flutter upgrade

02. Fix eventuelle problemer

Når det er gjort, tilbyder Flutter et praktisk diagnostisk værktøj, som vil kontrollere, om alt, hvad du har brug for, er installeret og oprettet korrekt. Det er virkelig nyttigt: 

flutter doctor

Vær opmærksom på, hvad lægen fortæller dig og reagerer på eventuelle problemer, der opstår. Du skal muligvis køre lægen et par gange for at få yderligere feedback og handle på det.

Når værktøjet er tilfreds med Flutter, Android Toolchain, IOS Toolschain og Android Studio, er du god til at gå. Du skal ikke bekymre dig om tilsluttede enheder for nu.

Xcode kan kræve nogle ekstra trin på skallen for at få det fuldt konfigureret: 

 sudo xcode-Vælg --Switch /Applications/xcode.app/contents/developer
Brew Installer - Head Libimobiledevice
Brew Installer IdeviceInstaller
Brew Installer CocoApods.
POD SETUP

Og Android Studio har ofte brug for licensaftalen, der accepterer: 

 Flutter Doctor --Android-licenser

03. Find en IDE og start et nyt projekt

Nu flutter er oprettet, du vil have en IDE til at arbejde i. Der er plugins til rådighed for Android Studio og Intellij. Vi skal gå med vs kode, som også har sit eget fladdtryk.

Start op mod kode og klik på Vis & GT; Command Palette. Skriv 'Installer' og vælg udvidelserne: Installer Extension Action. Søg efter 'Flutter' og installer fladet plugin. En gang gjort, genstart vs kode.

Vi er nu klar til at begynde at udvikle sig. Start et nyt projekt gennem kommandolinten ved at vælge Flutter: Ny projektindstilling. Navngiv dit projekt, vælg, hvor du skal gemme det, og VS-kode vil påberåbe sig fladt for at generere det nye projekt.

04. Indstil virtuelle enheder

For at teste vores projekt vil vi have en enhedssimulator til at tillade os på skrivebordet. I nederste højre hjørne af vs kode (i den blå bjælke), vil du se noget, der ikke siger nogen enheder. Hvis du har udviklet til mobil før, når du klikker på dette, vil du se dine simulatorer tilgængelige i kommandolinten.

Hvis du ikke har nogen simulatorer, skal du køre følgende i terminalen for at åbne iOS-simulatoren for første gang: 

 Åbn -A simulator

Du skal så se en iOS-simulator tilgængelig, når du genstarter VS-kode.

Android er mere kompleks. Indlæs Android Studio og i et Android-projekt, klik på Værktøjer og GT; Android & GT; AVD Manager. Vælg Opret virtuel enhed.

Vælg enheden for at efterligne - for eksempel en Google Pixel 2. Klik på Næste, og du kan også vælge et systembillede (dvs. OS-version) for at downloade. På den næste side under emuleret ydeevne skal du vælge Hardware - GLES 2.0 for at aktivere hardwaregrafikacceleration på emulatoren. Afslut processen.

Når du har oprettet den virtuelle enhed i Android Studio, skal du genstarte VS-kode, og du vil se, at din Android-emulator vises sammen med IOS-simulatoren i VS-kodeens enhedsliste.

Nu, hvis du klikker på ingen enheder, kan du vælge en iOS eller Android-enhed, og en virtuel telefon slår op på dit skrivebord. Prøv det med en iPhone X Simulator.

04. Test Starter-appen

Nu kører simulatoren, du kan teste start-appen. Hit F5 eller klik på Debug & GT; Start debugging. Appen vil indlæse på simulatoren, og du kan prøve at interagere med den. Vær tålmodig, hvis det ikke sker straks, da det kan tage lidt tid at bygge.

Før vi kan gøre det samme på Android, skal vi installere Gradle Dependier for vores projekt (en lille nuance af fladder lige nu). Naviger til projektets rodmappe og kør: 

 Android / Gradlew

Derefter kan du åbne en Android-emulator og køre projektet i Fejlfinding, som du gjorde for iOS.

En stor funktion af fladder er, at det understøtter 'hot reloading' - det vil sige, du kan ændre din kilde og se de ændringer, der afspejles i simulatoren med det samme. I Main.Dart. , lad os lave et par ændringer i myapp-klassen, mens iPhone X Simulator løber: 

 PrimarySwatch: Colors.green,
Hjem: Ny MyHomePage (titel: 'Opskrift bog'), =

Du bør se ændringerne træde i kraft, så snart du gemmer.

06. Udforsk Flutter's Widget System

Hvad vi endnu ikke har talt om, er DART-programmeringssproget, som flutter bruger. Dart er et objektorienteret sprog med C-Style Syntax, udviklet af Google og al fladderudvikling bruger den. Hvis du allerede har en oplevelse af web eller mobiludvikling, skal det ikke være helt fremmed for dig.

Alt i fladder er baseret på widgets, som er bygningsblokke af en app. Hvis du har brugt reagerer, før, er Flutter's tilgang meget ens, og widgets er analoge med komponenter. I det væsentlige kan hele din app dekomponeres i et hierarki af widgets.

Dette ses let i Myapp. klasse. Myapp. er en StatelessWidget. (det betyder, at det er uforanderligt). Det bygge () Metode, vi overstyrer, fortæller fladder, hvordan widgeten skal gengives. Dette svarer til reagerer render () fungere.

Metoden returnerer a MaterialApp. Widget, som repræsenterer en app, der bruger Googles materiale design. Dette har igen flere egenskaber, som selv er widgets: Themedata. Definerer den visuelle stil, der skal bruges og MyhomePage. er en brugerdefineret widget defineret længere nede Main.Dart. fil, der indeholder appens krop.

07. Rediger dit indhold

I modsætning til statsløse Myapp. Vi MyhomePage. er en statslig widget. Det betyder, at dens adfærd er defineret af _MyhomePagestate. Klasse, der gør det muligt at gemme oplysninger og ændre i overensstemmelse hermed, f.eks. Når du trykker på knappen på appen.

Du kan se, at det i øjeblikket bruger mange indbyggede widgets fladder, giver mulighed for at håndtere almindelige ting som layout, knapper og tekstvisning. Lad os lave nogle ændringer i den klasse for at ændre, hvad vores app præsenterer. 

 klasse _myhomePagestate udvider staten & lt; myHomePage & GT; {
 @Override.
 Widget Build (BuildContext Context) {
   returnere ny stillads (
     Appbar: Ny Appbar (
       Titel: Ny tekst (widget.title),
     ),
     Krop: Ny beholder (
       Dekoration: Ny boxdecoration (Farve: Colors.brown 
),
       Barn: Ny Recipewidget ()
     )
   );
 }
}

Vi har bortskaffet det eksisterende indhold og erstattet det med en brun container-widget, men vi skal også oprette en brugerdefineret widget, recentwidget, der vil blive sat i beholderen. 

 Klasse Recipewidget udvider statslesswidget {
 @Override.
 Widget Build (BuildContext Context) {
   Liste & lt; widget & gt; widgets = ny liste & lt; widget & gt; ();
   Return Ny ListView (Børn: Widgets);
 }
}

08. Indlæs nogle aktiver

Næste, lad os indlæse nogle aktiver med appen, så vi kan tilføje dem til ListView. widget Inder. Recipewidget. . Statiske aktiver til en app er angivet i PubSpec.yaml. Under 'Flutter' sektionen: 

 Aktiver:
   - img / breakfast.jpg
   - img / curry.jpg
   - IMG / pasta.jpg

Vi opretter også en simpel datastruktur i Main.Dart, parring af billeder med strenge til at fungere som en miniaturebillede og resumé for opskrifter. 

 VAR Opskrifter = {
   'Breakfast.jpg': 'Start dagen lige med denne nærende morgenmad.',
   'pasta.jpg': 'Wow dine venner ved at lave din egen friske pasta.',
   'curry.jpg': 'Vis dine kulinariske færdigheder med en rig curry.',
};

09. Afslut Up.

Lad os endelig opdatere Recipewidget. at opbygge en liste over widgets, der viser opskrifterne. Vi bruger Image.asset. At indlæse de statiske aktiver, vi inkluderede i PubSpec.yaml. . 

 Opskrifter.Foreach ((Thumb, Caption) = & GT; widgets.add (
       Ny container (barn:
         Ny polstring (polstring:
           New Edgeinsets.all (16.0), barn:
             Ny ListTile (
               Ledende: image.asset ('img /' + tommelfinger, bredde: 80,0),
               Titel: Tekst (billedtekst)
             )
           ),
           dekoration:
             Ny boxdecoration (
                 Border: Ny kant (
                     BOTTOM: NY BORDERSIDE (FARVE: COLORS.BROWN)
                 ),
                 Farve: Colors.brown 

             )
       )
     )
);

Forhåbentlig begynder du at få en fornemmelse for, hvordan Flutter bruger widgets til at konstruere apps. Prøv at bruge simulatoren til at rotere enheden. Fladderlayoutet rummer automatisk ændringerne. Til sammenligning, prøv appen på Android-emulatoren.

Denne artikel blev oprindeligt offentliggjort i net , verdens bedst sælgende magasin til webdesignere og udviklere. Købe Udgave 310. eller abonnere .

Læs mere:

  • Få dit hoved til at reagere med disse fem faktorer
  • 11 Creative GRATIS iPhone apps til designere
  • Sådan designer du app ikoner

hvordan - Mest populære artikler

Sådan laver du et logo i Photoshop

hvordan Sep 13, 2025

Før vi begynder med, hvordan du laver et logo i Photoshop, skal vi adressere elefanten i rummet - Photoshop CC. b..

Sådan rierer du et ansigt til animation

hvordan Sep 13, 2025

Da jeg først lærte at skabe karakter rigge i Maya vej tilbage i 2002, mens du arbejdede på PlayStation 2-titlen Superman: Skyg..

Få dit hoved til at reagere med disse fem faktorer

hvordan Sep 13, 2025

Læringsreaktion, JavaScript-biblioteket til oprettelse af brugergrænseflader fra Facebook og Instagram virker nødder, indtil d..

Skærpe din hårde overflade modellering i 3ds max

hvordan Sep 13, 2025

I denne vejledning skal jeg dele de teknikker og metoder, jeg bruger til at skabe hårde overflade modeller i 3ds Max. ..

Opret organiske teksturer i blæk

hvordan Sep 13, 2025

Tegning med blæk producerer store muligheder. Der er enkle, men effektive måder at skabe smukke, økologiske tekstu..

Design SVG Grafik i din browser

hvordan Sep 13, 2025

Det VOECTEZY EDITOR er en gratis vektor redigering suite, der løber lige i din browser. Denne vejledning dækker ..

Sådan kommer du i gang med SASS

hvordan Sep 13, 2025

Sass. er et kraftfuldt værktøj, der bringer mange funktioner fra andre programmeringssprog til CSS - som funktioner..

Sådan tegner du et landskab med pasteller

hvordan Sep 13, 2025

Dette indlæg vil lære dig at tegne et landskab med pasteller. Når du bruger bløde pasteller, er du i stand til at tegne og ma..

Kategorier