Comment configurer un émulateur pour VSCode ?

Objectifs du cours

• À la fin de ce cours, vous serez capable de :
  • expliquer ce qu'est un émulateur Android et quand l'utiliser plutôt qu'un téléphone réel ;
  • vérifier que votre ordinateur peut faire tourner un émulateur (mémoire, disque, virtualisation) ;
  • activer l'accélération matérielle, indispensable pour un émulateur rapide ;
  • installer les composants nécessaires avec le SDK Manager d'Android Studio ;
  • créer un appareil virtuel Android (AVD) avec le Device Manager;
  • lancer l'émulateur depuis Android Studio, depuis VS Code ou depuis le terminal ;
  • exécuter, recharger et déboguer une application Flutter sur l'émulateur ;
  • résoudre seul les problèmes les plus fréquents.

Description du cours

• Ce cours vous guide étape par étape, de la vérification de votre ordinateur jusqu'à l'exécution d'une application Flutter dans un émulateur piloté depuis Visual Studio Code. Chaque étape se termine par un point de contrôle: ne passez à l'étape suivante que si le résultat attendu est obtenu.
• Public visé : développeurs Flutter débutants, étudiants en développement mobile.
• Prérequis : VS Code avec les extensions Flutter et Dart, le SDK Flutter et Android Studio installés (voir les leçons précédentes du chapitre).
• Durée estimée : 2 à 3 heures, dont une partie consacrée aux téléchargements (prévoir une bonne connexion Internet).

Qu'est-ce qu'un émulateur Android ?

• Un émulateur est un logiciel qui imite un appareil sur votre ordinateur. L'émulateur Android fait tourner un vrai système Android dans une fenêtre : vous pouvez y installer et tester vos applications sans téléphone.
• Chaque téléphone virtuel s'appelle un AVD (Android Virtual Device). Un AVD est défini par un modèle d'appareil (taille d'écran, par exemple un Pixel) et une image système (une version d'Android).
• Émulateur ou téléphone réel ? Les deux sont complémentaires :

Étape 1 : vérifier que votre ordinateur est compatible

