1. Hallo und herzlich willkommen zum heutigen Blogartikel, in dem ich dir zeigen werde, wie du Flutter installieren und deine erste App programmieren kannst. Egal, ob du ein Windows-, Mac- oder Linux-Benutzer bist, wir werden alle notwendigen Schritte durchgehen, damit du ohne Probleme deine erste Flutter-App erstellen kannst.

Stell dir vor, du möchtest dein erstes Auto fahren, aber bevor du losfahren kannst, musst du es erst einmal aus dem Autohaus abholen. Genauso ist es mit der Installation von Flutter. Bevor du deine erste App programmieren kannst, musst du Flutter auf deinem Computer installieren. Hier sind die Schritte, die du befolgen musst:

 

Schritt 1: Installiere Visual Studio Code

Visual Studio Code ist eine kostenlose Code-Editor-Software von Microsoft, die für die Programmierung von Flutter-Apps benötigt wird. Öffne einen Webbrowser und gehe auf die offizielle Webseite von Visual Studio Code. Klicke auf den Download-Button für dein Betriebssystem (Windows, Mac oder Linux). Sobald der Download abgeschlossen ist, führe die Installationsdatei aus, indem du darauf doppelklickst und den Anweisungen auf dem Bildschirm folgst.

 

Schritt 2: Installiere Flutter

Als nächstes müssen wir Flutter installieren. Flutter ist ein Open-Source-Framework von Google für die Entwicklung von nativen Apps für mobile Geräte, Web und Desktop. Gehe auf die offizielle Flutter-Website. Dort findest du eine Anleitung zur Installation von Flutter auf verschiedenen Betriebssystemen. Wähle dein Betriebssystem aus und befolge die Anweisungen.

Auf allen Betriebssystemen solltest du zuerst die das Flutter SDK herunterladen. Gehe auf die Flutter Website und schau dir je nach deinem Betriebssystem die Installationsanleitung für Windows oder für MacOS an. Dort lädst du das Flutter SKD in Form einer ZIP Datei herunter. Entpacke jetzt diese ZIP-Datei in einem Ordner, auf den du zugreifen kannst und dessen Pfad möglichst keine Sonder- oder Leerzeichen enthält (zum Beispiel C:\dev\).

Um nun Flutter-Befehle im Terminal nutzen zu können, musst du den bin-Ordner innerhalb deines neuen Flutterverzeichnisses im Pfad unter den Umgebungsvariablen deines Benutzers angeben. 

Windows:

 

  1. Systemeinstellungen öffnen
    Drücke die Tastenkombination Windows + Pause.
    Falls deine Tastatur keine Pause-Taste hat, versuche Windows + Fn + B.
    Daraufhin öffnet sich das Fenster System > Info.

  2. Erweiterte Systemeinstellungen aufrufen
    Klicke auf Erweiterte Systemeinstellungen > Reiter Erweitert > Umgebungsvariablen….
    Das Dialogfeld Umgebungsvariablen wird angezeigt.

  3. Path-Eintrag bearbeiten oder erstellen
    Im Abschnitt Benutzervariablen für (Benutzername) suche den Eintrag Path.

    • Falls der Eintrag existiert:
      Doppelklicke darauf. Es öffnet sich das Dialogfeld Umgebungsvariable bearbeiten.
      Klicke auf eine leere Zeile und gib %USER%\dev\flutter\bin ein. (%USER% sollte durch deinen Benutzernamen ersetzt werden)
      Wähle anschließend den neu hinzugefügten Pfad aus und klicke auf Nach oben verschieben, bis der Eintrag ganz oben steht.
    • Falls der Eintrag nicht existiert:
      Klicke auf Neu….
      Gib im Feld Variablenname Path ein und im Feld Variablenwert %USER%\dev\flutter\bin.
  4. Änderungen speichern
    Bestätige die Eingaben, indem du dreimal auf OK klickst.

  5. PowerShell aktualisieren
    Um die Änderungen zu übernehmen, schließe und öffne alle bestehenden PowerShell- oder Eingabeaufforderung-Instanzen.

 
