Flutter-Entwicklungsumgebung installieren

Das Framework für die Entwicklung von mobilen Apps. Desktop und Web ebenfalls.

Inhaltsverzeichnis

Jetzt muss ich die App im Google Play Store aktualisieren, um das neue Android SDK zu verwenden, daher poliere ich und veröffentliche diesen alten Howto, den ich vor ein paar Jahren geschrieben habe.

Logik-Fehler-Erkennungs-App auf der Google PlayStore-Seite Screenshot

Ein Ausschnitt aus der PlayStore-App-Seite.

Dieses Howto wurde ursprünglich im August 2022 geschrieben und im April 2024 aktualisiert und veröffentlicht. Aufgrund dessen kann es einige veraltete Informationen enthalten.

Wie

Schritte zum Installieren von Flutter auf einem Linux-PC

Installieren von Entwicklungstools

https://docs.flutter.dev/get-started/install/linux/android

Tools prüfen

which bash file mkdir rm which

Pakete installieren

sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

Pakete für Android-App-Entwicklung installieren

sudo apt-get install \
    libc6:i386 libncurses5:i386 \
    libstdc++6:i386 lib32z1 \
    libbz2-1.0:i386

Pakete für Linux-App-Entwicklung installieren

sudo apt-get install \
      clang cmake git \
      ninja-build pkg-config \
      libgtk-3-dev liblzma-dev \
      libstdc++-12-dev

Installieren von VSCode

https://code.visualstudio.com/docs/setup/linux

Es gibt einen Link zum Herunterladen des VSCode Debian-Pakets für Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Installieren Sie es wie folgt:

sudo apt install ./<file>.deb

# Wenn Sie eine ältere Linux-Distribution verwenden, müssen Sie stattdessen folgendes ausführen:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Abhängigkeiten installieren

Andere Linux-Distributionen sind auf der Seite “setup/linux” ebenfalls verfügbar.

Installieren Sie Flutter-Erweiterungen für VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Starten Sie den VS Code Quick Open (Strg+P), geben Sie den folgenden Befehl ein und drücken Sie Enter.

ext install Dart-Code.flutter

Installieren von Chrome

Für Webentwicklung – Installieren Sie Chrome:

https://www.google.com/chrome/dr/download/

Installieren von Android Studio

https://developer.android.com/studio/install#linux

Erforderliche Bibliotheken für Ubuntu auf 64 Bit

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

auf OS basierend auf Ubuntu 24.04:

sudo apt-get install libc6:i386 libncurses6:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

Laden Sie die neueste Version von Studio herunter: https://developer.android.com/studio

wechseln Sie in “{installation home}/bin” und geben Sie ein:

./studio.sh

xed ~/.bash_profile

export PATH=$PATH:~/Apps/android-studio/bin

Aktivieren Sie den KVM-Beschleunigungsmodus

https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux

sudo apt-get install cpu-checker
egrep -c '(vmx|svm)' /proc/cpuinfo

Ein Ausgabewert von 1 oder höher bedeutet, dass Virtualisierung unterstützt wird. Ein Ausgabewert von 0 bedeutet, dass Ihr CPU keine Hardware-Virtualisierung unterstützt.

Erwartete Ausgabe:

INFO: /dev/kvm exists
KVM-Beschleunigung kann verwendet werden

Installieren Sie KVM unter Linux Verwenden Sie den folgenden Befehl, um KVM zu installieren:

Cosmic (18.10) oder später:

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

Installieren Sie das Flutter SDK

install sdk https://docs.flutter.dev/get-started/install/linux

https://docs.flutter.dev/get-started/install/linux/android

Kann das SDK manuell oder über VSCode installieren

Manuelle Hinweise:

download https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

cd prj

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

export PATH=$PATH:~/prj/flutter/bin

which flutter

flutter precache

flutter config --no-analytics

flutter config

VSCode Hinweise:

in vs code command (Strg+p)

ext install Dart-Code.flutter

Im Befehlspalette (Strg+Umschalt+p), tippen Sie flutter.

Wählen Sie Flutter: New Project.

VS Code fragt Sie, wo das Flutter SDK auf Ihrem Computer ist.

Wenn Sie das Flutter SDK installiert haben, klicken Sie auf Locate SDK.

Wenn Sie das Flutter SDK nicht installiert haben, klicken Sie auf Download SDK.

Dieser Option sendet Sie zur Flutter-Installationsseite, wenn Sie Git nicht wie in den Entwicklungstools-Voraussetzungen angegeben installiert haben.

Wenn Sie gefragt werden, welche Flutter-Vorlage Sie verwenden sollen, ignorieren Sie dies. Drücken Sie Esc. Sie können ein Testprojekt erstellen, nachdem Sie Ihre Entwicklungsumgebung überprüft haben.

Nach der Installation in ~/Apps

echo 'export PATH="~/Apps/flutter/bin:$PATH"' >> ~/.bash_profile

source ~/.bash_profile

Um das Berichten von Telemetriedaten zu deaktivieren, führen Sie diesen Terminalbefehl aus:

dart --disable-analytics

Installieren von Android Studio

cd in “{installation home}/bin” und geben Sie ein:

./studio.sh

