Bouw mobiele apps met mobiele apparaten met Google's Flutter

Er zijn in de loop der jaren talrijke mobiele frameworks van mobiele apparaten geweest, met gestage verbeteringen aan ontwikkelaarservaring en -prestaties overal. Google's fladder is een nieuwe toevoeging aan het pakket, en is bijzonder interessant omdat het in plaats van een javascript 'brug' zoveel kaders (zoals reageert native) doen, het compileert tot echte inheemse code.

Je kunt er een beetje achterhalen over hoe het werkt in de onderstaande inleidende video of voorlezen voor een stapsgewijze handleiding om te beginnen met Flutter. Neem voor meer advies een kijkje in onze verzameling tutorials die uitleggen Hoe een app te bouwen ​Of, als u een site brengt, kies dan een website bouwer en web hosting service van onze gidsen. Niet blij met je opslag? Hier zijn een paar cloud opslag opties.

In deze tutorial zullen we kijken hoe ze flutter kunnen opzetten en de basisprincipes van het bouwen van apps verkennen met behulp van het raamwerk, met behulp van MacOS voor onze ontwikkeling. We nemen aan dat u eerder hebt geprogrammeerd en weet hoe u de bash-shell kunt gebruiken, maar mogelijk niet hebt ontwikkeld voor mobiel.

01. Krijg op te zetten

Je moet een paar dingen downloaden en installeren voordat je gebruik kunt maken van flutter:

• Xcode voor iOS-ondersteuning
• Android-studio voor Android-ondersteuning
• Android SDK (Download via Android Studio Zodra u een nieuw project hebt gemaakt)

Zodra u al deze hebt, voert u Xcode en Android Studio uit, installeert u de extra componenten die ze aanbieden en creëren een nieuw project om ervoor te zorgen dat ze worden uitgevoerd.

Nu ben je klaar om te beginnen met Flutter. Download de Flutter SDK ​Pak het uit op waar je zou willen dat het wordt geïnstalleerd. We moeten ons pad bijwerken, zodat MacOS-flutter kan vinden waar u het roept. Open (of maken) $ Home / .bash_Profile ​

sudo atom $HOME/.bash_profile

Voeg nu de flutter / bin-map toe aan uw $ Pad ​

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

Voer een Shell-opdracht uit om het bashprofiel te vernieuwen:

source $HOME/.bash_profile

Nu kunnen we beginnen met het gebruik van de Flutter CLI. Het eerste ding om te doen is ervoor zorgen dat je de nieuwste versie hebt:

flutter upgrade

02. Maak eventuele problemen op

Eenmaal dat is gedaan, biedt Flutter een handige diagnostische tool, die controleert of alles dat u nodig hebt, correct is geïnstalleerd en opgezet. Het is echt handig:

flutter doctor

Let op wat de dokter u vertelt en reageer op eventuele problemen die ontstaan. Misschien moet u de dokter een paar keer uitvoeren om extra feedback te krijgen en erop te handelen.

Zodra de tool blij is met flutter, Android-toolchain, iOS-toolchain en Android-studio, bent u goed om te gaan. Maak je geen zorgen over verbonden apparaten voor nu.

Xcode kan wat extra stappen nodig hebben bij de shell om het volledig op te zetten:

 Sudo Xcode-SELECT - SWITCH /APPLICATIES/XCODE.APP/Contents/Developer
BREW INSTALLEN --HEAD LIBIMOBILLEDEVICE
brouwsel installeer ideviceinstaller
Brew Installeer Cocoapods
POD SETUP 

En Android-studio heeft vaak de licentieovereenkomst nodig die accepteert:

 Flutter-arts --Android-licenties 

03. Zoek een IDE en start een nieuw project

Flutter is nu opgezet, u wilt dat een IDE om in te werken. Er zijn plug-ins beschikbaar voor Android Studio en Intellij. We gaan met vs-code, die ook zijn eigen flutter-plug-in heeft.

Start VS-code op en klik op View & GT; Command Palet. Typ 'Install' en selecteer de extensies: Installeer Extension Action. Zoek naar 'flutter' en installeer de fladderplug-in. Eenmaal gedaan, start de VS-code opnieuw op.

