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.
Nützliche Links und Unterlagen zur Flutter-Entwicklung
Wer eine eigene App programmieren möchte, hat dafür zahlreiche Optionen. Baukästen mit einsatzfertigen App-Komponenten erfreuen sich aufgrund ihrer einfachen Nutzbarkeit großer Beliebtheit, doch auch Frameworks zeichnen sich zunehmend dadurch aus, den Entwicklungsprozess für Nutzer so einfach wie möglich zu gestalten. Einer der modernsten Vertreter ist das von Google entwickelte Software Development Kit (SDK) Flutter. Das quelloffene Framework ermöglicht die Entwicklung hoch performanter Mobile Apps (für iOS und Android) sowie von Web- und Desktopanwendungen in der Google-Sprache Dart.
In unserem Flutter-Tutorial stellen wir Ihnen die wichtigsten Schritte zum Einstieg in die Google-SDK vor.
Eine lästige Barriere für frisch entschlossene Android-Programmierer, die Linux als Basis verwenden möchten, errichtet die Installation von Googles Android-Entwicklungsumgebung Android Studio. Der Artikel dröselt das vielteilige Prozedere am Beispiel von Debian 8.2 und Android Studio 2.1 auf.
Es klingt simpel: Android Studio [1] installieren, starten – und die erste App schreiben. In der Realität bringen Entwickler aber oft Stunden damit zu, Googles IDE mit dem eigenen Android-Smartphone oder -Tablet zu verkuppeln. Der Workshop soll dabei helfen, die Qual zu lindern. Als Grundlage dient ihm ein Debian 8.2 [2] mit allen Patches von Ende August 2016. Die grundlegenden Schritte dürften sich auf anderen Distributionen ähneln, können sich im Detail aber unterscheiden, was Paketnamen und Fehlermeldungen angeht.
Vorbereitung ist alles
Auf dem Smartphone versteckt Android einen Entwicklermodus, der Optionen für Programmierer anbietet. Die müssen den Modus allerdings explizit aktivieren. Ab Android 5.0 gilt es, die »Einstellungen« zu öffnen und die Option »Über das Telefon« zu wählen. Dort tippt der Entwickler dann den Eintrag »Build-Nummer« mehrfach an, bis Android den Entwicklermodus freischaltet.
Unter »Einstellungen« wartet der neue Eintrag »Entwickleroptionen« , über den der Programmierer den Punkt »USB-Debugging« aktiviert, über den Android Studio später Kontakt mit dem Telefon aufnimmt. Auf dem getesteten Galaxy S6 mit Android 6.0 fand sich die »Buildnummer« unter »Einstellungen | Geräteinformationen | Softwareinfo« . Mehrfaches Tippen schaltet auch hier die »Entwickleroptionen« frei.
Bevor er aber sein Smartphone per USB-Kabel mit dem Linux-Host verknüpft, sollte der Entwickler zunächst Android Studio einrichten.
Reif für die Insel
Debian installiert das freie Java 1.7.0 vor, das im Paket »openjdk-7-jdk« steckt. Android Studio empfiehlt jedoch Oracles Java in Version 8. Wer dem Hinweis folgen möchte, muss ein paar Extraschritte gehen, die das Debian-Wiki [3] auflistet.
Zunächst gilt es, in der »/etc/apt/sources.list« eine Zeile zu ergänzen, die eine zusätzliche Installationsquelle anzapft:
deb jessie main contrib
Damit Debian die neue Paketquelle auch einliest, aktualisiert der Entwickler die Liste, um dann Java zu installieren:
apt-get update && apt-get install java-package
Wer jetzt glaubt, er hole sich Java 8 auf den Rechner, der irrt. Das Paket hilft nur beim Bau eines installierbaren Java-8-Pakets – und das braucht als weitere Zutat noch Java 8 von Oracle, das
wget
aus dem Internet holt. Die URL ändert sich dank neuer Java-Versionen regelmäßig. Der Entwickler packt das Tar.gz-Archiv nicht aus, es genügt, auf der Kommandozeile ins Verzeichnis zu wechseln, in dem es beim Download landet. Dort baut ihm ein beherztes
Leave a Comment