Bygg Cross-Platform-mobilappar med Googles fladder

Sep 16, 2025
Hur

Det har varit många mobila ramar i plattformen genom åren, med stabila förbättringar av utvecklarupplevelse och prestanda hela tiden. Googles fladder Är ett nytt tillskott till förpackningen, och är särskilt intressant eftersom det är snarare än att använda en JavaScript-bro, så många ramar (som reagerande infödda), sammanställer den till sann inbyggd kod.

Du kan ta reda på hur det fungerar i den inledande videon nedan, eller läs vidare för en steg-för-steg-guide för att komma igång med fladder. För mer råd, ta en titt på vår samling av handledning som förklarar Hur man bygger en app . Eller, om du bygger en webbplats, välj en Website Builder och webbhotell Tjänsten från våra guider. Inte nöjd med din lagring? Här är några molnlagring alternativ.

I den här handledningen ser vi på hur man skapar fladder och utforska grunderna för att bygga appar med hjälp av ramverket med MacOs för vår utveckling. Vi antar att du har programmerat tidigare och vet hur man använder Bash Shell, men kanske inte har utvecklats för mobil.

01. Få satt upp

Du måste ladda ner och installera några saker innan du kan utnyttja fladder:

  • Xcode för iOS-support
  • Android Studio för Android Support
  • Android SDK (ladda ner Via Android Studio när du har skapat ett nytt projekt)

När du har alla dessa, kör Xcode och Android Studio, installera de extra komponenter de erbjuder och skapa ett nytt projekt för att se till att de körs.

Nu är du redo att komma igång med fladder. Ladda ner Fladdra sdk . Extrahera det till var du vill att den ska installeras. Vi måste uppdatera vår väg så att MacOS kan hitta fladder var du än har åberopat det. Öppna (eller skapa) $ Hem / .bash_profile : 

sudo atom $HOME/.bash_profile

Lägg nu till fladde / bin katalogen till din $ Väg : 

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

Kör ett Shell-kommando för att uppdatera bash-profilen: 

source $HOME/.bash_profile

Nu kan vi börja använda Flutter Cli. Det första att göra är att du har den senaste versionen: 

flutter upgrade

02. Fixa eventuella problem

När det är klart, erbjuder Flutter ett praktiskt diagnostiskt verktyg, vilket kommer att kontrollera om allt du behöver är installerat och konfigurerat korrekt. Det är verkligen användbart: 

flutter doctor

Notera vad läkaren berättar och svarar på eventuella problem som uppstår. Du kanske måste köra doktorn ett par gånger för att få ytterligare feedback och agera på den.

När verktyget är nöjd med fladder, Android Toolchain, iOS Toolchain och Android Studio, är du bra att gå. Oroa dig inte för anslutna enheter för nu.

Xcode kan kräva några extra steg på skalet för att få det helt inrätta: 

 sudo xcode-select --switch /applications/xcode.app/contents/developer
Brew Install - Head LibimobileDevice
Brew Install IdeviceInstaller
Brew Installera Cocoapods
POD SETUP

Och Android-studio behöver ofta licensavtalet som accepterar: 

 Flutter Doctor --Android-licenser

03. Hitta en IDE och starta ett nytt projekt

Nu är Flutter inrättad, du vill ha en IDE att arbeta i. Det finns plugins tillgängliga för Android Studio och Intellij. Vi ska gå med vs-kod, som också har sin egen fladdor.

Starta upp vs-kod och klicka på Visa & GT; Kommando palett. Skriv "installera" och välj tillägg: Installera förlängningsåtgärd. Sök efter 'flutter' och installera flutter plugin. När du har gjort, starta om vs-koden.

Vi är nu redo att börja utvecklas. Starta ett nytt projekt via kommandopaletten genom att välja flutter: Nytt projektalternativ. Namn ditt projekt, välj var du ska spara det och vs-koden kommer att åberopa fladder för att generera det nya projektet.

04. Ställ in virtuella enheter

För att testa vårt projekt, vill vi ha en enhetssimulator för att tillåta oss på skrivbordet. I det nedre högra hörnet av vs-koden (i den blå fältet) ser du något som säger inga enheter. Om du har utvecklat för Mobile tidigare, när du klickar på det, ser du dina simulatorer tillgängliga i kommandopaletten.

Om du inte har några simulatorer, kör följande i terminalen för att öppna iOS-simulatorn för första gången: 

 Open-Simulator

