Codering van een Android-app met Flutter en Dart

Wat je gaat creëren

Als je op zoek bent naar alternatieve benaderingen voor de ontwikkeling van Android-apps, zou je moeten overwegen om Google's Flutter, een framework gebaseerd op de Dart-programmeertaal, eens te proberen. 

Apps die met Flutter zijn gebouwd, zijn grotendeels niet te onderscheiden van degene die zijn gebouwd met de Android SDK, zowel qua uiterlijk als qua prestaties. Wat meer is, met kleine aanpassingen kunnen ze ook op iOS-apparaten worden uitgevoerd.

In deze zelfstudie laat ik je kennismaken met de basisprincipes van Flutter door je te laten zien hoe je een eenvoudige tipcalculator-app voor Android kunt bouwen.

voorwaarden

Als je deze zelfstudie wilt kunnen volgen, heb je het volgende nodig:

• de nieuwste versie van IntelliJ IDEA
  
• Android Studio 2.2 of hoger
  
• een apparaat of emulator met Android 4.4 of hoger
  
• een computer met Mac of Linux
  

1. Waarom Flutter gebruiken?

Bij 60 fps presteren gebruikersinterfaces gemaakt met Flutter veel beter dan die gemaakt met andere platformonafhankelijke ontwikkelkaders zoals React Native en Ionic. Als dat je niet opwindt, zijn hier nog een paar redenen waarom je Flutter zou willen gebruiken:

1. Flutter gebruikt Dart, een snelle, objectgeoriënteerde taal met verschillende handige functies, zoals mixins, generics, isolates en optionele statische types.
   
2. Flutter heeft zijn eigen UI-componenten, samen met een engine om ze op zowel het Android- als het iOS-platform weer te geven. De meeste van deze UI-componenten voldoen direct aan de richtlijnen van Material Design.
   
3. Flutter-apps kunnen worden ontwikkeld met IntelliJ IDEA, een IDE die sterk lijkt op Android Studio.
   

2. Flutter installeren

Je kunt de nieuwste versie van Flutter krijgen door de GitHub-repository te klonen.

git clone https://github.com/flutter/flutter.git

Flutter heeft verschillende afhankelijkheden, zoals de lettertypen Dart SDK en Material Design. Gelukkig wordt de eerste keer dat u de diagnostische tool van Flutter uitvoert, deze allemaal automatisch geïnstalleerd.

cd flutter / bin ./flutter arts

Om Android-apps te kunnen bouwen, moet je ook Flutter wijzen naar de map waar je Android Studio hebt geïnstalleerd.

./ flutter config --android-studio-dir ~ / android-studio

3. IntelliJ IDEA configureren

Hoewel u Flutter's CLI rechtstreeks kunt gebruiken om nieuwe apps te maken en uit te voeren, hebt u waarschijnlijk een veel betere ontwikkelervaring als u een IDE gebruikt. De aanbevolen IDE voor Flutter is IntelliJ IDEA. 

Voordat je Flutter-apps ermee gaat ontwikkelen, moet je echter plug-ins voor zowel Dart als Flutter installeren. Om dit te doen, begint u met het selecteren Configureren> Plug-ins in het welkomstscherm van IntelliJ.

In het dialoogvenster dat verschijnt, drukt u op Door repositories bladeren ... knop en zoek naar de pijl inpluggen. Zodra u het hebt gevonden, drukt u op Installeren knop om het te installeren.

Zoek ook en installeer de Fladderen inpluggen.

Zodra beide plug-ins zijn geïnstalleerd, start u IntelliJ IDEA opnieuw.

U moet nu de Flutter-plug-in naar de directory waarin u Flutter hebt geïnstalleerd wijzen. Selecteer om dit te doen Configureren> Instellingen in het welkomstscherm en navigeer in het dialoogvenster dat verschijnt naar Talen en frameworks> Flutter. In de Flutter SDK-pad veld, typ het absolute pad van de map in.

druk op OK om de configuratie te voltooien.

4. Een nieuw project maken

Als u een nieuw Flutter-project wilt maken, drukt u op Maak een nieuw project knop in het welkomstscherm. In de Nieuw project dialoogvenster, kies Fladderen en druk op volgende.

U kunt nu een betekenisvolle naam aan uw project geven en op drukken Af hebben.

