1.3.1 – Installation & outils (Windows + Android Studio)

Maintenant que vous connaissez Flutter et ses atouts, il est temps de passer à la pratique. Dans cette section, nous allons voir comment installer Flutter sur Windows et configurer Android Studio pour développer vos applications Android avec Flutter.

💻 Prérequis système pour Windows

Avant de commencer, assurez-vous que votre ordinateur Windows répond aux exigences minimales.

Configuration requise

• Système d'exploitation : Windows 10 version 1803 ou supérieure (64 bits)
• Processeur : Intel Core i5 ou équivalent (i7/i9 recommandé)
• RAM : Minimum 8 Go (16 Go recommandés)
• Espace disque : Au moins 10 Go d'espace libre
  • Flutter SDK : ~2,5 Go
  • Android Studio : ~3 Go
  • Android SDK et outils : ~4 Go
  • Espace de travail : ~500 Mo minimum
• Outils requis : PowerShell 5.0 ou plus récent, Git pour Windows
• Virtualisation : Intel VT-x ou AMD-V activée dans le BIOS (pour l'émulateur Android)

📥 Étape 1 : Installation de Git pour Windows

Flutter nécessite Git pour fonctionner. Si vous ne l'avez pas déjà installé, commencez par là.

1. Téléchargez Git depuis git-scm.com/download/win
2. Exécutez l'installateur
3. Gardez les options par défaut (recommandé)
4. Terminez l'installation

Vérifiez que Git est installé en ouvrant PowerShell et en tapant :

# Vérifier la version de Git
git --version

📥 Étape 2 : Installation du SDK Flutter

Maintenant, installons Flutter sur votre ordinateur Windows.

1. Télécharger Flutter
   • Rendez-vous sur flutter.dev/docs/get-started/install/windows
   • Cliquez sur "Get Started"
   • Choisissez "Windows"
   • Téléchargez le fichier ZIP du SDK Flutter (environ 1,5 Go)
2. Extraire le fichier
   • Créez un dossier pour Flutter, par exemple : C:\dev\flutter
   • Extrayez le contenu du fichier ZIP dans ce dossier
   • Important : N'installez pas dans C:\Program Files\ (peut causer des problèmes de permissions)
3. Ajouter Flutter au PATH
   • Ouvrez le menu Démarrer et recherchez "Variables d'environnement"
   • Cliquez sur "Modifier les variables d'environnement système"
   • Cliquez sur "Variables d'environnement"
   • Dans "Variables utilisateur", sélectionnez "Path" et cliquez sur "Modifier"
   • Cliquez sur "Nouveau" et ajoutez : C:\dev\flutter\bin
   • Cliquez sur "OK" pour tout fermer

✅ Étape 3 : Vérification de l'installation Flutter

Ouvrez PowerShell et vérifiez que Flutter est correctement installé :

# Vérifier que Flutter est installé
flutter --version

# Diagnostic complet de votre installation
flutter doctor

La commande flutter doctor va analyser votre système et afficher un rapport. Pour l'instant, il est normal d'avoir des croix rouges [✗] pour Android Studio et les outils Android. Nous allons les installer dans les étapes suivantes.

Capture d'écran de la sortie de flutter doctor

Une fenêtre de terminal montrant la sortie de la commande flutter doctor avec :
• Des coches vertes [✓] pour les éléments correctement installés
• Des croix rouges [✗] pour les éléments manquants
• Des points d'exclamation [!] pour les avertissements
• Des instructions détaillées pour corriger chaque problème

🛠️ Étape 4 : Installation d'Android Studio

Android Studio est l'IDE officiel pour le développement Android. C'est l'environnement de développement recommandé pour Flutter et le développement Android moderne. Elle inclut tous les outils nécessaires : éditeur de code, émulateurs Android, débogueur, et bien plus.

Téléchargement et installation

1. Télécharger Android Studio
   • Rendez-vous sur developer.android.com/studio
   • Téléchargez la version Windows (environ 1,1 Go)
   • Vérifiez que vous téléchargez bien la dernière version stable d'Android Studio
2. Lancer l'installateur
   • Double-cliquez sur le fichier téléchargé
   • Suivez l'assistant d'installation
   • Gardez les options par défaut (recommandé)
   • L'installation prend environ 5-10 minutes
3. Premier démarrage d'Android Studio
   • Lancez Android Studio après l'installation
   • L'assistant de configuration se lance automatiquement
   • Choisissez "Standard" pour l'installation
   • Sélectionnez votre thème (clair ou sombre)
   • Android Studio va télécharger le SDK Android et les outils nécessaires (environ 3 Go)
   • Cette étape peut prendre 10-30 minutes selon votre connexion

Fonctionnalités d'Android Studio

Android Studio offre plusieurs fonctionnalités importantes :

• Performance améliorée : Démarrage plus rapide, indexation plus efficace
• Nouvel éditeur : Meilleure autocomplétion et suggestions
• Device Manager modernisé : Interface simplifiée pour gérer les émulateurs
• Support Kotlin 2.0 : Dernières fonctionnalités du langage
• Intégration IA : Suggestions de code intelligentes (Gemini Code Assist)
• Émulateurs optimisés : Meilleure performance, moins de RAM utilisée

⚙️ Étape 5 : Configuration des plugins Flutter et Dart

Maintenant qu'Android Studio est installé, ajoutons le support pour Flutter.

1. Ouvrir le gestionnaire de plugins
   • Dans Android Studio, cliquez sur File → Settings (ou Ctrl+Alt+S)
   • Dans le menu de gauche, cliquez sur Plugins
2. Rechercher et installer Flutter
   • Dans l'onglet "Marketplace", recherchez Flutter
   • Cliquez sur le plugin "Flutter" (par flutter.dev)
   • Cliquez sur "Install"
   • Le plugin Dart sera automatiquement installé en même temps
3. Redémarrer Android Studio
   • Cliquez sur "Restart IDE" quand demandé
   • Android Studio va redémarrer avec le support Flutter activé

📱 Étape 6 : Créer un émulateur Android

Pour tester vos applications Flutter sans appareil physique, vous devez créer un émulateur Android (AVD - Android Virtual Device).

1. Ouvrir le Device Manager
   • Dans Android Studio, l'icône du Device Manager est dans la barre d'outils en haut
   • Ou via le menu : Tools → Device Manager
2. Créer un nouvel appareil virtuel
   • Cliquez sur le bouton "+" ou "Create Device"
   • Choisissez un modèle d'appareil (recommandé : Pixel 6 ou Pixel 7)
   • Cliquez sur "Next"
3. Sélectionner une image système
   • Choisissez API Level 34 (Android 14) ou API Level 33 (Android 13)
   • Prenez la version x86_64 (plus rapide sur PC Windows)
   • Si l'image n'est pas déjà téléchargée, cliquez sur "Download" à côté
   • Attendez le téléchargement (environ 1 Go)
   • Cliquez sur "Next"
4. Configurer l'AVD
   • Donnez un nom à votre émulateur (ex: "Flutter Pixel 6")
   • Configuration recommandée :
     • RAM : 2048 Mo (2 Go)
     • Heap : 512 Mo
     • Stockage : 2 Go minimum
   • Cliquez sur "Finish"

✅ Étape 7 : Vérification complète avec flutter doctor

Une fois tout installé, vérifiez que votre environnement est prêt.

# Vérifier Flutter
flutter --version

# Diagnostic complet
flutter doctor -v

# Lister les appareils disponibles (émulateurs et physiques)
flutter devices

# Créer un projet de test
flutter create mon_premier_projet
cd mon_premier_projet

# Lancer l'application
flutter run

Si flutter doctor affiche toutes les coches vertes (ou au moins celles pour votre plateforme cible), félicitations ! Votre environnement est prêt.

Schéma de l'environnement de développement Flutter sous Windows

1.3.3 – runApp, MaterialApp

Maintenant que vous avez créé votre projet Flutter, il est temps de comprendre comment fonctionne le code du fichier main.dart. Dans cette section, nous allons décortiquer les deux fonctions essentielles qui démarrent toute application Flutter : runApp() et MaterialApp.

🚀 La fonction main() - Le point d'entrée

Comme dans tout programme Dart, l'exécution commence par la fonction main(). C'est le point d'entrée de votre application.

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

Cette fonction fait une seule chose : elle appelle runApp() en lui passant un widget (ici MyApp).

🎯 runApp() - Initialiser l'application Flutter

La fonction runApp() est fournie par Flutter. Elle prend un widget en paramètre et en fait la racine de votre application.

// Fonction fournie par Flutter
void runApp(Widget app) {
  // Initialise le framework Flutter
  // Configure le moteur de rendu
  // Affiche le widget à l'écran
}

Que fait runApp() exactement ?

1. Initialise le framework : Configure tous les systèmes internes de Flutter
2. Attache le widget à l'écran : Le widget passé devient la racine de l'arbre des widgets
3. Lance le premier rendu : Affiche l'interface à l'écran
4. Démarre la boucle d'événements : Écoute les interactions utilisateur

📱 MaterialApp - Le widget racine

MaterialApp est un widget spécial fourni par Flutter. Il configure toute votre application pour utiliser le Material Design de Google.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Rôle de MaterialApp

MaterialApp configure automatiquement :

• Le thème : Couleurs, polices, styles de toute l'application
• La navigation : Système de routes et de pages
• Les localisations : Support multilingue
• Les animations : Transitions entre pages
• Les overlays : Dialogues, snackbars, etc.

🔧 Propriétés importantes de MaterialApp

1. title - Le titre de l'application

MaterialApp(
  title: 'Ma Super App',  // Titre de l'app (visible dans le multitâche)
  // ...
)

Le title est utilisé par le système d'exploitation pour identifier votre application dans le gestionnaire de tâches.

2. home - La page d'accueil

MaterialApp(
  home: const MyHomePage(title: 'Accueil'),  // Premier écran affiché
  // ...
)

home définit le premier écran que verra l'utilisateur au lancement de l'application.

3. theme - Le thème visuel

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    useMaterial3: true,  // Utiliser Material Design 3
  ),
  // ...
)

