Guide de Configuration de
l'Environnement de Développement
Flutter sur Windows 10
Bienvenue dans ce guide détaillé qui vous accompagnera pas à pas dans la configuration
de votre environnement de développement pour Flutter et Dart sur votre ordinateur
sous Windows 10. Suivez attentivement chaque étape pour vous assurer une installation
réussie et commencer à coder vos applications mobiles.
1. Installation du SDK Flutter et Dart
Le SDK (Software Development Kit) de Flutter inclut le SDK de Dart, vous n'avez donc
qu'à installer Flutter. Il est recommandé d'installer Flutter dans un répertoire facile
d'accès, comme C:\src\flutter ou C:\flutter .
1.1. Vérification des Prérequis Système
Avant de commencer, assurez-vous que votre système Windows 10 répond aux exigences
minimales pour Flutter:
• Espace disque: Au moins 1.64 Go (sans compter l'espace pour l'IDE et les outils
Android/iOS).
• Outils: Flutter dépend de ces outils disponibles dans votre environnement. Pour
Windows, cela inclut Windows PowerShell 5.0 ou plus récent, et Git pour Windows.
Si vous n'avez pas Git, vous pouvez le télécharger et l'installer depuis le site officiel de
Git: https://git-scm.com/download/win [1]. Suivez les instructions d'installation par
défaut.
1.2. Téléchargement du SDK Flutter
1. Rendez-vous sur la page de téléchargement officielle de Flutter pour Windows:
https://docs.flutter.dev/get-started/install/windows [2].
2. Téléchargez la dernière version stable du SDK Flutter (fichier .zip ).
1.3. Extraction du Fichier et Placement du SDK
1. Créez un nouveau dossier dans un emplacement facile d'accès, par exemple C:
\src\ .
2. Extrayez le contenu du fichier .zip téléchargé dans ce nouveau dossier. Vous
devriez avoir un dossier flutter à l'intérieur (par exemple, C:\src\flutter ).
Important: N'installez pas Flutter dans un répertoire comme Program Files qui
nécessite des privilèges élevés.
1.4. Ajout de Flutter au PATH de l'Environnement
Pour pouvoir exécuter les commandes Flutter depuis n'importe quel répertoire dans
votre terminal, vous devez ajouter le chemin du dossier bin de Flutter à votre variable
d'environnement Path .
1. Dans la barre de recherche de Windows, tapez environnement et sélectionnez **
Modifier les variables d'environnement système. 2. Dans la fenêtre Propriétés Système,
cliquez sur le bouton Variables d'environnement.... 3. Dans la section Variables
utilisateur pour [VotreNomUtilisateur], sélectionnez la variable Path et cliquez sur
Modifier.... 4. Cliquez sur Nouveau et ajoutez le chemin complet vers le dossier bin
de votre installation Flutter (par exemple, C:\src\flutter\bin ). 5. Cliquez sur
OK** sur toutes les fenêtres pour enregistrer les modifications.
1.5. Vérification de l'Installation de Flutter
1. Ouvrez une nouvelle invite de commandes (CMD) ou PowerShell. Il est important
d'ouvrir une nouvelle fenêtre pour que les modifications du Path soient prises en
compte.
2. Tapez la commande suivante et appuyez sur Entrée: bash flutter doctor
3. flutter doctor va analyser votre environnement et afficher un rapport. Il
vérifiera si Flutter est correctement installé, si les outils Android sont présents, si
Visual Studio Code est configuré, etc.
Vous devriez voir des coches vertes ( ✓ ) pour les éléments correctement configurés
et des croix ( ✗ ) ou des points d'exclamation ( ! ) pour les éléments manquants ou
mal configurés. Ne vous inquiétez pas si vous voyez des problèmes pour Android
Studio ou Visual Studio Code à ce stade, nous les aborderons dans les sections
suivantes.
Exemple de sortie (partielle) de flutter doctor : `` [✓] Flutter
(Channel stable, 3.24.5, on Microsoft Windows [Version
10.0.19045.4412], locale fr-FR) [✓] Windows Version (Installed
version of Windows is version 10 or higher) [!] Android
toolchain - develop for Android devices (Android SDK version
34.0.0) ✗ cmdline-tools component is missing Run path/to/
sdkmanager --install
\"cmdline-tools;latest\"` [!] Visual Studio - develop for Windows (Visual Studio
Community 2022 17.10.3) ✗ Visual Studio is missing necessary components. Please
install the "Desktop development with C++" workload, including all of its default
components. [✓] Android Studio (version 2023.2) [✓] VS Code (version 1.90.1) [✓]
Connected device (1 available) [✓] Network resources
! Doctor found issues in 2 categories.
```
Lisez attentivement la sortie de `flutter doctor`. Elle vous
donnera des indications précises sur ce qui doit être corrigé.
1.6. Installation des Outils Android (Android Studio)
Flutter utilise les outils Android pour compiler vos applications pour Android. Même si
vous prévoyez de développer principalement pour iOS, il est fortement recommandé
d'installer Android Studio pour obtenir tous les outils nécessaires (SDK Android,
émulateurs, etc.).
1. Téléchargez Android Studio: Rendez-vous sur le site officiel d'Android Studio:
https://developer.android.com/studio [3]. Téléchargez et exécutez l'installateur.
2. Suivez l'assistant d'installation: Laissez les options par défaut pour la plupart des
étapes. Assurez-vous que les composants Android SDK , Android SDK
Platform et Android Virtual Device sont sélectionnés pour l'installation.
3. Lancez Android Studio: Après l'installation, lancez Android Studio. Lors du
premier démarrage, il vous guidera pour télécharger les composants SDK
supplémentaires nécessaires. Suivez les instructions.
4. Installez les outils de ligne de commande Android SDK:
◦ Dans Android Studio, allez dans File > Settings > Appearance &
Behavior > System Settings > Android SDK .
◦ Sélectionnez l'onglet SDK Tools .
◦ Cochez la case Android SDK Command-line Tools (latest) .
◦ Cliquez sur Apply pour installer les composants.
5. Acceptez les licences Android: Ouvrez une nouvelle invite de commandes (ou
PowerShell) et exécutez la commande suivante: bash flutter doctor --
android-licenses Acceptez toutes les licences en tapant y et en appuyant sur
Entrée pour chaque question.
Relancez flutter doctor après ces étapes. Vous devriez voir plus de coches vertes
concernant l'environnement Android.
2. Configuration de l'IDE (Visual Studio Code)
Visual Studio Code (VS Code) est un éditeur de code léger et puissant, très populaire
pour le développement Flutter grâce à ses extensions dédiées.
2.1. Installation de Visual Studio Code
Si vous n'avez pas encore VS Code, téléchargez-le et installez-le depuis le site officiel:
https://code.visualstudio.com/ [4]. Suivez les instructions d'installation par défaut.
2.2. Installation des Extensions Flutter et Dart
1. Ouvrez Visual Studio Code.
2. Cliquez sur l'icône Extensions dans la barre d'activités sur le côté gauche (ou
appuyez sur Ctrl+Shift+X ).
3. Dans la barre de recherche des extensions, tapez Flutter .
4. Trouvez l'extension Flutter (publiée par Dart Code) et cliquez sur Install .
5. L'extension Dart sera automatiquement installée en tant que dépendance.
Ces extensions fournissent la coloration syntaxique, la complétion de code, le débogage,
le rechargement à chaud (Hot Reload) et d'autres fonctionnalités essentielles pour le
développement Flutter.
3. Exécuter un Premier Programme Dart et Flutter
Maintenant que votre environnement est configuré, vous pouvez exécuter les exercices
Dart que je vous ai fournis et créer votre première application Flutter.
3.1. Exécuter un Exercice Dart
1. Ouvrez VS Code.
2. Allez dans File > Open Folder... et naviguez jusqu'au dossier
exercices_flutter que je vous ai fourni.
3. Ouvrez un fichier .dart (par exemple, exercice1_bienvenue.dart ).
4. Pour exécuter le programme, vous avez plusieurs options:
◦ Via le terminal intégré de VS Code: Ouvrez le terminal ( Ctrl+ ou View >
Terminal ). Assurez-vous d'être dans le bon répertoire (celui où se trouve
votre fichier .dart ). Tapez dart nom_du_fichier.dart (par exemple,
dart exercice1_bienvenue.dart ) et appuyez sur Entrée.
◦ **Via le bouton
Run and
Debug :** En haut à droite de l'éditeur, vous verrez un bouton Run`
(souvent un triangle vert). Cliquez dessus pour exécuter le fichier Dart actuel. Le résultat
s'affichera dans la console de débogage de VS Code.
3.2. Créer et Exécuter votre Première Application Flutter
1. Ouvrez VS Code.
2. Ouvrez la palette de commandes: Appuyez sur Ctrl+Shift+P (ou
Cmd+Shift+P sur macOS).
3. Tapez flutter : Sélectionnez Flutter: New Project .
4. Choisissez Application : C'est le type de projet le plus courant pour une
application mobile.
5. Sélectionnez un dossier: Choisissez un emplacement sur votre disque dur où vous
souhaitez créer votre projet (par exemple, C:
\Users\VotreNom\Documents\FlutterProjects ).
6. Nommez votre projet: Entrez un nom pour votre application (par exemple,
ma_premiere_app ). Utilisez des minuscules et des underscores ( _ ) pour le nom
du projet.
7. Attendez la création du projet: Flutter va créer tous les fichiers nécessaires pour
votre application. Cela peut prendre quelques instants.
8. Ouvrez le fichier main.dart : Une fois le projet créé, VS Code ouvrira
automatiquement le fichier lib/main.dart . C'est le point d'entrée de votre
application Flutter.
9. Lancez un émulateur ou connectez un appareil physique:
◦ Émulateur Android: Dans le coin inférieur droit de la fenêtre VS Code, vous
verrez un sélecteur d'appareil. Cliquez dessus et choisissez un émulateur
Android que vous avez configuré via Android Studio. Si vous n'en avez pas,
vous pouvez en créer un via l'AVD Manager d'Android Studio.
◦ Appareil physique: Connectez votre téléphone Android à votre ordinateur via
un câble USB. Assurez-vous que le mode débogage USB est activé sur votre
téléphone (vous devrez peut-être activer les options développeur). Une fois
connecté, votre appareil devrait apparaître dans le sélecteur d'appareil de VS
Code.
10. Exécutez l'application: Une fois l'émulateur ou l'appareil sélectionné, cliquez sur
le bouton Run (triangle vert) en haut de VS Code, ou appuyez sur F5 . Flutter
compilera et déploiera votre application sur l'appareil sélectionné. Cela peut
prendre un certain temps la première fois.
Vous devriez voir l'application de démonstration par défaut de Flutter s'exécuter,
avec un bouton flottant qui incrémente un compteur.
3.3. Utilisation du Hot Reload et Hot Restart
Lorsque votre application est en cours d'exécution, vous pouvez modifier le code dans
main.dart et voir les changements presque instantanément grâce au Hot Reload.
1. Modifiez le texte du AppBar (la barre en haut de l'application) dans main.dart .
2. Sauvegardez le fichier ( Ctrl+S ).
3. Vous devriez voir le texte mis à jour sur votre émulateur ou appareil sans que
l'application ne redémarre.
Le Hot Reload (icône d'éclair) injecte les changements de code dans l'application en
cours d'exécution, préservant l'état actuel de l'application. C'est idéal pour les
modifications de l'interface utilisateur.
Le Hot Restart (icône de flèche circulaire) redémarre l'application complètement,
réinitialisant son état. C'est utile pour les changements de logique qui affectent l'état
initial de l'application.
Conclusion
Félicitations ! Vous avez maintenant un environnement de développement Flutter et
Dart entièrement fonctionnel sur votre machine Windows 10. Vous êtes prêt à explorer
les exercices Dart que je vous ai fournis et à commencer à construire vos propres
applications mobiles avec Flutter. N'oubliez pas de consulter la documentation officielle
de Flutter et Dart pour plus d'informations et de ressources.
Bon codage !
Manus AI
Références:
[1] Git for Windows. (n.d.). Retrieved from https://git-scm.com/download/win [2] Install
Flutter on Windows. (n.d.). Flutter.dev. Retrieved from https://docs.flutter.dev/get-
started/install/windows [3] Android Studio. (n.d.). Android Developers. Retrieved from
https://developer.android.com/studio [4] Visual Studio Code. (n.d.). Retrieved from
https://code.visualstudio.com/
