Installera Flutter-utvecklingsmiljö

Ramen för utveckling av mobilappar. Även för desktop och webb.

Sidinnehåll

Nu måste jag uppdatera appen på Google Play Store för att använda den nya Android SDK, så jag polerar och publicerar denna gamla guide som jag skrev för några år sedan.

Logical Fallacy Detector app i Google PlayStore-sidan skärmdump

En klippning från PlayStore App-sidan.

Den här guiden skrevs ursprungligen i augusti 2022, uppdaterades och publicerades i april 2024. På grund av detta kan den innehålla något gammalt material.

Hur

Steg för att installera Flutter på en Linux-dator

Installera utvecklarverktyg

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

Kontrollera verktyg

which bash file mkdir rm which

Installera paket

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

Installera paket för Android-app-utveckling

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

Installera paket för Linux-app-utveckling

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

Installera VSCode

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

Det finns en länk tillgänglig för nedladdning av VSCode Debian-paket för Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Installera sedan det som

sudo apt install ./<fil>.deb

# Om du använder en äldre Linux-distribution, måste du köra detta istället:
# sudo dpkg -i <fil>.deb
# sudo apt-get install -f # Installera beroenden

Andra Linux-distributioner finns på sidan “setup/linux” också.

Installera Flutter-tillägget för VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Starta VS Code Quick Open (Ctrl+P), klistra in följande kommando och tryck på enter.

ext install Dart-Code.flutter

Installera Chrome

För webbutveckling - Installera Chrome:

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

Installera Android Studio

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

Krav på bibliotek för Ubuntu på 64-bitars

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

På operativsystem baserade på Ubuntu 24.04:

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

Ladda ner den senaste versionen av Studio från: https://developer.android.com/studio

Gå in i “{installationshem}/bin” och skriv:

./studio.sh

xed ~/.bash_profile

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

Aktivera KVM-accelererad läge

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

Ett resultat på 1 eller högre innebär att virtualisering stöds. Ett resultat på 0 innebär att din CPU inte stöder hårdvaruvirtualisering.

Förväntat resultat:

INFO: /dev/kvm exists
KVM acceleration kan användas

Installera KVM på Linux Använd följande kommando för att installera KVM:

Cosmic (18.10) eller senare:

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

Installera Flutter SDK

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

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

Kan installera sdk manuellt eller via VSCode

Manuella anteckningar:

ladda ner 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-anteckningar:

i VS code kommando (Ctrl+p)

ext install Dart-Code.flutter

I Command Palette ((Ctrl+shift+p)), skriv flutter.

Välj Flutter: New Project.

VS Code uppmanar dig att hitta Flutter SDK på din dator.

Om du har Flutter SDK installerat, klicka på Locate SDK.

Om du inte har Flutter SDK installerat, klicka på Download SDK.

Den här alternativet skickar dig till Flutter installationssidan om du inte har installerat Git som anvisats i förutsättningarna för utvecklarverktyg.

När du tillfrågas Vilken Flutter-mall?, ignorera det. Tryck på Esc. Du kan skapa ett testprojekt efter att du har kontrollerat din utvecklingsmiljö.

Efter installation i ~/Apps

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

source ~/.bash_profile

För att inaktivera rapportering av telemetri, kör detta terminalkommando:

dart --disable-analytics

Installera Android Studio

Gå in i “{installationshem}/bin” och skriv:

./studio.sh

xed ~/.bash_profile

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

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

Starta VS Code.
Anropa Visa > Command Palette….
Skriv “install”, och välj Extensions: Install Extensions.
Skriv “flutter” i sökfältet för tillägg, välj Flutter i listan och klicka på Installera. Detta installerar också det krävda Dart-pluginet.
Anropa Visa > Command Palette (Ctrl+Shift+P)
Skriv “doctor”, och välj Flutter: Run Flutter Doctor. (eller kör flutter doctor i terminalfönstret)
Granska utdata i OUTPUT-fliken för några problem. Se till att välja Flutter från rullgardinsmenyn i de olika Output-alternativen.

Kontroll

flutter doctor

[!] Android toolchain - utveckla för Android-enheter (Android SDK version 34.0.0)
    ✗ cmdline-tools-komponenten saknas
      Kör `path/to/sdkmanager --install "cmdline-tools;latest"`
      Se https://developer.android.com/studio/command-line för mer information.
    ✗ Android-licensstatus okänd.
      Kör `flutter doctor --android-licenses` för att godkänna SDK-licenserna.
      Se https://flutter.dev/docs/get-started/install/linux#android-setup för mer information.
[✗] Chrome - utveckla för webben (Kan inte hitta Chrome-exekverbar fil på google-chrome)
    ! Kan inte hitta Chrome. Prova att ställa in CHROME_EXECUTABLE till en Chrome-exekverbar fil.
[✓] Linux toolchain - utveckla för Linux-skrivbord

För att installera cmdline-tools:

Öppna Android Studio,
sedan SDK (i mer),
sedan kryssrutan Android SDK cmdline-tools senaste,
sedan klicka på Tillämpa

Godkänn licenser

flutter doctor --android-licenses

Om du använder chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Kontrollera Flutter-version och uppgradera den

Flutter versionskontroll:

flutter --version

För att uppgradera Flutter-version kör

flutter upgrade

Skapa ett nytt Flutter-projekt

Anropa Visa > Command Palette (Ctrl+Shift+P).
Skriv “flutter”, och välj Flutter: New Project.
Välj Application.
Skapa eller välj förälderkatalogen för den nya projektmappen.
Ange ett projektnamn, till exempel my_app, och tryck på Enter.
Vänta på att projektet ska skapas och att main.dart-filen ska visas.

Felsökning i Flutter

ctrl+p

>flutter: select device

Loggning

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),
  );
}

Avbrottspunkter


import 'dart:developer';

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

Distribuera till enheten

skapa apk för din app och prova följande kommandon

rensa ditt projekt

flutter clean

hämta paket

flutter pub get

bygg din apk

flutter build apk --release

hitta din apk på din dator

ditt projektnamn\build\app\outputs\flutter-apk(on release mode)

kopiera denna APK och installera på din mobilenhet

Sovande i Dart

I Asynkron kod

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

I Synkron kod

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

Användbara länkar

Användbara paket

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

VSCode-tillägg

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

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

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

==== Hämta data från internet ====

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

Relaterat till: Bygga och släppa Android-app

https://docs.flutter.dev/deployment/android

Web Flutter-app

Bygga: https://docs.flutter.dev/platform-integration/web/building
Distribuera till olika miljöer: https://docs.flutter.dev/deployment

VSCode Live server Plugin

Hur

Installera utvecklarverktyg

Installera VSCode

Installera Chrome

Installera Android Studio

Aktivera KVM-accelererad läge

Installera Flutter SDK

Installera Android Studio

Kontroll

Kontrollera Flutter-version och uppgradera den

Skapa ett nytt Flutter-projekt

Felsökning i Flutter

Loggning

Avbrottspunkter

Distribuera till enheten

Sovande i Dart

Användbara länkar

Användbara paket

VSCode-tillägg

Relaterat till: Bygga och släppa Android-app

Web Flutter-app

Flutter med backend