Le theme définit l'apparence globale de votre application : couleurs primaires, secondaires, polices, formes des boutons, etc.

4. debugShowCheckedModeBanner - Bannière de debug

MaterialApp(
  debugShowCheckedModeBanner: false,  // Masquer "DEBUG"
  // ...
)

Par défaut, Flutter affiche une bannière "DEBUG" en haut à droite en mode développement. Cette propriété permet de la masquer.

5. routes - Navigation entre écrans

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/profile': (context) => ProfileScreen(),
    '/settings': (context) => SettingsScreen(),
  },
)

Les routes définissent la navigation dans votre application. Chaque route est associée à un écran.

6. darkTheme - Mode sombre

MaterialApp(
  theme: ThemeData.light(),      // Thème clair
  darkTheme: ThemeData.dark(),   // Thème sombre
  themeMode: ThemeMode.system,   // Suit les préférences système
)

🎨 Exemple complet avec explications

Reprenons le code de main.dart et expliquons chaque partie :

// 1. Import du package Flutter Material Design
import 'package:flutter/material.dart';

// 2. Point d'entrée de l'application
void main() {
  // 3. Lancer l'application avec MyApp comme widget racine
  runApp(const MyApp());
}

// 4. Widget racine de l'application (StatelessWidget car il ne change pas)
class MyApp extends StatelessWidget {
  // Constructeur avec une clé pour optimisation
  const MyApp({super.key});

