Installer l'environnement de développement Flutter

Le framework pour le développement d'applications mobiles. Bureau et web également.

Sommaire

Maintenant, je dois mettre à jour l’application sur le Google Play Store pour utiliser le nouveau SDK Android, donc je polis et publie cet ancien tutoriel que j’ai rédigé il y a quelques années.

Capture d’écran de la page du Google Play Store pour l’application Logical Fallacy Detector

Extrait de la page de l’application PlayStore.

Ce tutoriel a été initialement rédigé en août 2022, mis à jour et publié en avril 2024. En raison de cela, il peut contenir certaines anciennes informations.

Comment faire

Étapes pour installer Flutter sur un PC Linux

Installer les outils de développement

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

Vérifier les outils

which bash file mkdir rm which

Installer les paquets

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

Installer les paquets pour le développement d’applications Android

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

Installer les paquets pour le développement d’applications Linux

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

Installer VSCode

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

Il existe un lien disponible pour télécharger le package Debian de VSCode pour Linux : https://go.microsoft.com/fwlink/?LinkID=760868

Ensuite, installez-le comme suit :

sudo apt install ./<file>.deb

# Si vous utilisez une distribution Linux plus ancienne, vous devrez exécuter la commande suivante à la place :
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Installer les dépendances

D’autres distributions Linux sont également présentes sur la page “setup/linux”.

Installer les extensions Flutter pour VSCode : https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Lancer VS Code Quick Open (Ctrl+P), coller la commande suivante et appuyer sur entrée.

ext install Dart-Code.flutter

Installer Chrome

Pour le développement web - Installer Chrome :

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

Installer Android Studio

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

Bibliothèques requises pour Ubuntu 64

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

sur les systèmes basés sur Ubuntu 24.04 :

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

Télécharger la dernière version de studio depuis : https://developer.android.com/studio

cd dans “{installation home}/bin” et taper :

./studio.sh

éditer ~/.bash_profile

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

Activer le mode accéléré 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

Une sortie de 1 ou plus signifie que la virtualisation est prise en charge. Une sortie de 0 signifie que votre processeur ne prend pas en charge la virtualisation matérielle.

Résultat attendu :

INFO: /dev/kvm existe
L'accélération KVM peut être utilisée

Installer KVM sur Linux Utilisez la commande suivante pour installer KVM :

Cosmic (18.10) ou plus récent :

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

Installer le SDK Flutter

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

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

On peut installer le SDK manuellement ou via VSCode

Notes manuelles :

télécharger 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

Notes VSCode :

dans VS Code commande (Ctrl+p)

ext install Dart-Code.flutter

Dans le Palette de commandes ((Ctrl+shift+p)), taper flutter.

Sélectionner Flutter: Nouveau projet.

VS Code vous demande de localiser le SDK Flutter sur votre ordinateur.

Si vous avez le SDK Flutter installé, cliquez sur Localiser le SDK.

Si vous n’avez pas le SDK Flutter installé, cliquez sur Télécharger le SDK.

Cette option vous envoie à la page d’installation de Flutter si vous n’avez pas installé Git comme indiqué dans les prérequis des outils de développement.

Lorsque vous êtes invité à choisir quel modèle Flutter utiliser, ignorez-le. Appuyez sur Échap. Vous pouvez créer un projet de test après avoir vérifié votre configuration de développement.

Après l’installation dans ~/Apps

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

source ~/.bash_profile

Pour désactiver le rapport de télémétrie, exécutez cette commande dans le terminal :

dart --disable-analytics

Installer Android Studio

cd dans “{installation home}/bin” et taper :

./studio.sh

éditer ~/.bash_profile

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

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

  • Démarrer VS Code.

  • Appeler Affichage > Palette de commandes….

  • Tapez “installer”, et sélectionnez Extensions : Installer des extensions.

  • Tapez “flutter” dans le champ de recherche des extensions, sélectionnez Flutter dans la liste, et cliquez sur Installer. Cela installe également le plugin Dart requis.

  • Appeler Affichage > Palette de commandes (Ctrl+Shift+P)

  • Tapez “docteur”, et sélectionnez le Flutter : Exécuter Flutter Doctor. (ou exécutez flutter doctor dans la fenêtre du terminal)

  • Vérifiez les résultats dans le panneau SORTIE pour tout problème. Assurez-vous de sélectionner Flutter dans le menu déroulant des différentes options de sortie.

Vérification

flutter doctor

[!] Chaîne d'outils Android - développer pour les appareils Android (version 34.0.0 de l'Android SDK)
    ✗ Le composant cmdline-tools est manquant
      Exécutez `path/to/sdkmanager --install "cmdline-tools;latest"`
      Voir https://developer.android.com/studio/command-line pour plus de détails.
    ✗ L'état de la licence Android est inconnu.
      Exécutez `flutter doctor --android-licenses` pour accepter les licences SDK.
      Voir https://flutter.dev/docs/get-started/install/linux#android-setup pour plus de détails.
[✗] Chrome - développer pour le web (Impossible de trouver l'exécutable Chrome à google-chrome)
    ! Impossible de trouver Chrome. Essayez de définir CHROME_EXECUTABLE sur un exécutable Chrome.
[✓] Chaîne d'outils Linux - développer pour le bureau Linux

Pour installer cmdline-tools :

  • Ouvrez Android Studio,
  • puis SDK (dans plus),
  • puis cochez Android SDK cmdline-tools latest,
  • puis cliquez sur Appliquer

Accepter les licences

flutter doctor --android-licenses

Si vous utilisez chromium :

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Vérification de la version de Flutter et mise à jour

Vérification de la version de Flutter :

flutter --version

Pour mettre à jour la version de Flutter, exécutez

flutter upgrade

Créer un nouveau projet Flutter

  • Appeler Affichage > Palette de commandes (Ctrl+Shift+P).
  • Tapez “flutter”, et sélectionnez le Flutter : Nouveau projet.
  • Sélectionnez Application.
  • Créez ou sélectionnez le répertoire parent pour le nouveau dossier de projet.
  • Entrez un nom de projet, comme my_app, et appuyez sur Entrée.
  • Attendez que la création du projet soit terminée et que le fichier main.dart apparaisse.

Débogage en Flutter

ctrl+p

>flutter: sélectionner un appareil

Journalisation

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

Points d’arrêt

import 'dart:developer';

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

Déployer sur l’appareil

créez un apk pour votre application et essayez les commandes suivantes

nettoyez votre projet

flutter clean

obtenez les packages

flutter pub get

construisez votre apk

flutter build apk --release

trouvez votre apk sur votre machine

votre projet name\build\app\outputs\flutter-apk(on release mode)

copiez cet APK et installez-le sur votre appareil mobile

Sommeil en Dart

Dans le code asynchrone

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

Dans le code synchrone

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

Liens utiles

Packages utiles

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

Extensions VSCode

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

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

toutes les icônes : https://fonts.google.com/icons?selected=Material+Icons

==== Récupérer des données d’internet ====

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

Relatif à : Construire et publier une application Android

Application Flutter web

Plugin serveur live de VSCode

Flutter avec le backend