Aller au contenu

⬅️ Retour au sommaire Flutter

Mise en place de l’environnement de développement

Objectifs

1. Comprendre l’écosystème Flutter

Pour ceux et celles qui n’ont pas vu Spring Boot/Java, vous pourrez utiliser un autre langage ou Framework pour développer une API (Php, Python,…).

Côté Spring Boot (ce que vous connaissez) Côté Flutter (ce que vous allez apprendre)
JDK (Java Development Kit) Flutter SDK (contient Dart SDK)
Maven / Gradle (pom.xml) Pub (pubspec.yaml)
Maven Central pub.dev
IntelliJ IDEA Android Studio ou VS Code
mvn spring-boot:run flutter run
Tomcat embarqué Moteur de rendu Skia/Impeller + runtime Dart
Tests JUnit flutter test (package test / flutter_test)

Flutter est un framework développé par Google qui permet d’écrire une seule base de code en Dart compilée nativement pour Android, iOS, Web et le Desktop. Contrairement à des solutions hybrides (WebView), Flutter dessine lui-même chaque pixel de l’interface via son propre moteur de rendu : c’est ce qui lui donne des performances proches du natif et un rendu identique sur toutes les plateformes.

2. Installer le SDK Flutter

Windows

  1. Téléchargez le SDK depuis flutter.dev
  2. Décompressez-le dans C:\src\flutter (évitez les chemins contenant des espaces ou nécessitant les droits admin, comme Program Files)
  3. Ajoutez C:\src\flutter\bin à la variable d’environnement PATH.

macOS

brew install --cask flutter

ou téléchargement manuel de l’archive depuis flutter.dev puis ajout au PATH dans ~/.zshrc :

export PATH="$PATH:/chemin/vers/flutter/bin"

Linux

sudo snap install flutter --classic

ou téléchargement de l’archive .tar.xz + ajout au PATH.

Vérifier l’installation

La commande la plus importante de tout le cours, l’équivalent d’un mvn -v :

flutter doctor

Cette commande vérifie tout votre environnement et vous indique précisément ce qu’il manque (Android SDK, Xcode, licences non acceptées, etc.) avec des croix rouges ❌ et des éléments validés ✅. Ne passez pas à la suite tant que flutter doctor n’est pas propre (ou seulement des warnings mineurs). Il se peut que suivant les versions, vous n’ayez pas besoin de valider la “licences”.