Du bör då se en IOS-simulator tillgänglig när du startar om vs-koden.

Android är mer komplex. Ladda Android Studio och inom ett Android-projekt, klicka på Verktyg och GT; Android & GT; AVD-chef. Välj Skapa virtuell enhet.

Välj enheten för att emulera - till exempel en Google Pixel 2. Klicka på Nästa och du kan också välja en systembild (dvs OS-version) för att ladda ner. På nästa sida under emulerad prestanda, välj Hardware - Gles 2.0 för att aktivera maskinvaru-acceleration på emulatorn. Avsluta processen.

När du har skapat den virtuella enheten i Android Studio, starta om vs-kod och du får se att din Android-emulator visas tillsammans med iOS-simulatorn i VS-kodens enhetslista.

Om du klickar på inga enheter kan du välja en IOS- eller Android-enhet och en virtuell telefon kommer att skjuta upp på skrivbordet. Prova det med en iPhone X-simulator.

04. Testa startprogrammet

Nu körs simulatorn, du kan testa starterappen. Hit F5 eller klicka på Debug & GT; Börja debugging. Appen laddas på simulatorn och du kan försöka interagera med den. Var tålmodig om det inte händer omedelbart, eftersom det kan ta lite tid att bygga.

Innan vi kan göra detsamma på Android, måste vi installera betygsberoende för vårt projekt (en liten nyans av fladdra just nu). Navigera till projektrotkatalogen och kör: 

 Android / Gradlew

Då kan du öppna en Android-emulator och köra projektet i felsökningsläge som du gjorde för iOS.

En bra funktion av fladder är att den stöder "Hot Reloading" - det vill säga att du kan ändra din källa och se de ändringar som återspeglas i simulatorn direkt. I main.dart , låt oss göra ett par ändringar i MyApp-klassen medan iPhone X-simulatorn körs: 

 Primärwatch: Colors.Green,
Hem: New MyHomePage (Titel: "Receptbok"), =

Du bör se att ändringarna träder i kraft så snart du sparar.

06. Utforska Flutters widget system

Vad vi ännu inte har pratat om är Dartprogrammeringsspråket som fladdra använder. Dart är ett objektorienterat språk med C-stil syntax, utvecklad av Google och all Flutter Development använder den. Om du redan har någon erfarenhet av webb eller mobilutveckling, bör det inte vara helt utomjordiskt för dig.

Allt i fladder är baserat på widgets, som är byggstenarna i en app. Om du har använt reagera innan är Fladders tillvägagångssätt mycket liknande och widgets är analoga med komponenter. I huvudsak kan hela din app sönderdelas i en hierarki av widgets.

Detta ses lätt inom Myapp klass. Myapp är en Statlöswidget (Det betyder att det är oföränderligt). De bygga() Metod som vi är överordnade berättar för hur widgeten ska göras. Detta liknar reagerar framställa() fungera.

Metoden returnerar a Materialapp Widget, som representerar en app som använder Googles materialdesign. Detta har i sin tur flera egenskaper, som är själva widgets: Tema Definierar den visuella stilen som ska användas och Myhomepage är en anpassad widget som definieras längre ner main.dart fil som innehåller appens kropp.

07. Redigera ditt innehåll

Till skillnad från den statslösa Myapp , Myhomepage är en statslig widget. Det betyder att dess beteende definieras av _MyhomePagesTate Klass, vilket gör det möjligt att lagra information och ändra i enlighet med detta, till exempel när du trycker på knappen på appen.

Du kan se att det för närvarande använder många inbyggda widgets Flutter ger för att hantera vanliga saker som layout, knappar och textdisplay. Låt oss göra några ändringar i den klassen för att ändra vad vår app presenterar. 

 Klass _MyHomePagesTate utökar State & LT; MyHomePage & GT; {
 @åsidosätta
 Widget build (buildcontext context) {
   returnera ny byggnadsställning (
     AppBAR: Ny AppBar (
       Titel: Ny text (widget.title),
     )
     Kropp: Ny behållare (
       Dekoration: Ny Bokdecoration (Färg: Färger.Brown 
),
       Barn: Nyregn ()
     )
   );
 }
}