We zijn nu klaar om te beginnen met het ontwikkelen. Start een nieuw project via het opdrachtpalet door de flutter te selecteren: nieuwe projectoptie. Geef uw project een naam, selecteer Waar te opslaan en de VS-code zal flutter oproepen om het nieuwe project te genereren.

04. Zet virtuele apparaten in

Om ons project te testen, willen we een apparaatsimulator om ons op het bureaublad toe te staan. In de rechterbenedenhoek van vs-code (in de blauwe balk) ziet u iets dat geen apparaten zegt. Als je eerder voor mobiel hebt ontwikkeld, zie je als je hierop klikt, je simulators die beschikbaar zijn in het Command Palet.

Als u geen simulators hebt, voert u het volgende in de terminal uit om de iOS-simulator voor de eerste keer te openen:

 Open -A-simulator 

Zie vervolgens een IOS-simulator die beschikbaar is wanneer u de VS-code opnieuw opstart.

Android is complexer. Laad Android Studio en klik in een Android-project op Extra & GT; Android & GT; AVD-manager. Selecteer Virtual Apparaat maken.

Selecteer het apparaat om te emuleren - bijvoorbeeld een Google Pixel 2. Klik op Volgende en u kunt ook een systeemafbeelding (I.E. OS-versie) kiezen om te downloaden. Selecteer Hardware - GLES 2.0 op de volgende pagina onder Emulated Performance om hardwaregrafiekacceleratie op de emulator in te schakelen. Maak het proces af.

Nadat u het virtuele apparaat in Android Studio hebt gemaakt, start u de VS-code opnieuw en ziet u dat uw Android-emulator wordt weergegeven naast de IOS-simulator in de apparaatlijst van het VS-code.

Als u nu op Geen apparaten klikt, kunt u een iOS- of Android-apparaat selecteren en een virtuele telefoon opent op uw bureaublad. Probeer het uit met een iPhone X-simulator.

04. Test de start van de starter

Nu wordt de simulator uitgevoerd, u kunt de start van de starter testen. Druk op F5 of klik op Debug & GT; Begin met debuggen. De app laadt op de simulator en je kunt proberen ermee om te gaan. Wees geduldig als het niet meteen gebeurt, omdat het enige tijd kan duren om te bouwen.

Voordat we hetzelfde kunnen doen op Android, moeten we gradle-afhankelijkheden voor ons project (een kleine nuance van flutter nu) installeren. Navigeer naar de hoofdmap Project en voer:

 Android / Gradlew 

Dan kunt u een Android-emulator openen en het project in de debug-modus uitvoeren zoals u deed voor iOS.

Een geweldig kenmerk van flutter is dat het 'hete herladen' ondersteunt - dat wil zeggen, u kunt uw bron wijzigen en de wijzigingen in de simulator meteen weerspiegelen. In main.dart , laten we een aantal wijzigingen in de MyApp-klasse maken terwijl de iPhone X Simulator wordt uitgevoerd:

 BIINNSTANDIGHEID: kleuren. Groen,
Home: Nieuwe MyHomepage (titel: 'Receptboek'), = 

U moet zien dat de wijzigingen van kracht worden zodra u opslaat.

06. Verken het widgetsysteem van Flutter

Waar we nog niet over hebben gesproken, is de DART-programmeertaal die flutter gebruikt. DART is een objectgeoriënteerde taal met C-style-syntaxis, ontwikkeld door Google en alle Flutter-ontwikkeling gebruikt het. Als je al een ervaring hebt met web of mobiele ontwikkeling, dan zou het niet helemaal buitenaards moeten zijn.

Alles in fladder is gebaseerd op widgets, die de bouwstenen van een app zijn. Als u eerder reageert, is de aanpak van Flutter's zeer vergelijkbaar en zijn widgets analoog aan componenten. In wezen kan uw hele app worden ontleend aan een hiërarchie van widgets.

Dit is gemakkelijk te zien in de Myapp klasse. Myapp is een Statelesswidget (Dit betekent dat het onveranderlijk is). De bouwen() Methode We zijn het overschatten dat Tells Flutert Flutter heeft hoe de widget moet worden weergegeven. Dit is vergelijkbaar met reageren render () functie.

