TRAVAUX PRATIQUES

Développement Mobile Multiplateforme

Prise en main de Flutter — VS Code, AVD & Téléphone

physique
Élément Valeur
Niveau Débutant
Durée estimée 2 heures 45 minutes
Langage Dart
Framework Flutter (dernière version stable)
Éditeur Visual Studio Code
Prérequis Notions de programmation orientée objet
Matériel requis PC + Téléphone Android avec câble USB (optionnel)

Introduction — Pourquoi Flutter avec VS Code ?

Flutter est un framework open-source développé par Google permettant de créer des applications
mobiles, web et desktop à partir d'un seul code source écrit en Dart. Ses principaux atouts :
• Multiplateforme : un seul code pour Android, iOS, Web et Desktop
• Hot Reload : voir les modifications en temps réel sans redémarrer l'application
• Widgets riches : des composants UI modernes et personnalisables inclus
• Performance native : compilé en code natif ARM pour des performances optimales

VS Code est l'éditeur recommandé par l'équipe Flutter. Il est léger, rapide, et dispose d'extensions
officielles Flutter et Dart qui offrent la même expérience qu'Android Studio avec une empreinte
mémoire bien inférieure.

Objectifs pédagogiques
À l'issue de ce TP, l'étudiant sera capable de :
• Installer le SDK Flutter et configurer VS Code comme environnement de développement
• Créer un premier projet Flutter fonctionnel
• Comprendre la structure d'un projet Flutter et le système de widgets
• Utiliser le Hot Reload pour un développement rapide
• Créer et utiliser un émulateur Android (AVD) depuis VS Code
• Déployer et tester l'application sur un téléphone physique Android

Partie I — Installation et configuration

1.1 Prérequis système
Élément Minimum requis
RAM 8 Go (16 Go recommandés)
Espace disque 10 Go libres (SDK Flutter + VS Code + SDK Android)
Système d'exploitation Windows 10/11 · macOS 10.14+ · Ubuntu 18.04+

1
 Git Requis pour l'installation du SDK Flutter
Java (JDK) JDK 17 recommandé — pour l'émulateur AVD
VS Code Version 1.75 ou supérieure

1.2 Installation du SDK Flutter

Étape 1 — Téléchargement
Rendez-vous sur [Link] et sélectionnez votre système
d'exploitation.

Étape 2 — Extraction et configuration du PATH

Sous Windows
• Extrayez l'archive ZIP dans C:\flutter (évitez Program Files)
• Ouvrez Paramètres système → Variables d'environnement
• Dans "Variables utilisateur", sélectionnez Path → Modifier
• Ajoutez le chemin C:\flutter\bin et validez
• Ouvrez un nouveau terminal PowerShell et vérifiez : flutter --version

Sous macOS / Linux

# Extraire dans le dossier home
cd ~
tar xf ~/Downloads/flutter_linux_*.[Link]

# Ajouter Flutter au PATH (dans ~/.bashrc ou ~/.zshrc)

export PATH="$PATH:$HOME/flutter/bin"

# Recharger le terminal
source ~/.bashrc # ou source ~/.zshrc

# Vérifier l'installation
flutter --version

1.3 Installation du SDK Android (sans Android Studio)

Même avec VS Code, Flutter a besoin des outils Android (SDK, ADB, émulateur). On les installe
via Android Command Line Tools — plus léger qu'Android Studio.

Étape 1 — Télécharger Command Line Tools

• Rendez-vous sur [Link]
• Téléchargez le fichier "commandlinetools-<OS>-*.zip"
• Créez le dossier C:\Android\cmdline-tools\latest\ (Windows) ou ~/Android/cmdline-
tools/latest/ (Mac/Linux)
• Extrayez le contenu de l'archive dans ce dossier

Étape 2 — Configurer les variables d'environnement

Sous Windows
# Dans Variables d'environnement système, ajouter :
ANDROID_HOME = C:\Android

2
 # Ajouter au PATH :
