Zainstaluj środowisko deweloperskie Flutter

Ramki do tworzenia aplikacji mobilnych. Także do aplikacji desktopowych i sieciowych.

Page content

Teraz muszę zaktualizować aplikację na Google Play Store, aby używać nowego android SDK, dlatego poluję i publikuję ten stary howto, który napisałem kilka lat temu.

Aplikacja Logical Fallacy Detector na stronie Google PlayStore (zdjęcie ekranu)

Fragment strony aplikacji PlayStore.

Ten howto został pierwotnie napisany w sierpniu 2022, zaktualizowany i opublikowany w kwietniu 2024. Dlatego może zawierać niektóre stare informacje.

Jak

Kroki instalacji Flutter na komputerze z systemem Linux

Zainstaluj narzędzia deweloperskie

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

Sprawdź narzędzia

which bash file mkdir rm which

Zainstaluj pakiety

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

Zainstaluj pakiety do tworzenia aplikacji android

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

Zainstaluj pakiety do tworzenia aplikacji dla systemu Linux

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

Zainstaluj VSCode

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

Istnieje link do pobrania pakietu debian VSCode dla systemu Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Następnie zainstaluj go tak:

sudo apt install ./<file>.deb

# Jeśli korzystasz z starszej wersji dystrybucji Linux, musisz uruchomić to zamiast:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Zainstaluj zależności

Inne dystrybucje Linux są również dostępne na stronie “setup/linux”.

Zainstaluj wtyczki Flutter dla VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Uruchom szybkie otwieranie w VS Code (Ctrl+P), wklej poniższy komendę i naciśnij enter.

ext install Dart-Code.flutter

Zainstaluj Chrome

Dla dewelopera sieci – zainstaluj Chrome:

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

Zainstaluj Android Studio

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

Wymagane biblioteki dla Ubuntu w wersji 64-bitowej

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

na systemach opartych na Ubuntu 24.04:

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

Pobierz najnowszą wersję studio z: https://developer.android.com/studio

Przejdź do “{installation home}/bin” i wpisz:

./studio.sh

xed ~/.bash_profile

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

Włącz tryb przyspieszony KVM

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

Wynik 1 lub większy oznacza, że wirtualizacja jest obsługiwana. Wynik 0 oznacza, że procesor nie obsługuje wirtualizacji sprzętowej.

Oczekiwany wynik:

INFO: /dev/kvm exists
KVM acceleration can be used

Zainstaluj KVM na Linuxie Użyj poniższego polecenia, aby zainstalować KVM:

Cosmic (18.10) lub nowszy:

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

Zainstaluj SDK Flutter

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

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

Można zainstalować SDK ręcznie lub przez VSCode

Uwagi dotyczące instalacji ręcznej:

pobierz 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

Uwagi dotyczące VSCode:

w VS Code komenda (Ctrl+p)

ext install Dart-Code.flutter

W paletce poleceń ((Ctrl+shift+p)), wpisz flutter.

Wybierz Flutter: Nowy projekt.

VS Code prosi o lokalizację SDK Flutter na komputerze.

Jeśli masz zainstalowany SDK Flutter, kliknij Lokalizuj SDK.

Jeśli nie masz zainstalowanego SDK Flutter, kliknij Pobierz SDK.

Ta opcja przekieruje Cię na stronę instalacji Flutter, jeśli nie zainstalowałeś Gita zgodnie z wymaganiami wstępnymi narzędzi deweloperskich.

Kiedy zostanie wyświetlony komunikat “Który szablon Flutter?”, zignoruj go. Naciśnij Esc. Możesz utworzyć testowy projekt po sprawdzeniu swojej konfiguracji deweloperskiej.

Po zainstalowaniu w ~/Apps

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

source ~/.bash_profile

Aby wyłączyć raportowanie telemetryczne, uruchom poniższe polecenie terminalowe:

dart --disable-analytics

Zainstaluj Android Studio

cd do “{installation home}/bin” i wpisz:

./studio.sh