De methode retourneert a MaterialApp Widget, die een app vertegenwoordigt die het materiaalontwerp van Google gebruikt. Dit heeft op zijn beurt verschillende eigenschappen, die zelf widgets zijn: Themedata Bepaalt de visuele stijl die moet worden gebruikt en Mijn startpagina is een aangepaste widget die verder naar beneden is gedefinieerd main.dart bestand dat het lichaam van de app bevat.

07. Bewerk uw inhoud

In tegenstelling tot het stateless Myapp ​ Mijn startpagina is een beleverde widget. Dit betekent dat het gedrag wordt bepaald door de _MyhomePagestate Klasse, waardoor het in staat is om informatie op te slaan en dienovereenkomstig te wijzigen, zoals wanneer u op de knop op de app drukt.

U kunt zien dat het momenteel wordt gebruikt met veel ingebouwde widgets Flutter biedt om veel voorkomende dingen zoals lay-out, knoppen en tekstweergave te hanteren. Laten we enkele wijzigingen aanbrengen in die klasse om te wijzigen wat onze app presenteert.

 Klasse _myhomePagestate verlengt State & Lt; MyHomepage & GT;​
 @Override
 Widget Build (BuildContext Context) {
   nieuwe scaffold teruggeven (
     Appbar: nieuwe appbar (
       Titel: Nieuwe tekst (widget.title),
     ​
     Lichaam: nieuwe container (
       Decoratie: nieuwe boxdecoration (kleur: kleuren.brown 
),
       Kind: nieuwe recipewidget ()
     ​
   ​
 ​
} 

We hebben de bestaande inhoud weggegooid en vervangen door een Brown Container Widget, maar we moeten ook een aangepaste widget maken, wreedwidget, die in de container worden geplaatst.

 Class CreateWidget verlengt statelesswidget {
 @Override
 Widget Build (BuildContext Context) {
   Lijst & LT; Widget & GT; Widgets = Nieuwe lijst & LT; Widget & GT; ();
   Nieuwe lijstweergave retourneren (kinderen: widgets);
 ​
} 

08. Laad enkele activa

Laten we volgende een aantal activa met de app laden, zodat we ze kunnen toevoegen aan de Lijstweergave widget binnen Recipewidget ​Statische activa voor een app worden gespecificeerd in pubspec.yaml Onder het gedeelte 'Flutter':

 Activa:
   - IMG / ontbijt.jpg
   - IMG / Curry.jpg
   - IMG / PASTA.JPG 

We maken ook een eenvoudige data-structuur in Main.Dart, het koppelen van afbeeldingen met snaren om te fungeren als een miniatuur en samenvatting voor recepten.

 Var Recepten = {
   'Ontbijt.jpg': 'Start de dag goed met dit voedzame ontbijt.',
   'Pasta.jpg': 'Wow je vrienden door je eigen verse pasta te maken.',
   'Curry.jpg': 'Pronk met je culinaire vaardigheden met een rijke curry.',
}; 

09. Voltooien

Laten we eindelijk bijwerken Recipewidget Om een ​​lijst met widgets te bouwen die de recepten weergeeft. We gebruiken Image.asset om de statische activa te laden die we hebben opgenomen pubspec.yaml ​

 Recepten.forach ((duim, bijschrift) = & gt; widgets.add (
       Nieuwe container (kind:
         Nieuwe vulling (opvulling:
           Nieuwe Edgeinsets.Alle (16.0), kind:
             Nieuwe lijst (
               Leading: Image.Asset ('img /' + thumb, breedte: 80.0),
               Titel: Tekst (bijschrift)
             ​
           ​
           decoratie:
             nieuwe boxdecoration (
                 Grens: Nieuwe rand (
                     bodem: nieuwe grenzenide (kleur: kleuren.brown)
                 ​
                 Kleur: kleuren.brown 

             ​
       ​
     ​
); 

Hopelijk begint je een gevoel te krijgen voor hoe flutter widgets gebruikt om apps te construeren. Probeer de simulator te gebruiken om het apparaat te draaien. De fladderenlay-out accommisseert automatisch de wijzigingen. Voor vergelijking, probeer de app op de Android-emulator.

Dit artikel is oorspronkelijk gepubliceerd in netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Kopen uitgave 310 of inschrijven ​

Lees verder:

• Haal je hoofd rond reageren met deze vijf factoren
• 11 Creatieve gratis iPhone-apps voor ontwerpers
• Hoe app-pictogrammen te ontwerpen