  // 5. Méthode build : définit ce que affiche ce widget
  @override
  Widget build(BuildContext context) {
    // 6. Retourner MaterialApp comme widget principal
    return MaterialApp(
      // Titre de l'application (multitâche)
      title: 'Flutter Demo',
      
      // Configuration du thème
      theme: ThemeData(
        // Palette de couleurs générée depuis violet
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // Utiliser Material Design 3 (plus moderne)
        useMaterial3: true,
      ),
      
      // Page d'accueil de l'application
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

🔄 Flux d'exécution

Voici comment Flutter démarre votre application :

Comprendre l’arborescence des widgets Flutter

Flux d'exécution d'une application Flutter

1. Lancement
• Le système lance l'application
• Dart exécute la fonction main()

2. Initialisation
• main() appelle runApp(MyApp())
• Flutter initialise le framework

3. Construction du widget racine
• Flutter appelle MyApp.build()
• MyApp retourne un MaterialApp

4. Configuration de l'application
• MaterialApp configure le thème
• MaterialApp charge la page home

5. Affichage
• La page d'accueil s'affiche à l'écran
• L'application est prête !

🎯 Modifier votre première application

Essayons de personnaliser MaterialApp pour mieux comprendre :

Exercice 1 : Changer le titre

MaterialApp(
  title: 'Mon Application',  // Changez ce texte
  // ...
)

Sauvegardez et regardez le titre dans le multitâche de votre téléphone/émulateur.

Exercice 2 : Changer la couleur principale

theme: ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),  // Essayez différentes couleurs
  useMaterial3: true,
),

Sauvegardez (Hot Reload) et voyez la barre d'application changer de couleur !

Exercice 3 : Masquer la bannière DEBUG

MaterialApp(
  debugShowCheckedModeBanner: false,  // Ajoutez cette ligne
  title: 'Mon Application',
  // ...
)

La bannière rouge "DEBUG" disparaît !

📱 CupertinoApp - Alternative iOS

Flutter fournit aussi CupertinoApp pour créer des applications avec le design iOS (Cupertino).

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'App iOS Style',
      theme: const CupertinoThemeData(
        primaryColor: CupertinoColors.systemBlue,
      ),
      home: const CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Accueil'),
        ),
        child: Center(
          child: Text('Style iOS'),
        ),
      ),
    );
  }
}