xed ~/.bash_profile

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

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

  • Uruchom VS Code.

  • Wywołaj Widok > Paletka poleceń….

  • Wpisz „install”, a następnie wybierz Rozszerzenia: Zainstaluj rozszerzenia.

  • Wpisz „flutter” w polu wyszukiwania rozszerzeń, wybierz Flutter z listy, a następnie kliknij Zainstaluj. To również instaluje wymagane rozszerzenie Dart.

  • Wywołaj Widok > Paletka poleceń (Ctrl+Shift+P)

  • Wpisz „doctor”, a następnie wybierz Flutter: Uruchom Flutter Doctor. (lub uruchom flutter doctor w oknie terminala)

  • Przejrzyj wynik w oknie OUTPUT w poszukiwaniu problemów. Upewnij się, że wybrano Flutter z rozwijanej listy w różnych opcjach wyjścia.

Sprawdzenie

flutter doctor

[!] Narzędzia Android - tworzenie aplikacji dla urządzeń Android (wersja SDK 34.0.0)
    ✗ Brakuje składnika cmdline-tools
      Uruchom `path/to/sdkmanager --install "cmdline-tools;latest"`
      Zobacz https://developer.android.com/studio/command-line dla więcej szczegółów.
    ✗ Stan licencji Android nieznany.
      Uruchom `flutter doctor --android-licenses`, aby zaakceptować licencje SDK.
      Zobacz https://flutter.dev/docs/get-started/install/linux#android-setup dla więcej szczegółów.
[✗] Chrome - tworzenie aplikacji dla sieci (Nie znaleziono wykonywalnego pliku Chrome w google-chrome)
    ! Nie znaleziono Chrome. Spróbuj ustawić CHROME_EXECUTABLE na wykonywalny plik Chrome.
[✓] Narzędzia Linux - tworzenie aplikacji dla pulpitu Linux

Aby zainstalować cmdline-tools:

  • Otwórz Android Studio,
  • następnie SDK (w więcej),
  • następnie zaznacz najnowszy Android SDK cmdline-tools,
  • następnie kliknij Zastosuj

Zaakceptuj licencje

flutter doctor --android-licenses

Jeśli korzystasz z Chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Sprawdzanie wersji Flutter i aktualizacja

Sprawdzenie wersji Flutter:

flutter --version

Aby zaktualizować wersję Flutter uruchom

flutter upgrade

Tworzenie nowego projektu Flutter

  • Wywołaj Widok > Paletka poleceń (Ctrl+Shift+P).
  • Wpisz „flutter”, a następnie wybierz Flutter: Nowy projekt.
  • Wybierz Aplikacja.
  • Utwórz lub wybierz katalog nadrzędny dla nowego folderu projektu.
  • Wpisz nazwę projektu, np. my_app, i naciśnij Enter.
  • Poczekaj, aż zostanie utworzony projekt i pojawi się plik main.dart.

Debugowanie w Flutter

ctrl+p

>flutter: wybierz urządzenie

Logowanie

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

stderr.writeln(‘wypisz mnie’);

import 'dart:developer' as developer;

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

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

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

  developer.log(
    'zaloguj mnie',
    name: 'my.app.category',
    error: jsonEncode(myCustom对象),
  );
}

Punkty przerwania

import 'dart:developer';

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

Wdrażanie na urządzenie

utwórz apk dla swojej aplikacji i spróbuj poniższe polecenia

wyczyść projekt

flutter clean

pobierz pakiety

flutter pub get

zbuduj apk

flutter build apk --release

znajdź swój apk na swoim komputerze

nazwa projektu\build\app\outputs\flutter-apk(w trybie release)

skopiuj ten APK i zainstaluj na urządzeniu mobilnym

Spoczywanie w Dart

W kodzie asynchronicznym

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

W kodzie synchronicznym

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

Przydatne linki

Przydatne pakiety

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

Rozszerzenia VSCode

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

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

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

==== Pobieranie danych z internetu ====

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

Powiązane z: budowa i wdrażanie aplikacji android

Aplikacja Flutter w sieci

Wtyczka Live Server w VSCode

Flutter z backendem