C:\Android\cmdline-tools\latest\bin
C:\Android\platform-tools
C:\Android\emulator

Sous macOS / Linux

# Dans ~/.bashrc ou ~/.zshrc :
export ANDROID_HOME="$HOME/Android"
export PATH="$PATH:$ANDROID_HOME/cmdline-tools/latest/bin"
export PATH="$PATH:$ANDROID_HOME/platform-tools"
export PATH="$PATH:$ANDROID_HOME/emulator"

source ~/.bashrc

Étape 3 — Installer les composants Android nécessaires

# Accepter les licences
sdkmanager --licenses

# Installer les outils essentiels

sdkmanager "platform-tools"
sdkmanager "platforms;android-34"
sdkmanager "build-tools;34.0.0"

# Pour l'émulateur AVD :

sdkmanager "emulator"
sdkmanager "system-images;android-34;google_apis;x86_64"

💡 Alternative simplifiée : Si vous avez déjà Android Studio installé sur votre machine,
vous pouvez utiliser son SDK directement. Pointez ANDROID_HOME vers le dossier SDK
existant
(ex : C:\Users\<user>\AppData\Local\Android\Sdk sur Windows).

1.4 Installation de VS Code et des extensions Flutter

Téléchargez VS Code sur [Link] et installez-le normalement.

Installer les extensions indispensables

Ouvrez VS Code, puis le panneau Extensions (Ctrl+Shift+X) et installez :
• Flutter (ID : [Link]) — extension officielle, installe Dart automatiquement
• Dart (ID : [Link]-code) — installé automatiquement avec Flutter
• Flutter Widget Snippets (ID : [Link]-snippets) — raccourcis de code utiles
• Pubspec Assist (ID : [Link]-assist) — ajoute des packages facilement

Ou via le terminal :
code --install-extension [Link]
code --install-extension [Link]-code
code --install-extension [Link]-snippets

3
 ✅ Après installation de l'extension Flutter, redémarrez VS Code.
VS Code détectera automatiquement le SDK Flutter si le PATH est correctement configuré.

1.5 Accepter les licences Android

# Accepter toutes les licences Android SDK
flutter doctor --android-licenses
# Appuyez sur "y" puis Entrée à chaque invite

1.6 Vérification avec flutter doctor

Exécutez la commande de diagnostic :
flutter doctor

# Résultat attendu :
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain - develop for Android devices
[✓] VS Code (version 1.8x.x)
[✓] • Flutter extension version x.x.x
[✓] Connected device (1 available)
[✓] Network resources
• No issues found!

⚠ Attention : Si certaines cases affichent [!] ou [✗], lisez le message —

flutter doctor indique exactement la commande à exécuter pour corriger le problème.
L'entrée "Android Studio" peut rester [✗] sans impact si VS Code est [✓].

Partie II — Création du premier projet Flutter

2.1 Créer le projet depuis VS Code
Méthode 1 — Via la palette de commandes (recommandée)
• Ouvrez VS Code et appuyez sur Ctrl+Shift+P (ou Cmd+Shift+P sur macOS)
• Tapez Flutter: New Project et appuyez sur Entrée
• Choisissez Application
• Sélectionnez un dossier de destination
• Nommez le projet mon_premier_app et validez

Méthode 2 — Via le terminal intégré VS Code

# Ouvrir le terminal dans VS Code : Ctrl+` (backtick)
flutter create mon_premier_app
cd mon_premier_app

# Ouvrir le projet dans VS Code

code .

2.2 Structure du projet Flutter

4
Explorez les fichiers dans l'explorateur de VS Code (Ctrl+Shift+E) :
mon_premier_app/
├── android/ ← Code natif Android (ne pas modifier)
├── ios/ ← Code natif iOS (ne pas modifier)
├── lib/
│ └── [Link] ← POINT D'ENTRÉE — tout le code Flutter ici
├── test/
│ └── widget_test.dart ← Tests automatisés
├── [Link] ← Dépendances et métadonnées du projet
└── [Link]

