Installa l'ambiente di sviluppo Flutter

Il framework per lo sviluppo di app mobili. Desktop e web inclusi.

Indice

Ora devo aggiornare l’app su Google Play Store per utilizzare il nuovo SDK Android, quindi sto rivedendo e pubblicando questo vecchio howto che ho scritto un paio di anni fa.

Logical Fallacy Detector app in Google PlayStore page screenshot

Un frammento dalla pagina dell’app di PlayStore.

Questo howto è stato originariamente scritto ad agosto 2022, aggiornato e pubblicato ad aprile 2024. Per questo motivo potrebbe contenere alcuni elementi obsoleti.

Come

Passaggi per installare Flutter su un pc linux

Installare gli strumenti di sviluppo

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

Controllare gli strumenti

which bash file mkdir rm which

Installare i pacchetti

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

Installare i pacchetti per lo sviluppo di app Android

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

Installare i pacchetti per lo sviluppo di app Linux

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

Installare VSCode

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

Esiste un link disponibile per il download del pacchetto Debian di VSCode per Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Poi installarlo come segue:

sudo apt install ./<file>.deb

# Se sei su una distribuzione Linux più vecchia, dovrai eseguire questo invece:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Installa le dipendenze

Le altre distribuzioni Linux sono presenti anche sulla pagina “setup/linux”.

Installare le estensioni Flutter per VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Avviare VS Code Quick Open (Ctrl+P), incollare il seguente comando e premere invio.

ext install Dart-Code.flutter

Installare Chrome

Per lo sviluppo web - Installare Chrome:

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

Installare Android Studio

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

Librerie necessarie per Ubuntu su 64 bit

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

su sistemi basati su Ubuntu 24.04:

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

Scaricare l’ultima versione di studio da: https://developer.android.com/studio

cd in “{installation home}/bin” e digita:

./studio.sh

xed ~/.bash_profile

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

Abilitare la modalità KVM accelerata

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

Un output di 1 o maggiore significa che la virtualizzazione è supportata. Un output di 0 significa che il tuo CPU non supporta la virtualizzazione hardware.

Output atteso:

INFO: /dev/kvm esiste
L'accelerazione KVM può essere utilizzata

Installare KVM su Linux Utilizzare il seguente comando per installare KVM:

Cosmic (18.10) o successivo:

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

Installare Flutter SDK

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

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

Puoi installare l’SDK manualmente o tramite VSCode

Note manuali:

scarica 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

Note per VSCode:

nel comando di VS Code (Ctrl+p)

ext install Dart-Code.flutter

Nella Palette dei comandi ((Ctrl+shift+p)), digita flutter.

Seleziona Flutter: Nuovo Progetto.

VS Code ti chiede di localizzare l’SDK Flutter sul tuo computer.

Se hai l’SDK Flutter installato, clicca Localizza SDK.

Se non hai l’SDK Flutter installato, clicca Scarica SDK.

Questa opzione ti invia alla pagina di installazione di Flutter se non hai installato Git come richiesto nei prerequisiti degli strumenti di sviluppo.

Quando ti viene chiesto Quale modello Flutter?, ignoralo. Premi Esc. Puoi creare un progetto di test dopo aver verificato la tua configurazione di sviluppo.

Dopo l’installazione in ~/Apps

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

source ~/.bash_profile

Per disabilitare il reporting di telemetria, esegui questo comando terminale:

dart --disable-analytics

Installare Android Studio

cd in “{installation home}/bin” e digita:

./studio.sh

xed ~/.bash_profile

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

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

  • Avviare VS Code.

  • Invocare Visualizza > Palette dei comandi….

  • Digitare “install”, e selezionare Estensioni: Installare Estensioni.

  • Digitare “flutter” nel campo di ricerca delle estensioni, selezionare Flutter nell’elenco e cliccare Installa. Questo installa anche il plugin Dart necessario.

  • Invocare Visualizza > Palette dei comandi (Ctrl+Shift+P)

  • Digitare “doctor”, e selezionare Flutter: Esegui Flutter Doctor. (o esegui flutter doctor nella finestra del terminale)

  • Verificare l’output nella finestra OUTPUT per eventuali problemi. Assicurati di selezionare Flutter dal menu a discesa nelle diverse opzioni di output.

Controllo

flutter doctor

[!] Android toolchain - sviluppo per dispositivi Android (versione Android SDK 34.0.0)
    ✗ componente cmdline-tools mancante
      Esegui `path/to/sdkmanager --install "cmdline-tools;latest"`
      Vedi https://developer.android.com/studio/command-line per maggiori dettagli.
    ✗ stato della licenza Android sconosciuto.
      Esegui `flutter doctor --android-licenses` per accettare le licenze SDK.
      Vedi https://flutter.dev/docs/get-started/install/linux#android-setup per maggiori dettagli.
[✗] Chrome - sviluppo per il web (Non è possibile trovare l'eseguibile Chrome a google-chrome)
    ! Non è possibile trovare Chrome. Prova a impostare CHROME_EXECUTABLE su un eseguibile Chrome.
[✓] Linux toolchain - sviluppo per desktop Linux

Per installare cmdline-tools:

  • Apri Android Studio,
  • poi SDK (in più),
  • poi seleziona Android SDK cmdline-tools latest,
  • poi clicca Applica

Accetta le licenze

flutter doctor --android-licenses

Se si utilizza Chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Verifica della versione Flutter e aggiornamento

Verifica della versione Flutter:

flutter --version

Per aggiornare la versione Flutter esegui

flutter upgrade

Creare un nuovo progetto Flutter

  • Invoca Visualizza > Palette dei comandi (Ctrl+Shift+P).
  • Digita “flutter”, e seleziona Flutter: Nuovo Progetto.
  • Seleziona Applicazione.
  • Crea o seleziona la cartella genitore per la nuova cartella del progetto.
  • Inserisci un nome per il progetto, ad esempio my_app, e premi Invio.
  • Aspetta che la creazione del progetto venga completata e che il file main.dart appaia.

Debug in Flutter

ctrl+p

>flutter: seleziona dispositivo

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

Deploy sul dispositivo

crea un apk per la tua app e prova i comandi seguenti

pulisci il tuo progetto

flutter clean

ottiene i pacchetti

flutter pub get

costruisci il tuo apk

flutter build apk --release

trova il tuo apk nella tua macchina

il nome del tuo progetto\build\app\outputs\flutter-apk(on release mode)

copia questo APK e installalo sul tuo dispositivo mobile

Sospensione in Dart

Nel codice asincrono

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

Nel codice sincrono

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

Pacchetti utili

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

Estensioni VSCode

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

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

tutte le icon: https://fonts.google.com/icons?selected=Material+Icons

==== Recupero dati da internet ====

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

Relativo a: Costruzione e rilascio di un’app Android

App Flutter per il web

Plugin Live server di VSCode

Flutter con il backend