Vi har avstått från det befintliga innehållet och ersatt det med en brun container-widget, men vi måste också skapa en anpassad widget, reciphewidget, som kommer att läggas i behållaren. 

 CLASS RECIPEWIDGET ÄR STARTELIGTWIDGET {
 @åsidosätta
 Widget build (buildcontext context) {
   LIST & LT; Widget & GT; Widgets = Ny lista och lt; widget & gt; ();
   returnera ny listview (barn: widgets);
 }
}

08. Ladda vissa tillgångar

Låt oss ladda några tillgångar med appen så att vi kan lägga till dem i Listvy widget inom Repreaswidget . Statiska tillgångar för en app anges i pubspec.yaml Under avsnittet "Flutter": 

 Tillgångar:
   - img / breakfast.jpg
   - img / curry.jpg
   - img / pasta.jpg

Vi skapar också en enkel datastruktur i Main.Dart, parning av bilder med strängar för att fungera som en miniatyrbild och sammanfattning för recept. 

 Var recept = {
   "Breakfast.jpg": "Börja dagen med den här näringsrika frukosten."
   'pasta.jpg': 'Wow dina vänner genom att göra din egen färska pasta.',
   'curry.jpg': 'visa upp dina kulinariska färdigheter med en rik curry.',
};

09. Avsluta

Slutligen, låt oss uppdatera Repreaswidget Att bygga en lista med widgets som visar recepten. Vi använder Image.asset För att ladda de statiska tillgångarna vi inkluderade i pubspec.yaml . 

 Recept.foreach ((Thumb, Caption) = & GT; widgets.add (
       Ny behållare (barn:
         Ny vaddering (Padding:
           nya edgeinsets.all (16.0), barn:
             Ny Listtile (
               Ledande: Image.ASSET ('IMG /' + Thumb, Bredd: 80.0),
               Titel: Text (bildtext)
             )
           )
           dekoration:
             Ny Bokdecoration (
                 Gräns: Ny gräns (
                     Bottom: Ny Borderside (färg: Colors.Brown)
                 )
                 Färg: färger. Brown 

             )
       )
     )
);

Förhoppningsvis börjar du få en känsla för hur fladder använder widgets för att konstruera appar. Försök använda simulatorn för att rotera enheten. Flutter layouten rymmer automatiskt ändringarna. För jämförelse, prova appen på Android-emulatorn.

Denna artikel publicerades ursprungligen i netto , världens bästsäljande tidning för webbdesigners och utvecklare. köpa Utgåva 310 eller prenumerera .

Läs mer:

  • Få ditt huvud runt reagera med dessa fem faktorer
  • 11 Kreativa gratis iPhone-appar för designers
  • Hur man designerar appikoner

Hur - Mest populära artiklar

Hur man sätter upp en lokal utvecklingsmiljö

Hur Sep 16, 2025

(Bildkredit: Framtida) En lokal utvecklingsmiljö gör att du kan använda din egen maskin för att köra din webbpla..

Hur man ritar en arm

Hur Sep 16, 2025

(Bildkredit: Patrick J Jones) Att lära sig att dra en arm som ser realistisk ut är en viktig del av en livsritning...

8 Viktiga Wordpress Security Secrets

Hur Sep 16, 2025

Under de senaste 15 åren har Wordpress blivit världens mest populära innehållshanteringssystem. Lätt att komma igång med och extremt mångsidig, det är en av de bästa bloggpla..

Hämta filer för 3D World 232

Hur Sep 16, 2025

För att ladda ner de medföljande filerna för 3D World Issue 232, klicka bara på länken nedan varje artikel och en ZIP-fil h�..

Hur man betonar kontaktpunkten för en bild

Hur Sep 16, 2025

Med hjälp av element i din blyertspenna är ett bra sätt att fånga betraktarens uppmärksamhet inom ett stycke...

Skapa ett tecken med en stark pose i Photoshop

Hur Sep 16, 2025

Att skapa överdrivna manliga tecken handlar om överdrift, trycker på formerna, roliga, rörelsen och kamerans vinkel mot grän..

Hur prototype en mobil app med Adobe XD

Hur Sep 16, 2025

Denna handledning, som visar dig hur du gör en mobilapp-prototyp i Adobe XD, sattes tillsammans med Adobe..

Hur man målar ett livligt blommigt stilleben

Hur Sep 16, 2025

Färg och textur erbjuder ett perfekt sätt att ge livskraften till ett blommigt stilleben. Denna demonstration visar hur jag anv..

Kategorier