xed ~/.bash_profile

export PATH=$PATH:/home/yourname/Apps/android-studio/bin

https://docs.flutter.dev/get-started/editor

  • Starten Sie VS Code.

  • Rufen Sie Ansicht > Befehlspalette… auf.

  • Geben Sie „install“ ein, und wählen Sie Erweiterungen: Erweiterungen installieren.

  • Geben Sie „flutter“ in das Suchfeld für Erweiterungen ein, wählen Sie Flutter aus der Liste und klicken Sie auf Installieren. Dies installiert auch die erforderliche Dart-Plugin.

  • Rufen Sie Ansicht > Befehlspalette (Strg+Umschalt+P) auf.

  • Geben Sie „doctor“ ein, und wählen Sie Flutter: Flutter Doctor ausführen. (oder führen Sie flutter doctor im Terminalfenster aus)

  • Überprüfen Sie die Ausgabe im OUTPUT-Pane auf Probleme. Stellen Sie sicher, dass Sie Flutter aus der Dropdown-Liste in den verschiedenen Ausgabeeinstellungen auswählen.

Checkup

flutter doctor

[!] Android-Toolchain - für Android-Geräte entwickeln (Android SDK Version 34.0.0)
    ✗ cmdline-tools-Komponente fehlt
      Führen Sie `path/to/sdkmanager --install "cmdline-tools;latest"` aus
      Siehe https://developer.android.com/studio/command-line für weitere Details.
    ✗ Android-Lizenzstatus unbekannt.
      Führen Sie `flutter doctor --android-licenses` aus, um die SDK-Lizenzen zu akzeptieren.
      Siehe https://flutter.dev/docs/get-started/install/linux#android-setup für weitere Details.
[✗] Chrome - für das Web entwickeln (Chrome-Executable kann nicht an google-chrome gefunden werden)
    ! Chrome kann nicht gefunden werden. Versuchen Sie, CHROME_EXECUTABLE auf ein Chrome-Executable zu setzen.
[✓] Linux-Toolchain - für Linux-Desktop entwickeln

Um cmdline-tools zu installieren:

  • Öffnen Sie Android Studio,
  • dann SDK (in mehr),
  • dann aktivieren Sie Android SDK cmdline-tools latest,
  • dann klicken Sie auf Anwenden

Lizenzen akzeptieren

flutter doctor --android-licenses

Wenn Sie Chromium verwenden:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Prüfen der Flutter-Version und Upgrades

Flutter-Version prüfen:

flutter --version

Um die Flutter-Version zu aktualisieren, führen Sie aus:

flutter upgrade

Neues Flutter-Projekt erstellen

  • Rufen Sie Ansicht > Befehlspalette (Strg+Umschalt+P) auf.
  • Geben Sie „flutter“ ein, und wählen Sie Flutter: Neues Projekt.
  • Wählen Sie Anwendung.
  • Erstellen Sie oder wählen Sie den übergeordneten Ordner für das neue Projektverzeichnis.
  • Geben Sie einen Projektnamen ein, z. B. my_app, und drücken Sie Enter.
  • Warten Sie, bis das Projekt erstellt ist und die Datei main.dart erscheint.

Debuggen in Flutter

Strg+p

>flutter: Gerät auswählen

Logging

https://docs.flutter.dev/testing/code-debugging#logging

stderr.writeln(‘print me’);

import 'dart:developer' as developer;

void main() {
  developer.log('log me', name: 'my.app.category');

  developer.log('log me 1', name: 'my.other.category');
  developer.log('log me 2', name: 'my.other.category');
}
---
import 'dart:convert';
import 'dart:developer' as developer;

void main() {
  var myCustomObject = MyCustomObject();

  developer.log(
    'log me',
    name: 'my.app.category',
    error: jsonEncode(myCustomObject),
  );
}

Breakpoints

import 'dart:developer';

void someFunction(double offset) { debugger(when: offset > 30.0); // … }

Deployment auf das Gerät

Erstellen Sie eine APK für Ihre App und probieren Sie die folgenden Befehle aus

Reinigen Sie Ihr Projekt

flutter clean

Pakete erhalten

flutter pub get

Erstellen Sie Ihre APK

flutter build apk --release

Suchen Sie Ihre APK auf Ihrem Gerät

Ihr Projektnamen\build\app\outputs\flutter-apk (im Release-Modus)

Kopieren Sie diese APK und installieren Sie sie auf Ihrem Mobilgerät

Schlafen in Dart

In Async Code

  await Future.delayed(Duration(seconds: 1));

In Sync Code

  import 'dart:io';
  sleep(Duration(seconds:1));

Nützliche Pakete

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

VSCode-Erweiterungen

https://medium.com/codex/my-top-5-flutter-extensions-for-vs-code-f36936518ff8

Icons: https://api.flutter.dev/flutter/material/Icons-class.html

alle Icons: https://fonts.google.com/icons?selected=Material+Icons

==== Daten aus dem Internet abrufen ====

https://docs.flutter.dev/cookbook/networking/authenticated-requests

Verwandt mit: Android-App bauen und veröffentlichen

Web-Flutter-App

VSCode Live Server Plugin

Flutter mit Backend