Entwickeln mit Flutter

First Steps und Tipps zur Flutter-Entwicklung

Du hast Dich informiert und beschlossen Deine erste App mit Flutter zu entwickeln? Dann hast Du eine gute Wahl getroffen!

Flutter – ein von Google entwickeltes Cross-Plattform Framework zur Entwicklung von mobilen, Web- und mittlerweile auch Desktop-Applikationen, ist in den letzten Jahren immer mehr gewachsen und hat sich mit der Zeit immer mehr bewiesen.

In einem unserer vorherigen Blogbeiträge haben wir bereits in einer kleinen Einführung in Flutter allgemeine Informationen zu der SDK zusammengetragen. Hier erfährst Du jetzt, wie Du am besten anfängst und bekommst ein paar Tipps zur Flutter-Entwicklung von uns.

Entwickeln mit Flutter – First Steps

Bevor Du mit dem Entwickeln Deiner App durchstarten kannst, musst Du zuerst Deine Entwicklungsumgebung einrichten.

Entwicklungsumgebung einrichten – folgende Schritte müssen durchlaufen werden

1. Flutter installieren

Als erstes muss das Flutter-SDK lokal auf Deinem Rechner abgelegt werden. Hierfür kannst Du entweder das Flutter Github Repo klonen oder Dir über die Flutter-Website die aktuellste stabile Version als zip herunterladen. Um Flutter-Kommandozeilenbefehle ausführen zu können, musst Du noch in Deinen Umgebungsvariablen einen Pfad setzen.

Die Programmiersprache Dart muss nicht separat installiert werden, da sie in dem Flutter-SDK enthalten ist. Das bedeutet, dass Du automatisch durch das Aktualisieren Deiner Flutter-Version auch eine aktuelle Dart-Version erhältst.

2. Entwicklungsumgebung einrichten

Als Entwicklungsumgebungen stehen Dir prinzipiell Android Studio oder Visual Studio Code zur Verfügung. Falls Du IntelliJ IDEA bereits installiert hast, kannst Du dies ebenfalls verwenden, da Android Studio lediglich eine Abwandlung davon ist.

Welche (integrierte) Entwicklungsumgebung die Beste ist, lässt sich pauschal nicht beantworten. Hier kommt es wie so oft auf die persönliche Präferenz an. Android Studio bietet z.B. ein paar interessante Features wie einen Widget-Inspektor, mit dem Du direkt auf dem Gerät den Aufbau Deines Widget-Baums untersuchen kannst oder ein Performance Fenster, mit dem Du die Bildrate Deiner Applikation messen kannst. VS Code hingegen ist leichtgewichtiger und wäre somit wohl eher die erste Wahl für schwächere Geräte. Es besitzt nur die nötigsten Funktionalitäten – weitere können hinzuinstalliert werden.

Nachdem Du Dir eine Entwicklungsumgebung ausgesucht hast, musst Du Dir über den Marketplace das Flutter Plugin installieren. Bei der Installation wirst Du gebeten, Dir ebenfalls das Dart Plugin zu installieren – diesen Dialog einfach bestätigen. Zusätzlich und zu guter Letzt musst Du noch in den Einstellungen die Verlinkung zu Deinem lokalen Flutter-Ordner setzen:

Während des gesamten Einrichtungsprozesses kannst Du mit dem Befehl `flutter doctor` überprüfen, was Du noch benötigst, um entwickeln zu können.

Alles, was in einer Flutter UI gerendert wird, ist ein Widget

Flutter verzichtet dabei auf das Konzept von getrennten Views und View Controllern und vereint alles in einem atomaren Baustein: dem Widget. Dieses kann entweder visuell, wie beispielsweise ein Button, oder auch strukturell, wie z.B. eine Reihe oder eine Spalte, sein.

Widgets sind Klassen, wie man sie aus der objektorientierten Programmierung kennt, welche von einer Widget Parent Klasse erben. Der kleinste gemeinsame Nenner, den alle Widgets gemeinsam haben, ist dabei die build()-Methode, welche vorgibt, was in der UI gerendert werden soll. Widgets unterteilt man in zwei Kategorien: Stateful und Stateless Widgets.

Stateful und Stateless Widgets

Stateless Widgets haben keinen Zustand. Die Verwendung eines Stateless Widgets eignet sich dann, wenn sich das Verhalten eines gewünschten Objekts nicht ändern soll.

Beispiele für Stateless Widgets sind Icon, Text und Image. Mit keinem der genannten Elemente kann ein Benutzer interagieren.

Komplimentär zum Stateless Widget gibt es Stateful Widgets, welche zusätzlich neben der build() Methode noch eine weitere Klasse integrieren müssen, welche von einer Parent Klasse State erbt.

Für den Fall, dass sich Felder im State ändern sollen, verfügen Stateful Widgets über eine setState() Methode. Ein Katalog aller Widgets findet man in der Flutter-Dokumentation.

Wie Du siehst, wird UI in Flutter deklarativ programmiert – durch Schachtelung von Komponenten entstehen sogenannte Widget-Bäume. Falls Dir dieses Konzept fremd ist oder Du mehr über dieses Konzept im Vergleich zu traditioneller imperativer Programmierweise erfahren willst, bietet Flutter hier einen interessanten Blogbeitrag über deklarative UI.

Tipps zur Flutter-Entwicklung

Bevor Du Dich nun mit Tatendrang an Deine erste Flutter-App machst, gibt es hier noch ein paar Tipps, die es zu beachten gilt:

Anforderungen prüfen: Es empfiehlt sich, vor dem Projektstart den Funktionsumfang der zu bauenden App mit bereits bestehenden Flutter-Packages abzugleichen.

Bei eher ungewöhnlichen Features kann es sein, dass es keine (ausgereiften) Plugins für den Anwendungsfall gibt und solch ein Feature viel Arbeitsaufwand mit sich bringt. Da die Flutter-interne Grafik-Engine Skia nur 2D-Rendering unterstützt, müssen Funktionen wie beispielsweise Augmented Reality nativ für die jeweilige Plattform umgesetzt werden (durch sogenannte Platform-Channel), doch das lässt sich gut umsetzten (Wie das ganze in Action aussieht, kannst Du in der PROJECT Investment App ansehen).

Komplexe Widget-Bäume zergliedern: Da das Bauen der UI in Flutter durch das Schachteln von Widgets geschieht, kann man anfangs schnell den Überblick verlieren – besonders, wenn man deklarative UI nicht gewohnt ist.

Hier der Tipp: Ruhig einen Teil des Widget-Baums in ein eigenes Widget verpacken und in eine eigene Klasse auslagern.

Learning by doing: Vermutlich hattest Du noch keinen Kontakt mit Dart und wärst verleitet, einen Einführungskurs zu durchlaufen. Lass Dich von Dart nicht abschrecken, es ist leicht zu erlernen und kann zum Großteil wie Java oder vergleichbare OOP-Sprachen geschrieben werden. Dart-spezifische Kniffe lernst Du, sobald Du diese benötigst.