🔍 Approfondir : Options avancées de MaterialApp

Localisation multilingue

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  localizationsDelegates: const [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en', ''), // Anglais
    Locale('fr', ''), // Français
    Locale('es', ''), // Espagnol
  ],
  // ...
)

Gestion des erreurs

MaterialApp(
  builder: (context, widget) {
    // Personnaliser l'apparence de toute l'app
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: widget!,
    );
  },
  // ...
)

Redirection de navigation

MaterialApp(
  onGenerateRoute: (settings) {
    // Logique personnalisée pour la navigation
    if (settings.name == '/special') {
      return MaterialPageRoute(
        builder: (context) => SpecialScreen(),
      );
    }
    return null;
  },
  // ...
)

💡 Points clés à retenir

• main() : Point d'entrée de l'application, appelle runApp()
• runApp() : Initialise Flutter et affiche le widget racine
• MaterialApp : Widget racine qui configure toute l'application
• title : Nom de l'application dans le multitâche
• theme : Apparence globale (couleurs, styles)
• home : Premier écran affiché
• StatelessWidget : Widget qui ne change pas (nous verrons StatefulWidget plus tard)
• build() : Méthode qui définit ce qu'affiche un widget

🎓 Mini-projet : Créer une application personnalisée

Créons une application simple pour mettre en pratique ce que nous avons appris :

import 'package:flutter/material.dart';

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