💡 À retenir : Dans Flutter, vous travaillerez essentiellement dans lib/.

[Link] est le point d'entrée. [Link] gère les dépendances.
Dans VS Code, cliquez sur un fichier .dart pour l'ouvrir avec coloration syntaxique Dart.

2.3 Comprendre le code généré

Ouvrez lib/[Link] (Ctrl+P puis tapez [Link]). Identifiez :
Élément Dart/Flutter Rôle
void main() => runApp(...) Point d'entrée de l'application
StatelessWidget Widget sans état interne (statique)
StatefulWidget Widget avec état interne (dynamique)
build() Méthode qui décrit l'interface à afficher
Scaffold Structure de base d'un écran (AppBar + Body + FAB)
setState(() {}) Déclenche la reconstruction du widget avec le nouvel état

2.4 Réécriture complète — Application de salutation

Remplacez intégralement le contenu de lib/[Link] par le code suivant. Dans VS Code, utilisez
Ctrl+A pour tout sélectionner puis collez :
import 'package:flutter/[Link]';

void main() {
runApp(const MonApp());
}

class MonApp extends StatelessWidget {

const MonApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mon Premier App Flutter',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: [Link](
seedColor: const Color(0xFF1E40AF)),
useMaterial3: true,
),

5
 home: const PageAccueil(),
);
}
}

class PageAccueil extends StatefulWidget {

const PageAccueil({[Link]});
@override
State<PageAccueil> createState() => _PageAccueilState();
}

class _PageAccueilState extends State<PageAccueil> {

final TextEditingController _nomController = TextEditingController();
String _message = 'Bonjour ENEAM !';
int _compteur = 0;
String _erreur = '';

void _saluer() {
final String nom = _nomController.[Link]();
if ([Link]) {
setState(() => _erreur = 'Veuillez entrer votre nom.');
return;
}
if ([Link] < 3) {
setState(() => _erreur = 'Le nom doit contenir au moins 3 caractères.');
return;
}
setState(() {
_message = 'Bonjour, $nom !';
_compteur = _compteur + 1;
_erreur = '';
});
}

void _reinitialiser() {
setState(() {
_message = 'Bonjour ENEAM !';
_compteur = 0;
_erreur = '';
});
_nomController.clear();
}

@override
void dispose() {
_nomController.dispose();
[Link]();
}

@override
Widget build(BuildContext context) {

6
 return Scaffold(
appBar: AppBar(
title: const Text('Mon Premier App Flutter'),
backgroundColor: const Color(0xFF1E40AF),
foregroundColor: [Link],
),
body: Padding(
padding: const [Link](24.0),
child: Column(
mainAxisAlignment: [Link],
children: [
Text(_message,
style: const TextStyle(fontSize:28,
fontWeight:[Link],
color:Color(0xFF1E40AF)),
textAlign: [Link]),
const SizedBox(height: 8),
Text('Salutations : $_compteur fois',
style: const TextStyle(color:[Link], fontSize:14)),
const SizedBox(height: 32),
TextField(
controller: _nomController,
decoration: InputDecoration(
hintText: 'Entrez votre nom',
labelText: 'Votre nom',
border: const OutlineInputBorder(),
errorText: _erreur.isNotEmpty ? _erreur : null,
),
),
const SizedBox(height: 16),
SizedBox(width: [Link],
child: ElevatedButton(
onPressed: _saluer,
style: [Link](
backgroundColor: const Color(0xFF1E40AF),
foregroundColor: [Link],
padding: const [Link](vertical:14)),
child: const Text('Me saluer', style:TextStyle(fontSize:16)))),
const SizedBox(height: 12),
SizedBox(width: [Link],
child: OutlinedButton(
onPressed: _reinitialiser,
style: [Link](
padding: const [Link](vertical:14)),
child: const Text('Réinitialiser',
style:TextStyle(fontSize:16)))),
],
),
),
);
}
}