MacOS:
  1. Texteditor starten
    Öffne deinen bevorzugten Texteditor.

  2. Zsh-Umgebungsvariablen-Datei bearbeiten oder erstellen
    Wenn die Datei ~/.zshrc existiert, öffne sie im Texteditor. Falls sie nicht existiert, erstelle eine neue Datei mit dem Namen ~/.zshrc. (Mache versteckte Dateien im Finder sichtbar durch Shift + Command + .

  3. Pfad hinzufügen
    Kopiere die folgende Zeile und füge sie am Ende der Datei ~/.zshrc ein:

    export PATH=$HOME/development/flutter/bin:$PATH
     
  4. Änderungen speichern
    Speichere die Datei ~/.zshrc.

  5. Terminal-Sitzungen neu starten
    Um die Änderungen zu aktivieren, schließe alle offenen Terminals und starte sie neu.

 

 

Du solltest jetzt Flutterbefehle im Terminal ausführen können. Probiere es aus und gib ein:

 

Schritt 3: Installiere die Android SDK

Als Ergebnis sollte es dir anzeigen, dass du das Android SDK noch nicht installiert hast. In Zukunft empfehle ich dir, den Befehl „flutter doctor“ immer dann zu wiederholen, wenn du einen Konfigurationsschritt abgeschlossen hast oder wenn Bugs auftreten, die du dir nicht direkt erklären kannst. Manchmal gibt die Ausgabe Aufschluss darüber, was genau das Problem ist.

Jetzt wird es Zeit, das Android SDK zu installieren! Geh auf https://developer.android.com/studio und lade dir die aktuellste Version von Android Studio herunter. Installiere die Version und öffne dann Android Studio. Das Programm führt dich dann durch einen Setup-Wizard. Befolge alle Schritte und dann hast du Android auch schon eingerichtet! Gib im Terminal erneut „flutter doctor“ ein und nun sollte Android von Flutter erkannt werden.


Schritt 4: Erstelle dein erstes Flutter-Projekt

Jetzt sind wir bereit, dein erstes Flutter-Projekt zu erstellen. Öffne Visual Studio Code und navigiere zum Terminal am unteren Bildschirmrand. Wir gehen jetzt davon aus, dass du ein Projekt mit dem Namen myfirstapp erstellen möchtest. Dazu navigierst du zuerst zu dem Verzeichnis, in dem du das Projekt anlegen willst:

Ersetze „<Verzeichnispfad>“ durch den tatsächlichen Pfad  auf deinem System.

Dann führst du den folgenden Befehl aus:

Für weitere Projekte kannst du später einfach „myfirstapp“ durch den Projektnamen ersetzen.

Der Befehl wird nun das Skelett deiner Flutter-App erstellen. Dies beinhaltet eine Hauptdatei namens „main.dart“, die das Grundgerüst deiner App enthält.


Schritt 5: Erstelle die Benutzeroberfläche

Jetzt kannst du die Benutzeroberfläche deiner App erstellen. Dazu musst du das Widget-System von Flutter verstehen. Widgets sind die grundlegenden Bausteine der Benutzeroberfläche in Flutter. Jede Flutter-App besteht aus vielen Widgets, die in einem Baum angeordnet sind.

Erstelle ein neues Widget, indem du in der Datei „main.dart“ den folgenden Code eingibst:

Dieser Code erstellt ein einfaches Flutter-Widget, das eine Titelleiste („AppBar“) und einen zentral ausgerichteten Text enthält. Speichere die Datei und führe die App aus, indem du auf „Run“ klickst.

Das war’s! Du hast deine erste Flutter-App erstellt. Im nächsten Schritt werden wir die App testen.

 

Schritt 6: Teste deine App

Nachdem du die App erstellt hast, ist es an der Zeit, sie zu testen. Klicke auf „Run“, um die App in deinem Simulator oder auf deinem verbundenen Gerät zu starten. Wenn du Flutter auf einem Emulator ausführen möchtest, stelle sicher, dass du einen Emulator eingerichtet hast, bevor du auf „Run“ klickst.

Sobald die App gestartet ist, solltest du „Hallo, Flutter!“ auf dem Bildschirm sehen. Gratulation, du hast deine erste Flutter-App erstellt!

 

Schritt 7: Erweitere deine App

Nun, da du deine erste Flutter-App erstellt hast, ist es an der Zeit, sie zu erweitern. Du kannst weitere Widgets hinzufügen und deine App interaktiver machen. Experimentiere mit verschiedenen Widgets und erstelle eine einzigartige Benutzeroberfläche.

Eine gute Ressource für Flutter-Widgets ist die offizielle Flutter-Dokumentation, die eine umfangreiche Liste von Widgets und Beispielen enthält.

 

Fazit

Flutter ist eine großartige Möglichkeit, um plattformübergreifende Apps zu erstellen. Mit der richtigen Anleitung und etwas Übung kannst du schnell lernen, wie man Flutter installiert und seine erste App erstellt. Nutze die offizielle Dokumentation und Online-Ressourcen, um dein Wissen zu erweitern und deine Flutter-Fähigkeiten zu verbessern. Viel Spaß beim Programmieren deiner eigenen Flutter-Apps!