Eine vereinfachte Einführung in Dart und Flutter

Ein bisschen Hintergrund

Alles begann im Jahr 2011: Xamarin, jetzt ein Unternehmen im Besitz von Microsoft, entwickelte mit seinem Signaturprodukt Xamarin SDK mit C # eine Lösung für hybride mobile Apps. Und so begann die Revolution der hybriden mobilen Anwendungen, die es einfach machten, eine Codebasis für viele Plattformen zu schreiben.

Ionic entstand 2013 mit seiner ersten Veröffentlichung von Drifty Co. Ionic half Webentwicklern, ihre vorhandenen Fähigkeiten in der wachsenden Branche für mobile Apps zu nutzen. Im Jahr 2015 nutzte Facebook React.js, um es für Entwickler mobiler Apps neu zu erfinden. Sie gaben uns React Native, eine vollständig JavaScript-Codebasis, die auf nativen SDKs basiert.

Und dies sind nicht die einzigen, sondern einige von vielen hybriden mobilen Frameworks. Weitere Infos finden Sie hier.

Jetzt können wir sehen, wie Google mit Flutter seine Finger in den Kuchen steckt.

Was ist Dart?

Google hatte im vergangenen Dezember seine erste Veröffentlichung von Flutter 1.0, nachdem es über 18 Monate lang im Beta-Modus war. Dart ist die Programmiersprache zum Codieren von Flutter-Apps. Dart ist ein weiteres Produkt von Google und hat im November vor Flutter die Version 2.1 veröffentlicht. Die Flutter-Community ist zu Beginn nicht so umfangreich wie ReactNative, Ionic oder Xamarin.

Vor einiger Zeit entdeckte ich eine Vorliebe für JavaScript. Ich war begeistert, für mein Praktikum an einer mobilen ReactNative-App zu arbeiten. Ich mag es auch, hybride mobile Apps zu programmieren, deshalb wollte ich Flutter ausprobieren, wie ich es letztes Jahr irgendwann mit Xamarin getan hatte.

Bei meinem ersten Blick auf Flutter (und Dart) fühlte ich mich verwirrt und schien nichts zu verstehen. Sie hatten sogar einen Abschnitt in ihren Dokumenten für Entwickler, die von React Native wechseln. Also habe ich mich eingehender mit Dart befasst.

Dart sieht ein bisschen wie C aus und ist eine objektorientierte Programmiersprache. Wenn Sie also die C-Sprachen oder Java bevorzugen, ist Dart die richtige für Sie, und Sie werden es wahrscheinlich beherrschen.

Dart wird nicht nur für die Entwicklung mobiler Apps verwendet, sondern ist auch eine Programmiersprache. Es wurde von Ecma (ECMA-408) als Standard anerkannt und wird verwendet, um nahezu alles im Web, auf Servern, auf dem Desktop und natürlich in mobilen Anwendungen zu erstellen (Ja, dieselben Personen, die unsere Favoriten ES5 und ES6 standardisiert haben.)

Wenn Dart in Webanwendungen verwendet wird, wird es in JavaScript transpiliert, sodass es in allen Webbrowsern ausgeführt werden kann. Die Dart-Installation wird auch mit einer VM geliefert, mit der die Dart-Dateien über eine Befehlszeilenschnittstelle ausgeführt werden können. Die in Flutter-Apps verwendeten Dart-Dateien werden kompiliert und in eine Binärdatei (.apk oder .ipa) gepackt und in App Stores hochgeladen.

Wie sieht die Codierung in Dart aus?

