Avant de créer votre première application Flutter, vous devez installer les outils nécessaires. Cette procédure est simple et ne prendra qu'une quinzaine de minutes. Nous allons installer Flutter, configurer votre éditeur de code, et lancer votre premier simulateur. À l'issue de cette section, vous serez prêt à développer vos premières applications Flutter. 🚀

2.1Installation et outils

2.1.1 – Installer Flutter et le SDK

🎯 Objectif

Installer Flutter sur votre ordinateur et vérifier que l'installation fonctionne correctement.

💡 Installation pas à pas

Étape 1 : Télécharger Flutter

Rendez-vous sur flutter.dev/docs/get-started/install/windows
Téléchargez le SDK Flutter pour Windows (fichier ZIP d'environ 1 Go)

Étape 2 : Extraire et placer Flutter

Extrayez le fichier ZIP dans un dossier facile d'accès
Par exemple : C:\src\flutter

Ne placez PAS Flutter dans un dossier avec des espaces ou des caractères spéciaux (comme Program Files sur Windows). Cela peut causer des problèmes lors de l'exécution des commandes.

Étape 3 : Ajouter Flutter au PATH

Ouvrez "Variables d'environnement" dans le Panneau de configuration
Dans "Variables système", trouvez "Path" et cliquez sur "Modifier"
Ajoutez le chemin vers le dossier bin de Flutter : C:\src\flutter\bin
Cliquez sur "OK" pour valider

Étape 4 : Vérifier l'installation

Ouvrez un nouveau terminal (important : un nouveau terminal pour que le PATH soit pris en compte) et exécutez la commande suivante :

flutter --version

✅ Résultat attendu : Vous devriez voir quelque chose comme :

Flutter 3.x.x • channel stable • https://github.com/flutter/flutter.git
Framework • revision xxxxx
Engine • revision xxxxx
Tools • Dart 2.x.x • DevTools 2.x.x

Flutter est un SDK (Software Development Kit) qui contient tous les outils nécessaires pour développer des applications. En l'ajoutant au PATH, vous pouvez utiliser la commande flutter depuis n'importe quel terminal. Cette configuration permet d'accéder aux outils Flutter depuis n'importe quel emplacement de votre système. 🔧

✏️ Mini-exercice

Exécutez la commande suivante pour consulter toutes les commandes Flutter disponibles :

flutter --help

Explorez les différentes options disponibles. Ne vous inquiétez pas, nous utiliserons les principales commandes au fur et à mesure de ce cours.

✅ Vérification complète
Pour vérifier que tout est correctement installé, exécutez :
flutter doctor

Cette commande vérifie votre environnement et indique les éléments manquants. Ne vous inquiétez pas si certains éléments sont marqués comme manquants, nous les installerons dans les prochaines sections.

2.1.2 – Configurer Android Studio / VS Code

🎯 Objectif

Configurer votre éditeur de code pour développer efficacement avec Flutter.

Choix de l'éditeur
Vous pouvez utiliser Android Studio (recommandé pour débuter) ou VS Code (plus léger). Les deux éditeurs fonctionnent très bien avec Flutter.

💡 Option 1 : Android Studio (Recommandé pour débuter)

Étape 1 : Installer Android Studio

Téléchargez Android Studio depuis developer.android.com/studio
Installez-le (c'est un gros fichier, environ 1 Go)
Lancez Android Studio

Étape 2 : Installer les plugins Flutter

Dans Android Studio, allez dans File → Settings
Allez dans Plugins
Cliquez sur Marketplace et recherchez "Flutter"
Installez le plugin Flutter (il installera automatiquement le plugin Dart également)
Redémarrez Android Studio

Étape 3 : Configurer le SDK Flutter

Dans Android Studio, allez dans File → Settings → Languages & Frameworks → Flutter
Cliquez sur le dossier à côté de "Flutter SDK path"
Sélectionnez le dossier où vous avez extrait Flutter (ex: C:\src\flutter)
Cliquez sur Apply puis OK

💡 Option 2 : VS Code (Plus léger)

Étape 1 : Installer VS Code

Téléchargez VS Code depuis code.visualstudio.com
Installez-le (c'est rapide, environ 100 Mo)

Étape 2 : Installer l'extension Flutter

Ouvrez VS Code
Cliquez sur l'icône Extensions dans la barre latérale (ou appuyez sur Ctrl+Shift+X)
Recherchez "Flutter" dans la barre de recherche
Installez l'extension Flutter (publiée par Dart Code)
L'extension Dart sera installée automatiquement
Redémarrez VS Code

Étape 3 : Vérifier la configuration

Ouvrez VS Code
Appuyez sur Ctrl+Shift+P
Tapez "Flutter: New Project"
Si vous voyez cette option, la configuration est correcte. ✅

Les plugins Flutter ajoutent des fonctionnalités essentielles à votre éditeur : coloration syntaxique pour Dart, autocomplétion intelligente, débogage, et surtout le Hot Reload (nous aborderons cette fonctionnalité dans les prochaines sections). Ces outils facilitent considérablement le développement en Flutter. 🤖

✏️ Mini-exercice

Dans votre éditeur configuré, créez un nouveau fichier test.dart et saisissez ce code :

void main() {
  print('Hello Flutter !');
}

✅ Résultat attendu : Vous devriez observer la coloration syntaxique et l'autocomplétion fonctionner. C'est un bon indicateur que la configuration est correcte. 🎉

Si vous utilisez VS Code, installez également l'extension "Error Lens" pour visualiser les erreurs directement dans le code. Cette extension améliore considérablement l'expérience de développement.

2.1.3 – Lancer un simulateur / connecter un smartphone

🎯 Objectif

Configurer un appareil (virtuel ou physique) pour tester vos applications Flutter.

Deux options
Vous pouvez utiliser un émulateur Android (appareil virtuel) ou un smartphone Android réel. Les deux options fonctionnent très bien.

💡 Option 1 : Émulateur Android (Android Studio)

Étape 1 : Installer l'émulateur

Ouvrez Android Studio
Allez dans Tools → Device Manager
Cliquez sur Create Device
Choisissez un appareil (par exemple "Pixel 5")
Cliquez sur Next
Téléchargez une image système (recommandé : la dernière version de "R" ou "S")
Cliquez sur Finish

Étape 2 : Lancer l'émulateur

Dans Device Manager, cliquez sur le bouton ▶️ Play à côté de votre appareil
L'émulateur va démarrer (c'est normal si le démarrage est un peu long la première fois)
Une fois lancé, vous verrez un téléphone Android sur votre écran. 📱

💡 Option 2 : Smartphone réel (Recommandé pour les performances)

Activez le Mode développeur sur votre téléphone Android :
- Allez dans Paramètres → À propos du téléphone
- Appuyez 7 fois sur "Numéro de build"
- Vous verrez un message "Vous êtes maintenant développeur"
Activez le Débogage USB :
- Retournez dans Paramètres
- Allez dans Options développeur
- Activez Débogage USB
Connectez votre téléphone à votre ordinateur avec un câble USB
Acceptez l'autorisation de débogage sur votre téléphone (une popup apparaîtra)

📖 Vérifier que tout fonctionne

Ouvrez un terminal (PowerShell ou Invite de commandes) et exécutez :

flutter devices

✅ Résultat attendu : Vous devriez voir au moins un appareil listé, par exemple :

1 connected device:

sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33)

Ou si vous avez connecté un téléphone réel :

1 connected device:

SM G950F (mobile) • R58M1234567 • android-arm64 • Android 9 (API 28)

Flutter nécessite un appareil (virtuel ou réel) pour exécuter vos applications. L'émulateur est pratique car il permet de tester différentes tailles d'écran, tandis qu'un téléphone réel offre de meilleures performances et un retour plus réaliste. Les deux options sont valides. 🎯

✏️ Mini-exercice

Exécutez cette commande pour consulter les détails de vos appareils :

flutter doctor -v

Cette commande affiche l'état complet de votre installation. Vérifiez que vous avez au moins un appareil disponible dans la section "Connected devices".

✅ Prochaine étape
Parfait ! Vous disposez maintenant de :

✅ Flutter installé
✅ Votre éditeur configuré
✅ Un appareil prêt à recevoir vos applications

Vous êtes prêt à créer votre première application Flutter ! Nous aborderons cela dans le prochain chapitre. 🚀

🎉 Félicitations !

Vous avez terminé la configuration de votre environnement Flutter. C'est la partie la plus technique, et vous l'avez accomplie avec succès ! Nous allons maintenant passer à la partie pratique : créer votre première application. Dans le prochain chapitre, nous découvrirons la structure d'un projet Flutter et vous modifierez votre premier code. À très bientôt ! 💪