7
Partie III — Émulateur Android (AVD) depuis VS Code (Inutile si vous
utilisez un téléphone)
L'AVD (Android Virtual Device) vous permet de tester votre application sans téléphone physique.
Dans VS Code, la gestion des AVD se fait via le terminal ou l'extension Flutter.

3.1 Créer un AVD via la ligne de commande

Étape 1 — Vérifier les images système disponibles
# Lister les images disponibles
sdkmanager --list | grep system-images

# Installer l'image Android 34 si absente

sdkmanager "system-images;android-34;google_apis;x86_64"

Étape 2 — Créer l'AVD

# Créer un émulateur nommé 'Pixel6_API34'
avdmanager create avd \
--name Pixel6_API34 \
--package "system-images;android-34;google_apis;x86_64" \
--device "pixel_6"

# Lister les AVD créés

avdmanager list avd

Étape 3 — Lancer l'émulateur

# Démarrer l'émulateur (terminal séparé, le garder ouvert)
emulator -avd Pixel6_API34

# Ou avec accélération graphique (recommandé)

emulator -avd Pixel6_API34 -gpu host

💡 Astuce VS Code : Une fois l'émulateur lancé, il apparaît automatiquement dans la

barre de statut en bas à droite de VS Code. Cliquez dessus pour sélectionner votre cible.
Vous pouvez aussi appuyer sur F5 pour lancer directement sur l'émulateur détecté.

3.2 Créer un AVD via l'extension Flutter de VS Code

L'extension Flutter intègre un gestionnaire d'appareils.
• Ouvrez la palette de commandes : Ctrl+Shift+P
• Tapez Flutter: Launch Emulator et appuyez sur Entrée
• Si aucun émulateur n'est listé, choisissez "Create Android Emulator"
• Suivez l'assistant : choisissez un modèle de téléphone et une version Android
• L'émulateur démarre automatiquement

⚠ Remarque : La création via VS Code utilise en arrière-plan avdmanager.

Si l'option 'Create Android Emulator' est grisée, vérifiez que le SDK Android
est correctement configuré avec flutter doctor.

8
3.3 Lancer l'application sur l'émulateur
Action Raccourci / Commande
Lancer l'app (avec débogage) F5 ou flutter run
Lancer sans débogage Ctrl+F5
Hot Reload (changements rapides) r dans le terminal / Ctrl+F5 dans VS Code
Hot Restart (recharge complète) R dans le terminal / Ctrl+Shift+F5
Arrêter l'application q dans le terminal / bouton Stop dans VS Code
Ouvrir DevTools Flutter Ctrl+Shift+P → Flutter: Open DevTools

💡 Différence clé : Hot Reload conserve l'état actuel (le compteur garde sa valeur).
Hot Restart repart de zéro. Utilisez Hot Reload pour les changements d'interface,
Hot Restart si vous modifiez le constructeur ou l'état initial.

3.4 Résolution des problèmes fréquents avec l'émulateur

Problème Solution
Émulateur trop lent Activez la virtualisation BIOS (Intel VT-x / AMD-V) + utiliser -
gpu host
"HAXM is not installed" Exécuter : sdkmanager
"extras;intel;Hardware_Accelerated_Execution_Manager"
Émulateur non détecté par VS Redémarrer VS Code après le démarrage de l'émulateur
Code
Emulator crash au démarrage Essayer une image sans Google APIs : system-
images;android-34;default;x86_64
'emulator' not found Vérifier que $ANDROID_HOME/emulator est dans le PATH

Partie IV — Test sur téléphone physique Android

4.1 Activer le mode développeur
• Allez dans Paramètres → À propos du téléphone
• Appuyez 7 fois sur Numéro de build
• Un message "Vous êtes maintenant développeur" apparaît
• Retournez dans Paramètres → Système → Options pour les développeurs
• Activez le Débogage USB

📱 Remarque fabricants :
Samsung : Paramètres → Gestion générale → Informations sur l'appareil → Numéro de build
Xiaomi : Paramètres → Mon appareil → Toutes les spécifications → Version MIUI
Tecno / Infinix : Paramètres → Téléphone → Numéro de build