Wie die meisten ALGOL-Sprachen (wie C # oder Java):

  1. Der Einstiegspunkt einer Dart-Klasse ist die main()Methode. Diese Methode dient auch als Ausgangspunkt für Flutter-Apps.
  2. Der Standardwert der meisten Datentypen ist null.
  3. Dartklassen unterstützen nur die Einzelvererbung. Es kann nur eine Oberklasse für eine bestimmte Klasse geben, es können jedoch viele Implementierungen von Schnittstellen vorhanden sein.
  4. Die Flusskontrolle bestimmter Anweisungen, z. B. if-Bedingungen, Schleifen (for, while und do-while), switch-case, break und continue-Anweisungen, sind identisch.
  5. Die Abstraktion funktioniert auf ähnliche Weise und ermöglicht abstrakte Klassen und Schnittstellen.

Im Gegensatz zu ihnen (und manchmal ein bisschen wie JavaScript):

  1. Dart hat Typinferenz. Der Datentyp einer Variablen muss nicht explizit deklariert werden, da Dart „ableitet“, was es ist. In Java muss der Typ einer Variablen während der Deklaration explizit angegeben werden. Zum Beispiel String something;. Aber in Dart wird das Schlüsselwort stattdessen so verwendet var something;. Der Code behandelt die Variable entsprechend dem, was sie enthält, sei es eine Zahl, eine Zeichenfolge, ein Bool oder ein Objekt.
  2. Alle Datentypen sind Objekte, einschließlich Zahlen. Wenn sie nicht initialisiert werden, ist ihr Standardwert keine 0, sondern null.
  3. Ein Rückgabetyp einer Methode ist in der Methodensignatur nicht erforderlich.
  4. Der Typ numdeklariert jedes numerische Element, sowohl reell als auch ganzzahlig.
  5. Der super()Methodenaufruf befindet sich nur am Ende des Konstruktors einer Unterklasse.
  6. Das newvor dem Konstruktor für die Objekterstellung verwendete Schlüsselwort ist optional.
  7. Methodensignaturen können einen Standardwert für die übergebenen Parameter enthalten. Wenn also einer nicht im Methodenaufruf enthalten ist, verwendet die Methode stattdessen die Standardwerte.
  8. Es hat einen neuen eingebauten Datentyp namens Runes, der sich mit UTF-32-Codepunkten in einer Zeichenfolge befasst. Ein einfaches Beispiel finden Sie unter Emojis und ähnliche Symbole.

Und all diese Unterschiede sind nur einige der vielen, die Sie auf der Dart Language-Tour finden, die Sie hier nachlesen können.

Dart hat auch eingebaute Bibliotheken im Dart SDK installiert. Die am häufigsten verwendeten sind:

  1. Dart: Kern für Kernfunktionalität; Es wird in alle Dart-Dateien importiert.
  2. Dart: Async für asynchrone Programmierung.
  3. Dart: Mathematik für mathematische Funktionen und Konstanten.
  4. Dart: Konvertieren zum Konvertieren zwischen verschiedenen Datendarstellungen wie JSON in UTF-8.

Weitere Informationen zu Dart-Bibliotheken finden Sie hier.

Verwenden von Dart in Flutter

Flutter verfügt über mehr app-spezifische Bibliotheken, häufiger auf Elementen der Benutzeroberfläche wie:

  1. Widget: Allgemeine App-Elemente wie Text oder ListView.
  2. Material: Enthält Elemente, die dem Materialdesign folgen, z. B. FloatingActionButton.
  3. Cupertino: Enthält Elemente, die aktuellen iOS-Designs folgen, wie z. B. CupertinoButton.

Flutter-spezifische Bibliotheken finden Sie hier.

Flattern einrichten

Um dieses Ding in Gang zu bringen, folgen Sie den Flutter-Dokumenten. Es enthält Details zur Installation des Flutter SDK und zum Einrichten Ihrer bevorzugten IDE. meins wäre VS-Code. Das Einrichten von VS-Code mit der Flutter-Erweiterung ist hilfreich. Es kommt mit eingebauten Befehlen im Gegensatz zur Verwendung des Terminals.

Folgen Sie den Dokumenten erneut, um Ihre erste App zu erstellen. Führen Sie in meinem Fall den Erweiterungsbefehl Flutter: New Project aus. Geben Sie anschließend den Projektnamen ein und wählen Sie den Zielordner aus.

Wenn Sie das Terminal bevorzugen, wechseln Sie in den Zielordner der App. Verwenden Sie dann den Befehlflutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Original text


Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

import 'package:flutter/material.dart'; class CustomCard extends StatelessWidget { CustomCard({@required this.index}); final index; @override Widget build(BuildContext context) { return Card( child: Column( children: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

body: Center( child: Container( child: ListView.builder( itemCount: _counter, itemBuilder: (context, int index) { return CustomCard( index: ++index, ); }, ) ), ),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.