Nach dem Unterricht der letzten Lektion haben Sie sicherlich die Flutter-Entwicklungsumgebung installiert. In dieser Lektion entwickeln wir Flutter mit Android Studio.
Flutter-Plug-in installieren
Standardmäßig unterstützt Android Studio Flutter nicht, daher muss ein Flutter-Plug-in installiert werden.
Öffnen Sie Android Studio und gehen Sie über die obere Menüleiste zu File → Settings (Tastenkürzel Ctrl+Alt+S)
Suchen Sie links den Bereich Plugins, suchen Sie nach „flutter“, klicken Sie auf Installieren und starten Sie Android Studio nach der Installation neu.
Flutter SDK-Pfad konfigurieren
Die Plug-in-Installation allein reicht nicht aus, Sie müssen zudem den Pfad zum Flutter SDK in Android Studio festlegen.
File → Settings → Languages & Frameworks → Flutter
Datei Einstellungen Sprachen und Frameworks flutter
Wählen Sie den obersten Flutter-Ordner aus, nicht den Unterordner bin. Klicken Sie anschließend auf die Schaltfläche Apply.
Warten Sie, bis Installation und Konfiguration abgeschlossen sind.
Projekt erstellen
Danach funktioniert die Vorgehensweise genau wie bei der Erstellung eines normalen Projekts in Android Studio.
Wählen Sie Flutter aus, geben Sie rechts erneut den Flutter-Ordnerpfad an und klicken Sie auf Next.
Legen Sie anschließend Projektnamen, Speicherort, Projektbeschreibung und eine eindeutige Organisations-ID fest. Diese ID muss eindeutig sein, wenn Sie die App im Google Play Store veröffentlichen, daher empfehle ich, Ihre Domain rückwärts zu schreiben. Ich verwende hier das Format com.foxdevelop.Projektname. Wählen Sie danach die Android-Basissprache aus: dies ist keine Entwicklungssprache, sondern die Sprache der nativen Android-Hülle, die eigentliche Entwicklung erfolgt weiterhin in Dart. Der Bereich Platforms listet alle Systeme auf, auf denen Sie Ihren Code kompilieren und veröffentlichen möchten. Ich habe hier Android, Web und Windows Desktop ausgewählt, um das Projekt als diese Formen herauszugeben; markieren Sie iOS, Linux oder macOS, falls Sie diese Plattformen ansprechen wollen. Klicken Sie zum Schluss auf Create.
Hinweis: Der Projektname darf nur Kleinbuchstaben enthalten, keine Leerzeichen oder Sonderzeichen.
Android Studio beginnt nun mit der Projekterstellung, dieser Vorgang kann einige Zeit dauern.
Bei mir ist hier dieser Fehler aufgetreten.
Klicken Sie auf Run Flutter Doctor, um das Flutter-Diagnosetool zur Umgebungsprüfung zu starten.
Öffnen Sie danach das Projekt normal.
Oben rechts lässt sich das Projekt jedoch nicht ausführen, es erscheint folgende Anzeige:
Ich habe das Farbthema gewechselt, daher ist Android Studio jetzt im hellen Modus.
Auf dem obigen Screenshot sehen Sie ein rotes X, klicken Sie darauf.
Klicken Sie auf Edit Configurations (Konfigurationen bearbeiten).
Es wird gemeldet, dass das Dart SDK nicht konfiguriert ist, klicken Sie rechts auf Fix.
Sie müssen den Pfad zum Dart SDK festlegen: Wenn Flutter installiert ist, befindet sich das Dart SDK im Ordner des Flutter SDK.
Ist Ihr Flutter SDK-Pfad wie folgt:
dann lautet der Pfad zum Dart SDK:
Konfigurieren Sie den Dart-Pfad wie auf dem Bild oben und starten Sie Android Studio anschließend neu.
Danach sehen Sie oben das grüne Dreieck zum Starten. Wenn links Windows Desktop ausgewählt ist, können Sie das Projekt als Windows-Desktopanwendung ausführen; klicken Sie auf das grüne Dreieck, um das Projekt zu starten.
* Fehlerbehebung
Wenn Sie den unten gezeigten Fehler nicht erhalten, können Sie diesen Abschnitt überspringen.
Diese Fehler entstehen, wenn Abhängigkeiten nicht vollständig geladen werden. Bei Netzwerkproblemen können Sie einen Proxy verwenden oder einen Spiegel-Server konfigurieren.
Bei diesen Fehlern richten Sie den Spiegel wie im Screenshot gezeigt im Terminal von Android Studio ein.
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getCode-Sprache: PHP (php)Nach Ausführung dieser Befehle sind alle Fehler beseitigt.
Projekt starten
Klicken Sie auf das Dreieck oben links, um das Projekt zu starten. Flutter unterstützt mehrere Plattformen: Verbinden Sie Ihr Handy mit dem PC und aktivieren Sie den Entwicklermodus zum Debuggen der Android-App, oder nutzen Sie Windows Desktop zum Testen ohne Gerät.
Wie auf dem Bild zu sehen, wählen Sie eine der drei Plattformen aus, die Sie bei der Projekterstellung festgelegt haben. Ich wähle hier Windows Desktop und klicke dann auf das grüne Dreieck zum Starten.
Auf dem Bild sehen Sie unsere erste Flutter-Anwendung. Damit endet diese Lektion. Probieren Sie es selbst aus. Bei Fragen können Sie unten einen Kommentar hinterlassen.