class MonApplication extends StatelessWidget {
  const MonApplication({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Configuration de l'application
      debugShowCheckedModeBanner: false,
      title: 'Ma Première App',
      
      // Thème personnalisé
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.teal,
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      
      // Page d'accueil
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bienvenue'),
          centerTitle: true,
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.star,
                size: 100,
                color: Colors.teal,
              ),
              SizedBox(height: 20),
              Text(
                'Bonjour Flutter !',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 10),
              Text(
                'Ma première application personnalisée',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Cette application affiche un écran simple avec une étoile et un message de bienvenue. Copiez ce code dans votre main.dart, sauvegardez et admirez le résultat !

1.3.3 – Exécution sur émulateur / mobile

Vous avez créé votre projet Flutter et compris la structure du code. Il est maintenant temps d'exécuter votre application sur différents appareils ! Dans cette section, nous allons voir comment lancer votre app sur un émulateur Android, un appareil physique, et même tester sur d'autres plateformes comme Windows ou le Web.

📱 Exécution sur émulateur Android

L'émulateur Android est parfait pour tester rapidement votre application sans avoir besoin d'un appareil physique.

Vérifier les émulateurs disponibles

Dans Android Studio, en haut de la fenêtre, vous voyez le sélecteur d'appareil. Cliquez dessus pour voir les options disponibles.

Si vous n'avez pas d'émulateur

Si aucun émulateur n'apparaît, créez-en un :

1. Cliquez sur le sélecteur d'appareil
2. Sélectionnez "Device Manager"
3. Dans le panneau qui s'ouvre, cliquez sur "Create Device"

4. Choisissez un modèle d'appareil (ex: Pixel 6)
5. Cliquez sur "Next"

6. Sélectionnez une image système (recommandé : UpsideDownCake - API 34)
7. Si l'image n'est pas téléchargée, cliquez sur "Download" (cela peut prendre quelques minutes)
8. Une fois téléchargée, cliquez sur "Next"

9. Vérifiez la configuration et cliquez sur "Finish"

Démarrer l'émulateur

Une fois l'émulateur créé :

1. Dans le Device Manager, vous voyez votre nouvel émulateur
2. Cliquez sur le bouton ▶️ (Play) à côté de son nom
3. L'émulateur se lance (cela prend 30 secondes à 1 minute la première fois)
4. Vous voyez l'écran Android s'afficher dans une fenêtre séparée

Lancer votre application sur l'émulateur

Maintenant que l'émulateur est en cours d'exécution :

1. Retournez dans Android Studio
2. Vérifiez que votre émulateur est sélectionné dans le sélecteur d'appareil (en haut)
3. Cliquez sur le bouton vert ▶️ Run (ou appuyez sur Shift+F10)
4. Android Studio compile et installe l'application sur l'émulateur

Première compilation : 1 à 3 minutes
Compilations suivantes : 10 à 30 secondes (grâce au cache)

📲 Exécution sur appareil physique Android

Tester sur un vrai téléphone offre une meilleure expérience et des performances plus réalistes.

Étape 1 : Activer le Mode Développeur

Sur votre téléphone Android :

1. Ouvrez Paramètres
2. Allez dans À propos du téléphone (ou Informations)
3. Trouvez "Numéro de build" (ou "Version MIUI" pour Xiaomi)
4. Appuyez 7 fois rapidement sur cette ligne
5. Un message apparaît : "Vous êtes maintenant développeur !"

Étape 2 : Activer le Débogage USB

1. Retournez dans Paramètres
2. Cherchez "Options pour les développeurs" (souvent dans Système ou Paramètres supplémentaires)
3. Activez "Options pour les développeurs" (interrupteur en haut)
4. Descendez et activez "Débogage USB"
5. Une boîte de dialogue apparaît : confirmez avec "OK"

Étape 3 : Connecter le téléphone à l'ordinateur

1. Branchez votre téléphone à votre ordinateur avec un câble USB
2. Sur le téléphone, une notification apparaît : "Autoriser le débogage USB ?"
3. Cochez "Toujours autoriser depuis cet ordinateur"
4. Appuyez sur "Autoriser" ou "OK"

Étape 4 : Vérifier la connexion

Dans Android Studio :

1. Regardez le sélecteur d'appareil en haut
2. Vous devriez voir votre téléphone apparaître (ex: "Samsung Galaxy S23")

Ou dans le terminal intégré, tapez :

flutter devices

Vous devriez voir votre appareil listé :

2 connected devices:

SM G991B (mobile) • R5CR20XXXXX • android-arm64 • Android 14 (API 34)
Chrome (web)      • chrome      • web-javascript • Google Chrome 120.0

Étape 5 : Lancer l'application

1. Sélectionnez votre appareil dans le sélecteur
2. Cliquez sur ▶️ Run
3. L'application s'installe sur votre téléphone
4. Elle se lance automatiquement

🌐 Exécution sur navigateur Web (Chrome)

Flutter permet aussi de créer des applications Web ! Testons cela.

Vérifier la disponibilité

# Dans le terminal intégré
flutter devices

Vous devriez voir Chrome dans la liste :

Chrome (web) • chrome • web-javascript • Google Chrome 120.0

Lancer sur Chrome

1. Dans le sélecteur d'appareil, choisissez "Chrome (web)"
2. Cliquez sur ▶️ Run
3. Une fenêtre Chrome s'ouvre automatiquement
4. Votre application Flutter s'affiche dans le navigateur !

💻 Exécution sur Windows Desktop

Flutter permet de créer des applications Windows natives !

Vérifier la disponibilité

flutter devices

Si configuré, vous verrez :

Windows (desktop) • windows • windows-x64 • Microsoft Windows

Lancer sur Windows

1. Sélectionnez "Windows (desktop)"
2. Cliquez sur ▶️ Run
3. Une fenêtre Windows s'ouvre avec votre application !

⚡ Hot Reload et Hot Restart

Maintenant que votre application tourne, découvrons deux fonctionnalités magiques de Flutter.

Hot Reload (⚡)

Le Hot Reload injecte vos modifications dans l'application en cours d'exécution sans la relancer.

Comment l'utiliser :

1. Modifiez votre code dans main.dart
2. Sauvegardez le fichier (Ctrl+S ou Cmd+S)
3. Les changements apparaissent instantanément dans l'app !

Ou utilisez :

• Le bouton ⚡ Hot Reload dans la barre d'outils d'Android Studio
• Le raccourci Ctrl+\ (Windows) ou Cmd+\ (Mac)
• Dans le terminal : tapez r et Entrée

Hot Restart (🔄)

Le Hot Restart redémarre complètement l'application mais sans recompiler tout le code.

Quand l'utiliser :

• Après avoir modifié du code d'initialisation (main())
• Quand Hot Reload ne suffit pas
• Pour réinitialiser l'état de l'application

Comment l'utiliser :

• Bouton 🔄 Hot Restart dans Android Studio
• Raccourci Ctrl+Shift+\
• Dans le terminal : tapez R (majuscule) et Entrée

🛠️ Commandes utiles pendant l'exécution

Quand votre application tourne, vous avez accès à plusieurs commandes dans le terminal :

Flutter run key commands:
r  Hot reload. 🔥🔥🔥                    # Recharger les changements
R  Hot restart.                         # Redémarrer l'app
h  List all available commands.         # Afficher toutes les commandes
d  Detach (terminate "flutter run").    # Détacher le debugger
c  Clear the screen                     # Nettoyer l'écran
q  Quit (terminate the application).    # Quitter l'application

# Commandes avancées
p  Toggle performance overlay.          # Afficher les stats de performance
P  Toggle performance overlay (specific). # Stats détaillées
i  Toggle widget inspector.             # Inspecteur de widgets
o  Simulate different operating systems. # Tester différents OS
z  Toggle elevation (Material).         # Afficher les élévations
t  Dump rendering tree to console.      # Afficher l'arbre de rendu
L  Dump layer tree to console.          # Afficher les layers

🐛 Déboguer votre application

Mode Debug vs Release

Par défaut, flutter run lance l'application en mode Debug.

• Mode Debug : Hot Reload activé, performances moyennes, messages de debug
• Mode Release : Performances optimales, pas de Hot Reload, fichier plus léger

# Lancer en mode release (pour tester les performances réelles)
flutter run --release

# Lancer en mode profile (pour profiler les performances)
flutter run --profile

Logs et Console

Pour afficher des informations dans la console :

// Dans votre code
print('Message de debug');
print('Valeur : $variable');
debugPrint('Message avec debugPrint');  // Recommandé pour Flutter

Les logs apparaissent dans le panneau "Run" en bas d'Android Studio.

🎯 Résoudre les problèmes courants

L'application ne se lance pas

Solutions :

• Vérifiez que l'appareil est bien connecté : flutter devices
• Redémarrez l'émulateur ou reconnectez l'appareil
• Nettoyez le projet : flutter clean puis flutter pub get
• Vérifiez les erreurs de compilation dans le panneau "Run"

Hot Reload ne fonctionne pas

Solutions :

• Essayez Hot Restart (R) au lieu de Hot Reload (r)
• Vérifiez qu'il n'y a pas d'erreurs de syntaxe
• Relancez complètement l'application

L'émulateur est très lent

Solutions :

• Activez la virtualisation (Intel VT-x ou AMD-V) dans le BIOS
• Allouez plus de RAM à l'émulateur (via Device Manager → Edit)
• Utilisez une image système sans Google Play (plus légère)
• Fermez les autres applications gourmandes en ressources
• Ou mieux : utilisez un appareil physique !

Erreur "Gradle build failed"

Solutions :

# Nettoyer le projet
flutter clean

# Récupérer les dépendances
flutter pub get

# Relancer
flutter run

💡 Points clés à retenir

• Émulateur Android : Créer via Device Manager, pratique pour tester sans appareil
• Appareil physique : Activer mode développeur + débogage USB, meilleure expérience
• Version Web : Lancer sur Chrome, parfait pour tests rapides
• Version Windows : Application desktop native
• Hot Reload (r) : Recharger les changements sans perdre l'état
• Hot Restart (R) : Redémarrer l'app complètement
• Mode Debug : Pour développer (avec Hot Reload)
• Mode Release : Pour tester les vraies performances
• flutter devices : Voir tous les appareils disponibles
• Ctrl+S : Déclencher Hot Reload automatiquement