Avant de pouvoir commencer à créer vos premières applications, il va falloir installer Flutter sur Windows, vous pouvez aussi le faire en vidéo dans l’initiation.
Prérequis
- Un ordinateur supportant la virtualisation (pour bénéficier des émulateurs)
- Windows 10, 8 ou 7.
- Une connexion internet (pour télécharger les outils nécessaires)
Sommaire
- Installation de Git et téléchargement du SDK de Flutter
- Ajout de la variable d’environnement
- Installation du SDK d’Android via Android Studio
- Acceptation des licences et ajout des plugins
Ressources
- Formation d’initiation à Flutter : créer votre première application mobile
- Formation Flutter Master : devenez un expert Flutter
- Forum de la communauté
1 – Installation de Git et téléchargement du SDK de Flutter
Commencez par accéder au site flutter.dev.
Une fois arrivé(e) sur le site, cliquez en haut à droite sur « Get started ».
La page « Install » s’affiche. Cliquez sur Windows. On arrive sur la documentation que l’on va beaucoup utiliser :
Comme vous pouvez le voir, il faut installer au préalable Powershell et Git.
Si vous avez un Windows à jour, Powershell est déjà installé, nous n’allons donc pas nous y attarder.
Pour installer Git, faites un clic droit sur le lien pour l’ouvrir dans un nouvel onglet. Une fois arrivé(e) sur la page vous pourrez choisir votre système d’exploitation (Windows 64bit ou Windows 32bit) et lancer le téléchargement.
Pour l’installation, cliquez sur « Next » à chaque fenêtre, à moins d’avoir des préférences spécifiques d’installation.
Afin de vérifier que l’installation s’est bien déroulée, on va chercher l’invite de commande dans le menu Démarrer.
On clique dessus pour lancer l’application. Et on tape « git » puis on tape sur la touche entrée :
Nous avons bien installé les prérequis. Passons maintenant au SDK.
Pour ce faire, il faut créer un dossier à l’emplacement de votre choix, « Mes Documents » par exemple. Appelons le dossier « dev ».
C’est dans ce dossier que l’on va installer Flutter. Faites un clic droit sur le dossier créé et sélectionnez « Git Bash here » pour lancer l’invite de commande de Git, puis tapez la commande indiquée sur le site flutter.dev :
git clone https://github.com/flutter/flutter.git -b stable
Comptez quelques heures selon votre connection internet, il y a au moins 300Mo à télécharger.
Besoin d’aide ? Rejoignez-nous sur le forum.
2 – Ajout de la variable d’environnement
Nous avons fini cette partie, nous allons donc nous attaquer à la variable d’environnement.
Pour commencer, nous allons taper flutter dans l’invite de commande.
Si c’est la première fois que vous installez Flutter, vous devriez avoir le message ci-dessous.
Flutter n’est pas reconnu car il faut installer la variable d’environnement. Pour ce faire, tapez « environnement » dans la barre de recherche du menu Démarrer. Cliquez sur « Modifier les variables d’environnement système ».
Une fenêtre s’affiche, cliquez sur le bouton « variables d’environnement » en bas à droite de celle-ci.
Il faut tout d’abord vérifier la présence de la variable « Path ».
Ensuite double-cliquez dessus puis ajoutez le lien vers le dossier « bin » de Flutter (pour trouver ce dossier retournez dans le dossier « dev » préalablement créé pour flutter).
Une fois cela fait, nous allons vérifier la variable d’environnement.
Pour cela il faut fermer et rouvrir l’invite de commande puis taper “flutter”, si cela fonctionne vous obtiendrez le résultat suivant :
Si vous obtenez une erreur comme le message suivant :
Il faut refaire les étapes précédentes et bien vérifier que le lien ajouté à la variable d’environnement « Path » aille bien jusqu’à « bin ». Besoin d’aide ? Rejoignez-nous sur le forum.
3 – Installation du SDK d’Android via Android Studio
Ce n’est pas cette commande que nous allons utiliser pour le moment, vous pouvez arrêter le programme.
Tapez ensuite « flutter doctor », cette commande permet de savoir ce qu’il nous reste à installer pour que Flutter fonctionne.
L’installation du SDK se lance, ça peut prendre plusieurs minutes pour obtenir ces informations et erreurs :
La documentation flutter indique exactement notre erreur et donne un lien pour la résoudre :
Rendez-vous sur ce lien pour télécharger Android Studio.
Pendant l’installation, cochez bien Android Virtual Device pour obtenir un émulateur.
Une fois l’installation finie, lancez Android Studio.
Cliquez sur “next” puis choisissez « Custom » et non « Standard » dans la fenêtre « Install Type ».
Pensez bien à cocher les cases ci-dessus qui permettent d’avoir de bonnes capacités graphiques pour l’émulation.
Un émulateur permet de tester directement nos applications sur des téléphones virtuels.
Mémorisez bien également l’emplacement du SDK qui sera utile en cas de problèmes.
Une fois Android SDK téléchargé, on peut cliquer sur « Finish ». Sur l’invite de commande on va pouvoir régler le second problème concernant la localisation d’Android SDK. Tapez à nouveau la commande « flutter doctor ». Vous devriez obtenir un résultat similaire :
Besoin d’aide ? Rejoignez-nous sur le forum.
4 – Acceptation des licences et ajout des plugins
Passons ensuite à la validation des licences qui est indispensable au bon fonctionnement de Flutter.
Pour les valider, lancez la commande suivante dans l’invite de commande :
flutter doctor --android-licenses
Ensuite, tapez plusieurs fois « y » (yes) pour tout valider.
Relancez la commande flutter doctor. Il ne devrait rester que les deux problèmes concernant Android Studio.
Il s’agit d’installer les deux plugins Flutter et Dart pour Android Studio(en option si vous n’utilisez pas Android Studio).
Pour cela, lancez l’application Android Studio, sur la page de bienvenue cliquez sur « Configure » en bas à droite de la fenêtre puis sélectionnez « Plugins ».
Ensuite dans la barre de recherche des plugins, entrez « Flutter » puis installez le premier plugin. Une fenêtre s’affiche pour proposer de télécharger le plugin Dart en même temps.
On redémarre Android Studio et désormais, sur la page d’accueil, vous avez la possibilité de commencer un nouveau projet Flutter.
On relance la commande flutter doctor pour vérifier que tout s’est bien déroulé. Nous n’avons normalement plus de croix rouges. Il ne nous reste plus qu’à installer VSCode (en option, choisir entre Android Studio et VSCode).
Allez sur le site de Visual Studio Code, cliquez sur le lien Download, téléchargez puis installez VSCode.
Lancez l’application et téléchargez les extensions Flutter et Dart en tapant « Flutter » dans la barre de recherche des extensions (encadrée en rouge). En téléchargeant l’extension Flutter, celle de Dart s’installe aussi automatiquement.
Relancez la commande “Flutter doctor” une dernière fois pour vérification, il ne devrait y avoir plus aucune croix rouge.
Mise à jour 13/01/21 : Avec les dernières versions d’Android Studio, il se peut que vous obteniez quand même les erreurs ci-dessus après avoir fait toutes les étapes.
Ces erreurs sont dues à un changement de dossier du côté d’Android Studio, vous pouvez ignorer celles-ci car les plugins sont bien installés.