Nadat het project is gegenereerd, raad ik u aan op te drukken Rennen om ervoor te zorgen dat de Dart SDK, de plug-ins en het Flutter-framework allemaal correct zijn geconfigureerd. Als ze na enkele seconden het volgende scherm op uw apparaat of emulator te zien krijgen:

Merk op dat u vanaf dit punt niet op de Rennen knop opnieuw, zelfs na het maken van codewijzigingen. Flutter ondersteunt heet herladen, een functie waarmee u onmiddellijk updates naar de app kunt pushen zonder deze opnieuw te hoeven starten.

5. Widgets maken

In deze zelfstudie maken we een app voor tipcalculator met de volgende widgets:

• een TextField om een ​​factuurbedrag te accepteren
  
• een TextField om een ​​tippercentage te accepteren
  
• een RaisedButton de gebruiker kan op drukken om de tip te berekenen
  

Elke Flutter-widget kan een van beide zijn StatelessWidget of a StatefulWidget. Zoals de naam doet vermoeden, een StatefulWidget heeft een Staat object gekoppeld, waardoor het niet alleen gegevens kan opslaan, maar ook kan reageren op wijzigingen in de gegevens.

EEN StatelessWidget, aan de andere kant, is een eenvoudiger object, niet ontworpen om gegevens permanent op te slaan. Om deze tutorial kort te houden, zullen we onze tipcalculator maken als een StatelessWidget. Daarom open main.dart, verwijder de volledige inhoud en voeg de volgende code toe:

import 'pakket: flutter / material.dart'; class TipCalculator breidt StatelessWidget uit 

In de bovenstaande code, de importeren lijn is belangrijk omdat material.dart is de bibliotheek die alle Material Design-widgets bevat die we in deze app zullen gebruiken.

Als u het factuurbedrag en het tippercentage wilt opslaan, voegt u twee lidvariabelen toe aan de klas.

dubbele billAmount = 0,0; dubbele tipPercentage = 0,0;

Om de gebruikersinterface van de app te maken, overschrijft u de bouwen() methode.

@override Widget-build (BuildContext-context) // Meer code gaat hier

Laten we nu de twee maken TextField widgets. Terwijl we dit doen, kunnen we details specificeren, zoals de labels die we aan de widgets en de typen virtuele toetsenborden willen koppelen die moeten worden weergegeven als ze in focus zijn.

Omdat we de inhoud van a. Niet rechtstreeks kunnen ophalen TextField widget, we moeten ook een associëren onChanged event handler ermee. In de handler, die een ontvangt Invoerwaarde object, kunnen we de inhoud van de ledvariabelen van onze klasse bijwerken.

Voeg daarom de volgende code toe binnen de bouwen() methode:

// Maak eerste invoerveld TextField billAmountField = new TextField (labelText: "Factuurbedrag (\ $)", toetsenbordType: TextInputType.number, onChanged: (InputValue-waarde) try billAmount = double.parse (value.text); catch (uitzondering) billAmount = 0.0;); // Maak een ander invoerveld aan TextField tipPercentageField = new TextField (labelText: "Tip%", keyboardType: TextInputType.number, hintText: "15", onChanged: (InputValue-waarde) try tipPercentage = double.parse (value.text) ; catch (uitzondering) tipPercentage = 0.0;);

Zelfs als je nog nooit met Dart hebt gewerkt, moet bovenstaande code redelijk intuïtief zijn, zolang je bekend bent met Java. U kunt bijvoorbeeld zien dat we de gebruiken ontleden () methode om elk te converteren TextField tekstinhoud van widget naar a dubbele voorwerp. Omdat het ontleden () methode kan gooien een FormatException, het is ook omgeven door een proberen te vangen blok.

Een maken RaisedButton widget lijkt veel op het maken van een TextField widget. Als u er echter een label aan wilt toewijzen, moet u een nieuw label maken Tekst widget en voeg het toe als het kind.

// Maak knop RaisedButton calculateButton = new RaisedButton (child: new Text ("Calculate"), onPressed: () // More code goes here);