4.2 Connexion et vérification

• Connectez le téléphone au PC via un câble USB de données (pas seulement charge)
• Acceptez l'autorisation "Débogage USB" sur l'écran du téléphone
9
 • Si demandé, choisissez le mode de connexion "Transfert de fichiers (MTP)"
• Vérifiez la détection dans le terminal VS Code (Ctrl+`) :
# Lister tous les appareils reconnus
flutter devices

# Résultat attendu :
2 connected devices:
Infinix X6815 (mobile) • RF8M8... • android-arm64 • Android 12
Chrome (web) • chrome • web-javascript • Google Chrome

💡 Astuce VS Code : Le téléphone connecté apparaît aussi dans la barre de statut

en bas à droite. Cliquez dessus pour basculer entre le téléphone et l'émulateur.
L'icône change selon l'appareil sélectionné.

4.3 Lancer l'application sur le téléphone

# Lancer sur le téléphone connecté (détection automatique)
flutter run

# Si plusieurs appareils sont connectés, spécifier l'ID

flutter run -d <device_id>

# Construire un APK à installer manuellement

flutter build apk --release
# APK généré dans : build/app/outputs/flutter-apk/[Link]

✅ Résultat attendu : L'application se lance sur votre téléphone.

Entrez votre nom, appuyez sur 'Me saluer' et observez le message et le compteur.
Modifiez une couleur dans le code → sauvegardez (Ctrl+S) → Hot Reload automatique !
Dans VS Code, le Hot Reload se déclenche à chaque sauvegarde de fichier.

4.4 Sélectionner la cible dans VS Code

VS Code offre plusieurs façons de choisir votre cible d'exécution :
• Barre de statut : cliquez sur le nom de l'appareil en bas à droite (ex: "No Device")
• Palette de commandes : Ctrl+Shift+P → "Flutter: Select Device"
• Lors du lancement F5 : si plusieurs appareils, VS Code propose un menu de sélection

4.5 Commandes utiles en cas de problème

# Téléphone non détecté — redémarrer ADB
adb kill-server && adb start-server

# Nettoyer le cache de build Flutter

flutter clean
flutter pub get

# Vérifier à nouveau la configuration complète

flutter doctor -v

10
 # Mettre à jour Flutter vers la dernière version stable
flutter upgrade

Partie V — AVD vs Téléphone physique : quand utiliser quoi ?

Critère AVD (Émulateur) Téléphone physique
Matériel requis PC suffisamment puissant Téléphone Android + câble USB
Vitesse de lancement Lent (30s à 2min) Rapide (5-10s)
Performance de l'app Variable (dépend du PC) Native — performance réelle
Hot Reload ✓ Supporté ✓ Supporté
Capteurs (GPS, gyro...) Simulés (imprécis) Réels — idéal pour les tests
Résolution / densité Configurable Réelle du téléphone
Offline / sans PC Non Oui (APK installé)
Cas d'usage Développement quotidien Tests finaux et démonstrations

💡 Recommandation : Utilisez l'AVD pendant le développement pour itérer rapidement,

et testez sur téléphone physique avant chaque rendu pour valider le comportement réel.

Partie VI — Travail à réaliser

Pour chaque exercice, fournissez le code modifié et une capture d'écran du résultat (sur AVD ou
téléphone physique).

Exercice 1 — Personnalisation du thème (2 points)

Modifiez le thème dans MonApp :
• Changez la couleur principale par une couleur de votre choix ([Link] ou code hex
personnalisé)
• Modifiez le titre de l'AppBar pour afficher votre nom complet
• Ajoutez fontFamily: 'Roboto' dans le thème
• Testez avec Hot Reload : sauvegardez (Ctrl+S) et observez le changement immédiat

Exercice 2 — Nouveau widget : carte de profil (4 points)

Au-dessus du champ de saisie, ajoutez une Card Flutter affichant :
• Un CircleAvatar avec les initiales de l'utilisateur (extraites dynamiquement du nom saisi)
• Le nom saisi affiché en gras
• La date et l'heure de la dernière salutation (utilisez [Link]().toString())

Exercice 3 — Navigation entre deux pages (4 points)

Créez lib/page_historique.dart avec un widget PageHistorique qui :
• Affiche la liste de toutes les salutations effectuées
• Reçoit la liste en paramètre : const PageHistorique({required [Link]})
• Utilise un [Link] pour afficher les éléments
• Dans [Link], ajoutez un IconButton dans l'AppBar qui navigue via [Link]()

11
Exercice 4 — Persistance locale avec shared_preferences (4 points)
Ajoutez le package dans [Link] :
dependencies:
flutter:
sdk: flutter
shared_preferences: ^2.2.0 # ajouter cette ligne
# Dans le terminal VS Code (Ctrl+`) :
flutter pub get
Utilisez ce package pour :
• Sauvegarder le dernier nom utilisé à la fermeture
• Pré-remplir le champ de saisie au prochain lancement
• Utilisez [Link](), .setString() et .getString()

