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 (https://code.visualstudio.com/). 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-Webseite (https://docs.flutter.dev/get-started/install) und klicke auf „Get started“. Dort findest du eine Anleitung zur Installation von Flutter auf verschiedenen Betriebssystemen. Wähle dein Betriebssystem aus und befolge die Anweisungen.
Für Windows-Benutzer bedeutet dies, dass du die Flutter SDK herunterladen musst. Öffne einen Webbrowser und gehe auf https://flutter.dev/docs/get-started/install/windows. Dort findest du eine Anleitung zum Herunterladen der Flutter SDK. Sobald der Download abgeschlossen ist, extrahiere das Archiv in ein Verzeichnis, auf das du zugreifen kannst (z.B. C:\src\flutter).
Für Mac-Benutzer bedeutet dies, dass du das Flutter SDK über den Terminal-Befehl installieren musst. Öffne ein Terminal-Fenster und gib den folgenden Befehl ein:
$ git clone https://github.com/flutter/flutter.git -b stable
Dies lädt das Flutter-Repository herunter. Nachdem der Download abgeschlossen ist, navigiere zum Verzeichnis, in dem du das Repository heruntergeladen hast, und führe den folgenden Befehl aus, um Flutter in deinem Verzeichnisbaum zu installieren:
$ export PATH="$PATH:`pwd`/flutter/bin"
Für Linux-Benutzer bedeutet dies, dass du das Flutter SDK ebenfalls über den Terminal-Befehl installieren musst. Öffne ein Terminal-Fenster und gib den folgenden Befehl ein:
$ sudo apt-get update
$ sudo apt-get install curl
$ curl -s https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_2.8.0-st
Schritt 3: Installiere die Android SDK
Du solltest jetzt Flutterbefehle im Terminal ausführen können. Probiere es aus und gib ein:
$ flutter doctor
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:
cd <Verzeichnispfad>
Ersetze „<Verzeichnispfad>“ durch den tatsächlichen Pfad auf deinem System.
Dann führst du den folgenden Befehl aus:
flutter create myfirstapp
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:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Meine erste Flutter-App',
home: Scaffold(
appBar: AppBar(
title: Text('Willkommen!'),
),
body: Center(
child: Text('Hallo, Flutter!'),
),
),
);
}
}
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!