Binnen in de onPressed gebeurtenishandler van de knop, berekenen we de tip en het totale te betalen bedrag en geven beide weer in een modaal dialoogvenster. Om het dialoogvenster te maken, kunnen we de AlertDialog klasse. Nadat het dialoogvenster is gemaakt, kan het worden weergegeven door het als argument door te geven aan het ShowDialog () methode.

Voeg daarom de volgende code toe binnen de onPressed event handler:

// Bereken tip en totaal dubbel berekendTip = BillAmount * tipPercentage / 100.0; double total = billAmount + calculatedTip; // Dialoogvenster genereren Dialoogvenster Dialoogvenster DialDialoog = nieuw AlertDialog (inhoud: nieuwe tekst ("Tip: \ $$ calculatedTip \ n" "Total: \ $$ total")); // Show dialog showDialog (context: context, child: dialog);

Merk op dat we in de bovenstaande code de tekenreeksinterpolatiefunctie van Dart hebben gebruikt om variabelen in de inhoud van het dialoogvenster. Je kunt ook zien dat letterlijke tekenreeksen in Dart kunnen worden samengevoegd door ze naast elkaar te plaatsen, hoewel je de + operator ook, als je wilt.

6. Een widgetboom maken

Een Flutter-app is meestal niets anders dan een boom met widgets. Met andere woorden, u maakt een Flutter-app door eenvoudig meerdere widgets te maken en relaties tussen bovenliggende en onderliggende elementen in te stellen.

Momenteel zijn er geen relaties tussen de widgets die we in de vorige stap hebben gemaakt. Zoals je misschien al geraden hebt, zullen het allemaal broers en zussen zijn, dus laten we nu een ouderwidget voor ze maken.

Een widget die meerdere kinderen kan bevatten, wordt meestal een lay-outwidget genoemd. Flutter biedt verschillende lay-outwidgets om uit te kiezen. Voor onze app, de Kolom widget is het meest geschikt omdat het alle onderliggende items onder elkaar plaatst.

Om aan de Material Design-specificatie te voldoen, moeten we bovendien een opvulling toevoegen van 16 dp naar de Kolom widget. We kunnen dit doen door er een te maken kind van a Houder widget.

Containercontainer = nieuwe container (opvulling: const EdgeInsets.all (16.0), child: new Column (children: [billAmountField, tipPercentageField, calculateButton]));

Een gebruikersinterface met Material Design is niet compleet zonder een app-balk. Maak er daarom een ​​aan met de AppBar widget.

AppBar appBar = nieuwe AppBar (titel: nieuwe tekst ("Tip Calculator"));

Lay-outs met app-balken en containers zijn zo gewoon dat Flutter biedt een Steiger widget om u te helpen snel een relatie tussen hen te vestigen.

Steigersteiger = nieuwe steiger (appBar: appBar, lichaam: container);

Met de Steiger widget in de root, onze widgetboom is nu klaar. U kunt doorgaan en de Steiger widget als de retourwaarde van de bouwen() methode.

terugbrengen steiger;

Als u het moeilijk vindt om de boom te visualiseren, moet het volgende diagram helpen:

7. Een startpunt creëren

Ons Dart-bestand heeft een hoofd() fungeren als ingangspunt. Daarin moeten we de runApp () functie om de widgetboom die we in de vorige stap hebben gemaakt, daadwerkelijk op te blazen en weer te geven.

Bovendien, onze TipCalculator widget moet binnen een worden geplaatst MaterialApp widget zodat een Material Design-thema en kleurenschema hierop kunnen worden toegepast. Voeg daarom de volgende code toe aan main.dart:

void main () runApp (new MaterialApp (titel: 'Tip Calculator', home: nieuwe TipCalculator ())); 

U kunt nu op de Hot Reload-app om de app op uw apparaat te gebruiken.

Conclusie

In deze zelfstudie leer je hoe je Flutter en Dart kunt gebruiken, samen met IntelliJ IDEA, om een ​​eenvoudige app voor Android te maken.

Naar mijn mening heeft Flutter bijna alles wat een ontwikkelaar kan zoeken in een platformonafhankelijke ontwikkelingskader voor mobiele apps. Voordat je echter besluit om je volgende grote app ermee te gaan bouwen, moet je er echter rekening mee houden dat het nog steeds een heel nieuw en snel evoluerend raamwerk is..

Voor meer informatie over Flutter, kunt u de officiële documentatie raadplegen.