Exercice 5 — Fonctionnalité libre (6 points)

Ajoutez une fonctionnalité originale. Idées possibles :
• Un mode sombre / mode clair avec un toggle dans l'AppBar
• Une animation sur le message (AnimatedOpacity ou AnimatedContainer)
• Un chronomètre qui mesure le temps depuis le lancement
• Une sélection de langue (Français / Anglais) changeant le message affiché
Ajoutez un commentaire en tête du fichier décrivant votre fonctionnalité.

Grille d'évaluation
Critère Détail Points
Application fonctionnelle L'app se lance sur AVD ou téléphone physique 4
Exercice 1 Thème personnalisé avec captures d'écran 2
Exercice 2 Carte de profil dynamique fonctionnelle 4
Exercice 3 Navigation entre deux pages opérationnelle 4
Exercice 4 Persistance locale avec shared_preferences 4
Exercice 5 Fonctionnalité originale et justifiée 6
Qualité du code Commentaires, nommage, dispose(), structure 4
(bonus)
TOTAL 20

Annexe A — Raccourcis VS Code indispensables pour Flutter

Action Raccourci Windows/Linux Raccourci macOS
Palette de commandes Ctrl+Shift+P Cmd+Shift+P
Ouvrir un fichier Ctrl+P Cmd+P
Terminal intégré Ctrl+` Cmd+`
Hot Reload (en cours r dans le terminal r dans le terminal
d'exécution)

12
Hot Restart R dans le terminal R dans le terminal
Lancer l'app (debug) F5 F5
Lancer sans debug Ctrl+F5 Cmd+F5
Arrêter l'app Shift+F5 Shift+F5
Formater le code Dart Shift+Alt+F Shift+Option+F
Renommer un symbole F2 F2
Aller à la définition F12 F12
Correction automatique Ctrl+. Cmd+.
Flutter: Select Device Ctrl+Shift+P → Select Device Cmd+Shift+P
Flutter: Open DevTools Ctrl+Shift+P → Open DevTools Cmd+Shift+P

Annexe B — Widgets Flutter essentiels

Widget Rôle
Text Afficher du texte
TextField Saisie de texte
ElevatedButton Bouton principal surélevé
OutlinedButton Bouton avec bordure
Column Disposer les enfants verticalement
Row Disposer les enfants horizontalement
Container Boîte avec marges, padding, couleur
Scaffold Structure d'écran complète
ListView Liste scrollable
Card Surface élevée avec ombre
CircleAvatar Avatar circulaire
SizedBox Espaceur / taille fixe
Padding Ajouter du padding autour d'un widget
AnimatedOpacity Animation de fondu

Ressources utiles
• Documentation Flutter : [Link]
• Catalogue des widgets : [Link]
• Packages Dart/Flutter : [Link]
• VS Code + Flutter : [Link]
• Codelabs Flutter : [Link]

Niveau : Débutant | Éditeur : VS Code | ASE — Direction Académique

13