🕊️ Flutter – Das Cross-Plattform UI Framework
Seit Flutter 2018 von Google als “Stable” released worden ist, hat sich das Framework rasant entwickelt. Mit Flutter ist es möglich performante und schöne Apps zu programmieren. Eingesetzt wird die Sprache Dart.
Dart ist eine objektorientierte Programmiersprache. Es lohnt sich für Programmierer und Informatikstudenten sich mit der Sprache zu beschäftigen. Denn das Cross-Plattform-Framework bietet viele Vorteile.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
https://flutter.dev/
✔️ Was sind die Vorteile von Flutter?
💙 Schöne Apps für Android, iOS und das Web
Es ist sehr einfach mit dem UI Framework schöne und performante Apps zu programmieren. Schon in wenigen Wochen kannst du genug lernen, um kleinere Projekte in die Tat umzusetzen.
Klingt doch gut, oder?
Flutter ist noch sehr jung und trotzdem funktioniert es bemerkenswert gut.
Flutter unterstützt die nativen Designkonzepte von iOS mit Cupertino und von Android mit dem Material Design.
Die Entwicklung schöner, nutzerfreundlicher und performanter Oberflächen geht mit Flutter Hand in Hand.
Auch Animationen lassen sich sehr leicht erstellen.
Dies liegt unter anderem daran, dass Flutter nicht die typischen UI-Frameworks der jeweiligen Betriebssysteme nutzt. Das Framework nutzt seine eigene Implementierung, welche auf einer C++ Engine basiert.
Das Rendering verhält sich eher wie bei einer Game Engine als wie bei einer normalen App, so wie man sie kennt. Das Design wird mit stattlichen 60 Frames pro Sekunde mithilfe der sehr performanten Skia Grafikbibliothek gerendert.
Foto von Vova Krasilnikov auf Pexels
Alle UI Elemente werden als sogenannte Widgets abgebildet. In Flutter gilt der Satz “Everything is a widget”.
So kannst du Apps erschaffen, welche auf jedem Betriebssystem gut aussehen. Und nebenbei laufen diese Apps, dank den 60 FPS, wunderbar flüssig.
Aus eigener Erfahrung kann ich sagen:
Es macht richtig Spaß, solche Apps zu bedienen.
💻 Entwickeln mit Flutter
Wenn du mit dem Framework arbeiten möchtest, dann stehen zwei sehr mächtige Werkzeuge zur Verfügung:
Visual Studio Code und Android Studio.
Vor allem mit Android Studio, welches auf der bewährten IntelliJ-IDE basiert, kannst du auch sehr umfangreiche Projekte bewältigen.
Flutter ist darauf ausgelegt möglichst entwicklerfreundlich zu sein. Zwar erscheint die Alles-Ist-Ein-Widget-Philosophie zunächst fremdartig, bietet nach einer kleinen Einarbeitung eine angenehme Umgebung um Apps der neuen Generation zu entwickeln.
Mit dem Feature Hot Reload ist es möglich in sekundenbruchteilen Änderungen zu betrachten. Und keine Angst: Wenn es wirklich der Fall sein sollte, dass du native, gerätespezifische Funktionen benötigst, dann ist dies kein Problem. Denn du hast die Möglichkeit über sogenannte Plattform-Channels direkt mit den nativen Funktionen auf der jeweiligen Plattform zu kommunizieren.
🎯 Die Sprache Dart™
Dart ist eine Programmiersprache von Google. Eine andere Bezeichnung ist dartlang. Dart hat eine ähnliche Syntax wie Kotlin oder C++ und ist objektorientiert. Weiterhin hat Dart ein strenges Typsystem, was dem einen oder anderen Programmierer sehr gefallen wird.
Zur Ausführung kommt ein JIT-Compiler. Das bedeutet, dass der Sourcecode erst kurz vor der Ausführung in Maschinencode übersetzt wird. Java nutzt auch einen JIT-Compiler.
Durch das JIT Konzept ist es möglich sehr schnell zu entwickeln. Da bei Codeänderungen der entsprechende Code lediglich ausgetauscht wird. Dieses “austauschen” nennt sich “Hot Reload”.
Kompiliert man aber die App für den Release, dann wird ein AOT-Compiler eingesetzt. Dieser Code startet schneller und hat andere Eigenschaften, als der JIT-Compiler.
Wenn du mehr darüber erfahren möchtest, dann schau auf dart.dev/platforms vorbei.
❔ Flutter FAQ
Ja, mit dem Flutter Framework und der Programmiersprache Dart musst du den Code nur einmal schreiben und trotzdem läuft die App auf Android, iOS und im Browser mit Flutter Web.
Sehr schnell! Durch das wahnsinnig schnelle Hot Reload Feature kannst du Änderungen sofort sehen. Wenn man erst einmal den Dreh mit Widgets raus hat, dann kann man ruckzuck schöne UIs erstellen.
Nein, Flutter hat keinen UI Editor. Zwar kannst du mit der richtigen IDE für Flutter sehr schnell Oberflächen erstellen, aber weder Visual Studio Code noch Android Studio haben einen visuellen Layout-Editor. Das ist aber auch nicht nötig. Wenn du dich mit dem Widget-Tree vertraut gemacht hast, dann brauchst du keinen visuellen UI Editor mehr.
Ja, Flutter wird auch Desktop-Anwendungen supporten. Flutter Web ist derzeit in der Beta-Version und Flutter-Desktop in der Alpha-Version.
Flutter beinhaltet sehr viele Animationen für deine App. Dabei kannst du auch sehr flexibel eigene Animationen erstellen. Hier findest du ein super (englisches) Video dazu: Flutter Europe: Animations done right
Ja, Flutter enthält Lösungen für Integrations-Tests und Unit-Tests.
Die Bibliothek http bietet eine vielzahl an Funktionen.
Ich empfehle das SSH-Plugin, um mit SFTP auf deinen Server zuzugreifen.
📱 Einstieg in Flutter
Du kannst dich entscheiden ob du Visual Studio Code oder Android Studio nutzt.
Während Visual Studio Code ein sehr moderner Code-Editor ist, bietet Android Studio alle Funktionen einer vollwertigen IDE. Und dies ist kein Wunder, denn Android Studio basiert auf der mächtigen Entwicklungsumgebung IntelliJ.
Es ist auch möglich mit der Community Edition von IntelliJ zu arbeiten. Empfehlen würde ich dir allerdings Android Studio.
Zwar ist dies vielleicht am Anfang etwas überwältigend, bringt dir aber längerfristig wertvolle Erfahrungen. Denn wenn man sich in Android Studio erst einmal eingearbeitet hat, dann kann man damit wirklich komfortabel entwickeln.
Flutter SDK einrichten
Zunächst musst du das SDK installieren. Dafür bietet Flutter bereits eine gute Anleitung auf Englisch zur Installation des SDK. Trotzdem führe ich dich hier Schritt für Schritt durch die Installation.
Zunächst musst du hier dein Betriebssystem auswählen. Da das Windows Betriebssystem bei Endusern am weitesten verbreitet ist, zeige ich die Anleitung hierfür. Wenn du ein anderes Betriebssystem hast, dann sollte es nicht schwer sein, die Anleitung entsprechend abzuändern.
Lade dir nun das SDK herunter. Eigentlich ist es dann egal wohin du es entpackst. Anzuraten ist aber, dass du einen Ordner nutzt, für den keine Administratorrechte erforderlich sind. Zum Beispiel könntest du einen Unterordner auf C:\ anlegen. Die offizielle Anleitung für Flutter schlägt hier C:\src\flutter vor, aber C:\flutter tut es sicherlich auch.
Wenn du das ganze mit dem Terminal erledigen willst, dann geht das ganz einfach. Starte das Terminal in dem du das Wort “Terminal” in die Windows Suche eingibst. Dann schreibst du ins Terminal (Powershell):
cd C:\
mkdir flutter
cd flutterJetzt kannst du das SDK in den Ordner entpacken. Alternativ kannst du dir natürlich auch das Flutter Repository mit Git clonen:
cd C:\
git clone https://github.com/flutter/flutter.git -b stableCode language: PHP (php)Sehr gut! Damit hast du das Flutter SDK installiert. Damit du es aber von überall in Windows nutzen kannst, musst du dir noch deine Pfadvariablen anpassen.
Umgebungsvariablen für Flutter einrichten
Wenn du Flutter in jedem Terminalfenster von jedem Ort aus nutzen möchtest, musst du Flutter deinen Umgebungsvariablen hinzufügen. Ich würde dir das auf jeden Fall empfehlen.
Zum Optionsfenster für Umgebungsvariablen kommst du in Windows ganz einfach in dem du “env” in die Suchleiste eingibst.
Also Windows-Taste ➡️ env ➡️ Enter.
Alternativ kannst du es mit dem Suchbegriff “Umgebungsvariable” probieren.
Im nächsten Fenster im oberen Teil siehst du deine Umgebungsvariablen.
Ein bestimmter Eintrag nennt sich “Path”. Dieser Eintrag ist wichtig für dich.
Der Wert dieser Variable enthält alle Programme, welche du vom Terminal aus direkt ausführen möchtest.
So kannst du zum Beispiel einfach “flutter pub get” schreiben um deine Dependencies in einem Projekt zu updaten.
Klicke also nun “Path” im oberen Teil des Fensters an und dann auf “Bearbeiten”.
Dann musst du, je nach Windows Version, entweder die Pfadvariable direkt bearbeiten oder die Oberfläche dazu nutzen.
Wenn du im Fenster rechts einen “Neu”-Button siehst, dann klicke diesen an. Füge dann “C:\flutter\bin” beziehungsweise deinen gewählten Pfad zu Flutter ein. Wenn du Flutter mit Git gecloned hast, dann prüfe noch einmal den richtigen Pfad.
Ansonsten, wenn es keinen “Neu”-Button gibt, dann füge den Pfad hinter einem ; hinter den bestehenden Einträgen ein.
Sehr gut, jetzt bist du fertig. Starte alle offenen Terminal-Fenster neu, damit die Änderungen wirksam werden. Sollte es noch nicht funktionieren, dann starte deinen Computer neu.
Im nächsten Schritt erzähle ich dir, wie du testest ob alles geklappt hat.
Installation prüfen
Flutter enthält ein Diagnose-Programm, welches dir Informationen über deine Installation zeigt. Das ist sehr nützlich, weil es dir auch Fehler anzeigen kann. Starte also ein Terminal-Fenster und führe folgenden Befehl aus:
flutter doctorSollten dir noch Fehler angezeigt werden, dann mach dir keine Sorgen. Das ist ganz normal. Im nächsten Bild zeige ich dir, wie die Ausgabe ungefähr aussehen sollte.
Im nächsten Kapitel zeige ich dir wie du die restlichen Punkte einrichtest. Dafür müssen wir nämlich Android Studio installieren.
Android Studio als Flutter IDE einrichten
Mit dem Android Studio kannst du Flutter-Apps erstellen. Außerdem benötigst du die IDE um alle notwendigen Tools für die Android-Entwicklung schnell und einfach zu installieren. Dabei sind die Installationsschritte auf jedem Betriebssystem fast identisch.
Installiere dir zunächst die neueste Version von Android Studio.
Unter Datei ➡️ Settings ➡️ Plugins oder durch doppeltes Drücken der Shift-Taste unter dem Suchbegriff “Plugins” findest du den Plugin-Marktplatz von Android Studio.
Von dort kannst du dir Flutter installieren. Wirst du bei der Installation nach Dart gefragt, dann installiere dir auch das Dart Plugin. Danach ist ein Neustart nötig. Jetzt sollte das Plugin eingerichtet sein.
Unter Datei ➡️ Neu solltest du nun die Option “Neues Flutter Projekt” sehen. Wenn du dir ein solches anlegst, sieht du bereits den ersten Code. Es wird automatisch ein Beispielprojekt angelegt, welches du sofort auf einen Emulator oder einem Smartphone starten kannst.
🔗 Ressourcen und Links
Wenn du dich in das Framework ein wenig eingearbeitet hast, dann wird es Zeit weiterführende Konzepte kennenzulernen. Ein guter Ausgangspunkt hierfür ist meiner Meinung nach das State-Management.
Um saubere Apps zu schreiben ist es notwendig die Oberfläche von der Funktionalität zu trennen. Sonst können Flutter-Apps auch sehr schnell in unübersichtlichen Code enden.
Wenn du dich mit State-Management beschäftigst, lernst du auch gleich wie Apps sauber aufgebaut werden. Ich würde Provider empfehlen. Das hat zwar auch schwächen, aber wenn du Provider erst einmal verstanden hast, dann kannst du die anderen Methoden auch besser einschätzen.
Wenn du sehen möchtest was für beeindruckende Apps du erstellen kannst, schau dir die Beispiele an. Außerdem ist Flutter jetzt auf Codepen. So kannst du Flutter blitzschnell und einfach ausprobieren. Und solltest du dich fragen was es bisher schon an Bibliotheken gibt, dann schau dich einfach auf pub.dev ein wenig um. Es ist auch immer sinnvoll sich mit Büchern weiterzubilden.
Ein weiterer Grund, warum du dich in Flutter so schnell einarbeiten kannst ist, dass es verschiedene Tutorials für mobile Entwickler gibt. Wenn du also schon Erfahrung mit Android, iOS, Web, React Native
oder Xamarin.Forms hast, gibt es immer den passenden Einstieg für dich.
Titelbild: Foto von Frank Cone auf Pexels
Dart and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.
Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.
Daniel Kreiter
- Daniel