[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS (macOS uniquement)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device

3. Choisir son IDE

Deux options, toutes deux gratuites, mais je sais que vous utilisez plutôt VS-Code, donc on peut rester sur cette IDE tout en installant Android Studio :

Option A — VS Code (recommandé, léger, rapide)

  1. Installez VS Code
  2. Ouvrez le panneau Extensions (Ctrl+Shift+X) et installez :
    • Flutter (installe automatiquement l’extension Dart)
    • (optionnel) Awesome Flutter Snippets
    • (optionnel) Pubspec Assist.
  3. Ctrl+Shift+P → Flutter: New Project pour vérifier que tout fonctionne.

Option B — Android Studio (plus complet, intègre l’émulateur Android nativement)

  1. Installez Android Studio
  2. Dans Plugins, installez le plugin Flutter (installe Dart automatiquement)
  3. Utilisez le AVD Manager (icône téléphone dans la barre d’outils) pour créer un émulateur Android.

Astuce : beaucoup de développeur.euse.s utilisent Android Studio uniquement pour gérer le SDK Android et les émulateurs et codent au quotidien dans VS Code. C’est l’approche que nous allons utilisée comme précisée plus haut.

4. Installer les toolchains par plateforme

Pour développer/tester sur Android (Windows / macOS / Linux)

  1. Installez Android Studio (il embarque le SDK Android)
  2. Dans Android Studio → More Actions → SDK Manager, installez :
    • Android SDK Platform (dernière version stable)
    • Android SDK Command-line Tools
    • Android SDK Build-Tools.
  3. Acceptez les licences (possiblement optionnel) :
flutter doctor --android-licenses

Il se peut que pour certain.e.s, vous ayez un message comme quoi il faut installer Visual Studio Code mais en fait, vous n’avez pas besoin, il suffit de désactiver ce message “Desktop… C++” avec la commande ci-dessous :

flutter config --no-enable-windows-desktop

Pour développer/tester sur iOS (macOS uniquement)

Compiler et tester une app iOS (même sur simulateur) nécessite un Mac. C’est une contrainte d’Apple, pas de Flutter.

  1. Installez Xcode depuis l’App Store (plusieurs Go, prévoyez du temps)
  2. Installez les outils en ligne de commande :
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
  1. Installez CocoaPods (gestionnaire de dépendances iOS, l’équivalent Maven côté iOS) :
sudo gem install cocoapods

Vous n’avez pas de Mac ? Vous pourrez tout de même suivre 90% du cours sur Android. Pour la partie iOS, des solutions cloud existent : Codemagic ou Ondevice.io permettent de compiler et tester sur un vrai iPhone à distance sans posséder de Mac. Nous verrons cela un peu plus tard.

5. Créer et lancer votre premier projet

flutter create mon_premier_projet
cd mon_premier_projet
flutter run

flutter create génère une structure de projet complète (l’équivalent d’un spring init) :

mon_premier_projet/
├── android/          # Projet natif Android (Gradle)
├── ios/              # Projet natif iOS (Xcode)
├── lib/
│   └── main.dart     # Point d'entrée de l'application (équivalent classe @SpringBootApplication)
├── test/             # Tests unitaires et de widgets
├── pubspec.yaml       # Déclaration des dépendances (équivalent pom.xml)
└── pubspec.lock       # Versions verrouillées (équivalent lock Maven)

flutter run compile l’application et l’installe sur l’émulateur ou l’appareil sélectionné. Une fois lancée, essayez le Hot Reload : modifiez un texte dans lib/main.dart, sauvegardez, puis tapez r dans le terminal (ou Ctrl+S avec l’extension VS Code). Les changements apparaissent en moins d’une seconde, sans perdre l’état de l’application — un gain de temps énorme comparé à un redéploiement Spring Boot !

6. Tester l’application sur un émulateur/simulateur

7. Tester l’application sur un téléphone physique

C’est l’étape la plus importante de ce chapitre : chaque étudiant.e effectue le test sur son propre téléphone. Je détail la procédure sur le Powerpoint.

7.1 Sur Android

  1. Activer le mode développeur : Réglages → À propos du téléphone → taper 7 fois sur « Numéro de build »
  2. Activer le débogage USB : Réglages → Options pour les développeurs → activer « Débogage USB »
  3. Branchez le téléphone en USB à votre ordinateur, autorisez la connexion sur le téléphone (popup)
  4. Vérifiez que l’appareil est détecté :
flutter devices
  1. Lancez l’application directement dessus
flutter run

Sans câble (débogage sans fil, Android 11+) :

adb pair <ip>:<port>       # coupler le téléphone (code affiché dans les options développeur)
adb connect <ip>:<port>
flutter run

Générer un fichier APK installable manuellement (utile pour le partager sans passer par un câble) :

flutter build apk --release
# fichier généré : build/app/outputs/flutter-apk/app-release.apk

Transférez ce fichier sur le téléphone (mail, cloud, câble) et installez-le (autoriser « sources inconnues » si demandé).

7.2 Sur iOS

Nécessite un Mac + Xcode installés comme vu à la section 4.

  1. Connectez l’iPhone en USB au Mac, déverrouillez-le, appuyez sur « Faire confiance »
  2. Ouvrez ios/Runner.xcworkspace dans Xcode
  3. Dans Signing & Capabilities, sélectionnez votre Apple ID personnel comme « Team » (gratuit, pas besoin du compte développeur payant pour tester)
  4. Sur l’iPhone : Réglages → Général → VPN et gestion de l’appareil → faire confiance au certificat développeur
  5. Depuis le terminal :
flutter run

Avec un compte Apple gratuit, l’application installée expire au bout de 7 jours et doit être réinstallée. C’est une limitation Apple normale pour le développement, pas un bug.

7.3 Vous n’avez ni Mac ni possibilité de tester sur iOS ?

Utilisez un service cloud de build/test comme Codemagic (offre gratuite) : vous connectez votre dépôt Git, Codemagic compile l’app sur des Mac dans le cloud et peut l’envoyer directement sur votre iPhone via TestFlight, sans jamais toucher un Mac physique.

8. Exercice à faire le matin du jour 1

Objectif : valider que votre environnement complet fonctionne.

  1. Faites tourner flutter doctor et corrigez toutes les erreurs (les warnings mineurs sont acceptables)
  2. Créez un projet flutter create hello_flutter
  3. Lancez-le sur un émulateur
  4. Lancez-le sur votre téléphone physique (Android ou iOS selon votre matériel)
  5. Modifiez le texte "You have pushed the button this many times:" du fichier lib/main.dart par un texte de votre choix, et vérifiez que le Hot Reload fonctionne (le compteur ne doit pas revenir à 0)
  6. Prenez une capture d’écran de l’app tournant sur votre téléphone (ou montrez-le moi).

Voir la correction / checklist de vérification

➡️ Suite du cours

Environnement prêt ? Direction le Chapitre 1 — Flutter & Dart : les fondamentaux.

⬅️ Retour au sommaire Flutter