Ein blauer Vogel auf einem Ast

🕊️ Flutter™ – Einstieg, Tutorial und Überblick 🕊️

Flutter – das Cross-Plattform UI Framework von Google. Ein Code für beide Betriebssysteme, Android und iOS. Flutter erleichtert die plattformunabhängige Entwicklung enorm. Mit Flutter Web können die Anwendungen auch in Browsern ausgeführt werden.

In diesem Artikel erfährst du was Flutter ist, wie du damit Anfängst und welche Flutter IDE du am besten dafür nutzt. Außerdem bekommst du alle notwendigen Links, um tiefer in Flutter einzusteigen.

🕊️ 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 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?

  • Flutter erstellt performante Apps für iOS und Android
  • Mit Flutter Web kann die App im Browser ausgeführt werden
  • Das neue Betriebssystem von Google – Fuchsia – wird voraussichtlich Flutter Apps ausführen können
  • Mit der richtigen Flutter IDE kannst du sehr schnell Apps entwickeln
  • Ein gutes UI-Framework mit vielen existierenden UI-Elementen
  • Flutter ist ein Open Source Framework

Klingt gut? In diesem Artikel gebe ich dir einen Überblick, sodass du einfach und schnell mit Flutter durchstarten kannst!

💙 Schöne Apps für Android, iOS und das Web

Das Flutter Logo
Quelle: Flutter.dev – https://flutter.dev/brand

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.

Handy in der Hand einer Person.

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.

Es 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.

Flutter IDE - Android Studio und Flutter
Das Flutter Framework in Android Studio

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

Braucht man wirklich nur einen Code für Android und iOS?

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.

Wie schnell kann man mit dem Framework entwickeln?

Sehr schnell! Durch das wahnsinnig schnelle Hot Reload Feature kannst du Änderungen sofort sehen. Und wenn man erst einmal den Dreh mit Widgets raus hat, dann kann man ruckzuck schöne UIs erstellen.

Hat Flutter einen UI Editor?

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.

Kann man mit Flutter auch Anwendungen fürs Desktop erstellen?

Ja, Flutter wird auch Desktop-Anwendungen supporten. Flutter Web ist derzeit in der Beta-Version und Flutter-Desktop in der Alpha-Version.

Kann ich mit Flutter Animationen erstellen?

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

Enthält Flutter ein Test-Framework?

Ja, Flutter enthält Lösungen für Integrations-Tests und Unit-Tests.

Was gibt es für HTTP Bibliotheken?

Die Bibliothek http bietet eine vielzahl an Funktionen.

Was gibt es für FTP Bibliotheken für Flutter?

Ich empfehle das SSH-Plugin, um mit SFTP auf deinen Server zuzugreifen.


📱 Einstieg in Flutter

🕊️ Flutter™ - Einstieg, Tutorial und Überblick 🕊️
Bildautor: Breakingpic | www.pexels.com/@breakingpic

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

Windows Terminal mit Flutter
Windows Terminal mit Flutter

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 dir hier Schritt für Schritt durch die Installation.

Zunächst musst hier du 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.

Auswahl der Betriebssysteme für das Flutter SDK
Auswahl der Betriebssysteme für das Flutter SDK. Quelle: Flutter.dev
Für Windows Nutzer: Ich empfehle dir, dass neue Windows Terminal zu nutzen. Du kannst es im Microsoft Store herunterladen. Es hat eine Menge Vorteile gegenüber der klassischen Windows Eingabeaufforderung. Zum Beispiel hast du direkt im Fenster die Powershell integriert. Und wenn du das Linux Subsystem installiert hast, dann kannst du auch direkt eine Linux-Shell öffnen. Die einzige Kritik, die ich an dem neuen Windows Terminal habe, ist der Datenschutz. Informiere dich gegebenenfalls, wenn dir der Datenschutz hier wichtig ist.
🕊️ Flutter™ - Einstieg, Tutorial und Überblick 🕊️
Screenshot des Download-Buttons für das Flutter-SDK. Quelle: Get-Started

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 flutter

Jetzt 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 stable

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.

Screenshot der Umgebungsvariablen in Windows, um Flutter als Umgebungsvariable einzutragen.
Screenshot der Umgebungsvariablen in Windows.

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 zeig. Das ist sehr nützlich, weil es dir auch Fehler anzeigen kann. Starte also ein Terminal-Fenster und führe folgenden Befehl aus:

flutter doctor

Sollten 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.

Ausgabe im Terminal von Flutter doctor
Ausgabe im Terminal von Flutter doctor

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

Screenshot der Downloadseite von Android Studio
Screenshot der Downloadseite von Android Studio

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.

🕊️ Flutter™ - Einstieg, Tutorial und Überblick 🕊️
Screenshot des Willommens-Dialog in 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.

Flutter Plugin-Installation in Android Studio
Flutter Plugin-Installation in Android Studio

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.

Eine Glühbirne auf einer Tafel, mit Gedankenblasen außen herrum
Bildautor: TeroVesalainen | TeroVesalainen @ pixabay.com

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.

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Was dir auch gefallen könnte