• 1.1. Mémoire et espace disque

  • Mémoire vive : 8 Go minimum, 16 Go recommandés (Android Studio, VS Code et l'émulateur tournent en même temps).
  • Espace disque : prévoir au moins 15 Go libres, de préférence sur un SSD. Chaque image système pèse plusieurs Go.

• 1.2. La virtualisation est-elle activée ?

  • L'émulateur a besoin de la virtualisation matérielle du processeur (Intel VT-x ou AMD-V/SVM). Pour la vérifier sous Windows :
    1. ouvrir le Gestionnaire des tâches (Ctrl + Maj + Échap) ;
    2. onglet Performances, puis Processeur;
    3. en bas à droite, lire la ligne Virtualisation.
  • Si elle indique Désactivé, il faut l'activer dans le BIOS/UEFI : redémarrer le PC, entrer dans le BIOS (touche F2, F10, Suppr ou Échap selon la marque), puis activer Intel Virtualization Technology (VT-x) ou SVM Mode (AMD), enregistrer et redémarrer.

Étape 2 : activer l'accélération matérielle

• Sans accélération, l'émulateur est extrêmement lent ou refuse de démarrer. Le composant à utiliser dépend de votre système :

Étape 3 : installer les composants avec le SDK Manager

• Ouvrir Android Studio. Sur l'écran d'accueil, cliquer sur More Actions → SDK Manager (dans un projet ouvert : Tools → SDK Manager).

• 3.1. Onglet SDK Platforms

  • Cocher la dernière version stable d'Android si elle n'est pas déjà installée.

• 3.2. Onglet SDK Tools

  • Vérifier que les éléments suivants sont cochés (statut Installed) :
    • Android SDK Build-Tools;
    • Android SDK Command-line Tools (latest): indispensable pour accepter les licences depuis Flutter ;
    • Android Emulator;
    • Android SDK Platform-Tools (contient adb).
  • Cliquer sur Apply, accepter les licences et attendre la fin des téléchargements.
  • Noter le chemin affiché en haut de la fenêtre, Android SDK Location. Sous Windows, c'est en général C:\Users\VotreNom\AppData\Local\Android\Sdk.

• 3.3. Accepter les licences Android pour Flutter

  • Dans un terminal, exécuter la commande suivante et répondre y à chaque question :

Étape 4 : rendre les outils accessibles depuis le terminal

• Flutter trouve le SDK Android tout seul, mais pour utiliser adb et emulator dans un terminal, il faut déclarer leur emplacement dans les variables d'environnement.

• 4.1. Sous Windows

  1. Menu Démarrer : rechercher Modifier les variables d'environnement pour votre compte.
  2. Dans Variables utilisateur, cliquer sur Nouvelle… et créer ANDROID_HOME avec pour valeur le chemin noté à l'étape 3.2.
  3. Sélectionner la variable Path, cliquer sur Modifier, puis ajouter deux lignes :
     %ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
  4. Valider avec OK, puis fermer et rouvrir VS Code et tous les terminaux pour qu'ils prennent en compte les nouvelles variables.

• 4.2. Sous macOS et Linux

  • Ajouter ces lignes à la fin de ~/.zshrc (macOS) ou ~/.bashrc (Linux), puis rouvrir le terminal :

Étape 5 : créer un appareil virtuel (AVD)

• 5.1. Ouvrir le Device Manager

  • Depuis l'écran d'accueil d'Android Studio : More Actions → Virtual Device Manager.
  • Depuis un projet ouvert : View → Tool Windows → Device Manager, puis cliquer sur + et Create Virtual Device.

• 5.2. Suivre l'assistant de création

  1. Choisir le matériel (Select Hardware) : catégorie Phone, puis un modèle récent, par exemple Pixel 8. Les modèles avec le logo Google Play incluent le Play Store. Cliquer sur Next.
  2. Choisir l'image système (System Image) : prendre une version récente proposée dans l'onglet Recommended. Une icône de téléchargement indique que l'image n'est pas encore installée : cliquer dessus et attendre la fin du téléchargement. Cliquer sur Next.
  3. Vérifier la configuration (Verify Configuration) : donner un nom simple sans espace, par exemple Pixel_8_API_35. Cliquer sur Show Advanced Settings pour ajuster les réglages du tableau ci-dessous, puis sur Finish.

Étape 6 : lancer l'émulateur

• Le premier démarrage peut prendre une à deux minutes ; les suivants sont beaucoup plus rapides grâce au Quick boot. Trois méthodes sont possibles :

• Méthode A : depuis VS Code (conseillée)

  1. Ouvrir un projet Flutter dans VS Code.
  2. Cliquer sur le nom de l'appareil affiché dans la barre d'état, en bas à droite (par exemple Windows (windows-x64) ou No Device).
     Vous pouvez aussi ouvrir la palette de commandes (Ctrl + Maj + P) et taper Flutter: Select Device.
  3. Dans la liste, choisir votre AVD (Pixel_8_API_35) : VS Code démarre l'émulateur et le sélectionne comme appareil cible.

• Méthode B : depuis Android Studio

  • Dans le Device Manager, onglet Virtual, cliquer sur le bouton Lancer (triangle) en face de l'AVD.

• Méthode C : depuis le terminal

Étape 7 : exécuter une application Flutter sur l'émulateur

• Créer un projet de test et l'ouvrir dans VS Code :

Utiliser l'émulateur au quotidien

• La barre d'outils de l'émulateur

  • À côté de l'écran du téléphone, la barre d'outils permet notamment de faire pivoter l'appareil (pour tester le mode paysage), de régler le volume, de prendre une capture d'écran et d'utiliser les boutons Retour, Accueil et Applications récentes.
  • Le bouton … (Extended controls) ouvre les contrôles étendus : position GPS, niveau de batterie, type de réseau, appels et SMS simulés, etc. Très utile pour tester une application de localisation sans se déplacer.

• Gérer les AVD dans le Device Manager

  • Menu ⋮ de l'AVD → Stop: arrêter l'émulateur proprement.
  • Menu ⋮ → Wipe Data: remettre le téléphone virtuel à zéro (comme une réinitialisation d'usine). Utile si l'émulateur est plein ou instable.
  • Icône crayon (Edit) : modifier la RAM, le mode graphique ou le démarrage. Passer temporairement Boot option en Cold boot pour forcer un démarrage complet après un blocage.
  • Créer plusieurs AVD (petit écran, grande tablette, ancienne version d'Android) pour tester le responsive de vos applications.

• Commandes utiles

L'extension Android iOS Emulator (facultative)

• L'extension Flutter de VS Code sait déjà lancer les émulateurs (étape 6, méthode A) : l'extension Android iOS Emulator n'est donc pas obligatoire. Elle ajoute simplement un bouton pour lancer un émulateur sans ouvrir de projet Flutter.
• Pour l'installer et la configurer :
  1. ouvrir l'onglet des extensions (Ctrl + Maj + X), rechercher Android iOS Emulator et cliquer sur Installer;
  2. ouvrir les paramètres (Ctrl + ,), rechercher Android iOS Emulator et indiquer le chemin du dossier emulator du SDK (par exemple C:\Users\VotreNom\AppData\Local\Android\Sdk\emulator) ;
  3. cliquer sur l'icône de téléphone ajoutée en haut à droite de l'éditeur, puis choisir l'AVD à lancer.
• 

Résolution des problèmes courants

Activité pratique : votre premier émulateur

• Objectif : valider toute la chaîne, du PC jusqu'à l'application Flutter.
• Consignes :
  1. Relever dans le Gestionnaire des tâches l'état de la virtualisation de votre poste.
  2. Exécuter emulator -accel-check et noter le résultat.
  3. Créer deux AVD : un téléphone (Pixel 8) et une tablette (Pixel Tablet), avec la même version d'Android.
  4. Lancer le projet test_emulateur sur le téléphone depuis VS Code, puis sur la tablette depuis le terminal avec flutter run -d <identifiant> (identifiant donné par flutter devices).
  5. Faire pivoter le téléphone en mode paysage, puis tester un hot reload et un hot restart: expliquer la différence observée sur le compteur.
  6. Dans les contrôles étendus, changer la position GPS et le niveau de batterie, puis faire une capture d'écran de l'émulateur.
  7. Rendre un court compte rendu avec les résultats des points 1 et 2, les commandes utilisées et vos captures d'écran.