Installeer de Flutter dev-omgeving

Het kader voor mobiele app ontwikkeling. Desktop en web ook.

Inhoud

Nu moet ik de app op de Google Play Store bijwerken om gebruik te maken van de nieuwe Android SDK, dus polijst en publiceer ik deze oude handleiding die ik een paar jaar geleden heb geschreven.

Logical Fallacy Detector app in Google PlayStore pagina screenshot

Een fragment uit de PlayStore app pagina.

Deze handleiding is oorspronkelijk geschreven in augustus 2022, en aangepast en gepubliceerd in april 2024. Daardoor kan het bepaalde oude informatie bevatten.

Hoe

Stappen om Flutter te installeren op een Linux pc

Installeer dev tools

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

Controleer tools

which bash file mkdir rm which

Installeer pakketten

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

Installeer pakketten voor Android app ontwikkeling

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

Installeer pakketten voor Linux app ontwikkeling

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

Installeer VSCode

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

Er is een link beschikbaar voor het downloaden van het VSCode Debian pakket voor Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Installeer het als volgt:

sudo apt install ./<file>.deb

# Als je op een oudere Linux distributie zit, moet je dit in plaats daarvan uitvoeren:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Installeer afhankelijkheden

Andere Linux distributies zijn ook op die pagina “setup/linux” te vinden.

Installeer Flutter extensies voor VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Start VS Code Quick Open (Ctrl+P), plak de volgende opdracht en druk op enter.

ext install Dart-Code.flutter

Installeer Chrome

Voor webontwikkeling - Installeer Chrome:

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

Installeer Android Studio

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

Vereiste bibliotheeken voor Ubuntu op 64 bits

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

op OS’en gebaseerd op Ubuntu 24.04:

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

Download de nieuwste versie van studio van: https://developer.android.com/studio

ga naar “{installatie map}/bin” en typ:

./studio.sh

xed ~/.bash_profile

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

KVM versneld modus inschakelen

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

Een uitvoer van 1 of hoger betekent dat virtualisatie wordt ondersteund. Een uitvoer van 0 betekent dat je CPU geen hardware virtualisatie ondersteunt.

Verwachte uitvoer:

INFO: /dev/kvm bestaat
KVM versnelling kan worden gebruikt

Installeer KVM op Linux Gebruik de volgende opdracht om KVM te installeren:

Cosmic (18.10) of later:

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

Installeer Flutter SDK

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

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

Je kunt de SDK handmatig installeren of via VSCode

Handmatige aantekeningen:

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 aantekeningen:

in vs code command (Ctrl+p)

ext install Dart-Code.flutter

In de Command Palette ((Ctrl+shift+p)), typ flutter.

Selecteer Flutter: Nieuw Project.

VS Code vraagt je om de locatie van de Flutter SDK op je computer.

Als je de Flutter SDK hebt geïnstalleerd, klik dan op Locatie SDK.

Als je de Flutter SDK niet hebt geïnstalleerd, klik dan op Download SDK.

Deze optie stuurt je naar de Flutter installatiepagina als je Git niet hebt geïnstalleerd zoals aangegeven in de voorafgaande vereisten voor ontwikkeltools.

Wanneer je wordt gevraagd Welk Flutter sjabloon?, negeer het. Druk op Esc. Je kunt een testproject maken na het controleren van je ontwikkelomgeving.

Na het installeren in ~/Apps

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

source ~/.bash_profile

Om het rapporteren van telemetrie te uitschakelen, voer deze terminalopdracht uit:

dart --disable-analytics

Installeer Android Studio

cd naar “{installatie map}/bin” en typ:

./studio.sh

xed ~/.bash_profile

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

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

Start VS Code.
Roep View > Command Palette… op.
Typ “install”, en selecteer Extensions: Install Extensions.
Typ “flutter” in het zoekveld voor extensies, selecteer Flutter in de lijst, en klik op Install. Dit installeert ook de vereiste Dart plugin.
Roep View > Command Palette (Ctrl+Shift+P) op.
Typ “doctor”, en selecteer Flutter: Run Flutter Doctor. (of voer flutter doctor uit in het terminalvenster)
Bekijk de uitvoer in het OUTPUT pane voor eventuele problemen. Zorg ervoor dat je Flutter selecteert uit de dropdown in de verschillende Output Opties.

Controle

flutter doctor

[!] Android toolchain - ontwikkel voor Android apparaten (Android SDK versie 34.0.0)
    ✗ cmdline-tools component ontbreekt
      Voer `path/to/sdkmanager --install "cmdline-tools;latest"` uit
      Zie https://developer.android.com/studio/command-line voor meer details.
    ✗ Android licentiestatus onbekend.
      Voer `flutter doctor --android-licenses` uit om de SDK licenties te accepteren.
      Zie https://flutter.dev/docs/get-started/install/linux#android-setup voor meer details.
[✗] Chrome - ontwikkel voor de web (Kan geen Chrome uitvoerbare bestand vinden op google-chrome)
    ! Kan geen Chrome vinden. Probeer CHROME_EXECUTABLE in te stellen op een Chrome uitvoerbare bestand.
[✓] Linux toolchain - ontwikkel voor Linux desktop

Om cmdline-tools te installeren:

Open Android Studio,
dan SDK (in meer),
dan vink Android SDK cmdline-tools laatste aan,
dan klik op Toepassen

Licenties accepteren

flutter doctor --android-licenses

Als je Chromium gebruikt:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Controleer Flutter versie en upgrade

Flutter versie check:

flutter --version

Om Flutter versie te upgraden voer uit

flutter upgrade

Nieuw Flutter project aanmaken

Roep View > Command Palette (Ctrl+Shift+P) op.
Typ “flutter”, en selecteer Flutter: Nieuw Project.
Selecteer Toepassing.
Maak een nieuwe map of selecteer de oude map voor het nieuwe project.
Voer een projectnaam in, zoals my_app, en druk op Enter.
Wacht tot het project is aangemaakt en het bestand main.dart verschijnt.

Debuggen in Flutter

ctrl+p

>flutter: select device

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); // … }

Implementeer op het apparaat

maak een apk voor je app en probeer de onderstaande opdrachten

verwijder je project

flutter clean

pakketten ophalen

flutter pub get

bouw je apk

flutter build apk --release

vind je apk op je machine

je projectnaam\build\app\outputs\flutter-apk(op release modus)

kopieer deze APK en installeer deze op je mobiele apparaat

Slapen in Dart

In Async Code

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

In Sync Code

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

Nuttige links

Nuttige pakketten

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

VSCode Extensies

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

==== Data ophalen van het internet ====

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

Gerelateerd: Bouwen en publiceren van een Android app

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

Web Flutter app

Bouwen: https://docs.flutter.dev/platform-integration/web/building
Implementeren in verschillende omgevingen: https://docs.flutter.dev/deployment

VSCode Live server Plugin

Hoe

Installeer dev tools

Installeer VSCode

Installeer Chrome

Installeer Android Studio

KVM versneld modus inschakelen

Installeer Flutter SDK

Installeer Android Studio

Controle

Controleer Flutter versie en upgrade

Nieuw Flutter project aanmaken

Debuggen in Flutter

Logging

Breakpoints

Implementeer op het apparaat

Slapen in Dart

Nuttige links

Nuttige pakketten

VSCode Extensies

Gerelateerd: Bouwen en publiceren van een Android app

Web Flutter app

Flutter met backend