Flutter est un framework conçu par Google, basé sur Dart, le langage maison de la firme. Il permet de concevoir des applications web, iOS, Android, Linux, Windows et même des logiciels embarqués à partir d’un unique jeu de code. Parmi les outils équivalents, on retrouve MAUI de Microsoft et NativePHP pour PHP.
Flutter est open source : on l’utilise pour créer des apps multiplateformes natives et élégantes depuis une seule base de code. Aujourd’hui, beaucoup de développeurs l’adoptent pour concevoir des applications Android.
Flutter génère du code natif, ce qui rend ses développements difficiles à décompiler. Il se compile en code machine ARM ou Intel, ainsi qu’en JavaScript, pour garantir une performance optimale sur n’importe quel appareil.
Il prend en charge les apps mobiles, web, de bureau et embarquées.
Google a intégré ses propres services directement dans Flutter, pour une intégration fluide
Connectez-vous à l’écosystème de développement Google grâce à des intégrations transparentes avec Firebase, Google Ads, Google Play, Google Pay, Google Wallet, Google Maps et bien d’autres outils. Vous simplifiez votre processus de création et touchez un public plus large.
Flutter utilise le langage Dart, optimisé pour concevoir rapidement des applications sur tous les supports.
Voici le site officiel de Flutter : Flutter – Créez des apps pour tous les écrans
Installation
Flutter fonctionne sur plusieurs systèmes d’exploitation ; vous pouvez développer avec lui sur tous les OS listés ci-dessous.
Ce tutoriel utilise l’environnement Windows.
Pour mettre en place l’environnement de développement Flutter, installez d’abord quelques logiciels prérequis.
- Installer Git pour Windows
Les lecteurs peuvent télécharger le programme d’installation sur le site officiel de Git : Git – Installer pour Windows
Mon ordinateur est équipé d’un processeur Intel 64 bits, j’ai donc choisi cette version : Programme d’installation Git pour Windows x64.
L’installation de Git est très simple, identique à celle de n’importe quel logiciel : cliquez simplement sur « Next » à chaque étape.
- Télécharger et installer Visual Studio Code
Flutter est compatible avec VS Code et Android Studio : choisissez votre outil selon vos habitudes. Personnellement, j’utilise Android Studio, c’est pourquoi ce tutoriel se base sur cet éditeur. Téléchargez la dernière version sur le site officiel d’Android Studio : https://developer.android.com/studio
Installer Flutter lui-même
Les logiciels vus précédemment ne sont que des prérequis ; nous allons maintenant installer le framework Flutter. Vous devez l’installer pour pouvoir développer dessus. Si vous utilisez VS Code, consultez un autre tutoriel : l’éditeur propose nativement une fonction d’installation de Flutter, vous pouvez installer Flutter directement depuis VS Code.
L’installation des extensions Flutter et Dart sur VS Code est similaire à celle de n’importe quel autre module : allez dans l’onglet Extensions et sélectionnez Flutter ainsi que Dart.
Pour ajouter les extensions Dart et Flutter sur VS Code, rendez-vous sur la page Marketplace de l’extension Flutter puis cliquez sur Installer. Si le navigateur vous demande d’ouvrir VS Code, acceptez. Vous pouvez consulter la documentation officielle ici : Mise en route et test de Flutter
Cependant, comme je n’utilise pas VS Code pour ce tutoriel, nous verrons la méthode d’installation manuelle.
Installation manuelle de Flutter
Cette méthode est inspirée de la documentation officielle disponible ici : https://docs.flutter.dev/install/manual
Ouvrez le lien ci-dessus et sélectionnez la version correspondant à votre OS ; nous utilisons Windows ici.
Cliquez ensuite sur le bouton de téléchargement pour récupérer l’archive.
Une fois le téléchargement terminé, décompressez l’archive dans un dossier dont le chemin ne contient ni espace ni caractère spécial. Optez pour un chemin simple par exemple C:\flutter
Voici le contenu du dossier après extraction :
Copiez ensuite le chemin du dossier bin : C:\flutter\bin, puis ajoutez-le à la variable d’environnement Path.
Dans le menu Démarrer de Windows, recherchez « Variables d’environnement ».
Ajoutez le chemin du dossier bin à la liste Path.
Installer Dart
Après avoir installé Flutter, vous devez installer le SDK Dart. Ouvrez un terminal et saisissez cette commande :
flutter doctorPendant l’exécution, le SDK Dart se télécharge automatiquement.
C:\Users\Jack>flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...Langage du code : JavaScript (javascript)Vérifiez ensuite que l’installation a fonctionné : ouvrez CMD et lancez la commande ci-dessous.
Remarque : dans certains pays, le téléchargement peut échouer à cause du réseau ; vous devrez configurer un miroir ou un proxy. Ouvrez CMD ou PowerShell et entrez ces commandes dans l’ordre :
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctorLangage du code : JavaScript (javascript)
La commande finale flutter doctor analyse l’état complet de votre environnement Flutter. « Doctor » signifie médecin : imaginez qu’il diagnostique les problèmes de votre configuration.
Voici le résultat que j’ai obtenu lors de mon diagnostic :
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [ 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT LTSC 64 bits, 21H2, 2009)
[X] Android toolchain - develop for appareils Android
X Impossible de localiser le SDK Android.
Installez Android Studio ici : https://developer.android.com/studio/index.html
Au premier lancement, un assistant vous aidera à installer les composants du SDK Android.
(ou consultez https://flutter.dev/to/windows-android-setup pour des instructions détaillées).
Si le SDK Android est installé dans un dossier personnalisé, utilisez la commande
`flutter config --android-sdk` pour mettre à jour le chemin.
[X] Chrome - développement web (Impossible de trouver l’exécutable Chrome à .\Google\Chrome\Application\chrome.exe)
! Chrome n’est pas détecté. Définissez la variable CHROME_EXECUTABLE sur le chemin du fichier Chrome.
[√] Visual Studio - développement apps Windows (Visual Studio Community 2022 17.9.1)
[√] Appareils connectés (2 disponibles)
[!] Ressources réseau
X Erreur HTTP lors de la vérification de "https://github.com/": dépassement du délai de connexion
! Doctor a trouvé des problèmes dans 3 catégories.Langage du code : JavaScript (javascript)Les croix X signalent des composants manquants. Par exemple, sans SDK Android vous ne pourrez pas compiler d’applications Android ; sans Chrome vous ne pourrez pas déboguer la version web. Nous verrons ensuite comment installer Android Studio, et vous pouvez télécharger Chrome séparément. Si vous ne développez que des apps de bureau Windows, ces deux outils ne sont pas obligatoires.
SDK Android manquant (impossible de compiler pour Android)
Chrome non détecté (impossible d’exécuter la version web)
Lien de téléchargement Chrome Google Chrome – Téléchargez le navigateur rapide et sécurisé de Google
Installer Android Studio
J’ai téléchargé la dernière version d’Android Studio : android-studio-quail1-patch1-windows.exe. Double-cliquez dessus pour lancer l’installation.
Là encore, cliquez simplement sur Next à chaque étape pour terminer l’installation.
Une fois installé, lancez le logiciel et continuez de cliquer sur Next pendant la configuration initiale.
Une fois la configuration terminée, vous pouvez créer des projets directement depuis Android Studio.
Ouvrez à nouveau CMD et lancez flutter doctor pour vérifier l’état de l’environnement.
[!] Android toolchain - développement pour appareils Android (version SDK Android 36.1.0)
X Le composant cmdline-tools est absent.
Essayez d’installer ou mettre à jour Android Studio.
Sinon, téléchargez les outils depuis https://developer.android.com/studio#command-line-tools-only et assurez-vous
de définir la variable d’environnement ANDROID_HOME.
Plus d’infos sur https://developer.android.com/studio/command-line.
X Statut de licence Android inconnu.
Lancez `flutter doctor --android-licenses` pour accepter les licences du SDK.
Consultez https://flutter.dev/to/windows-android-setup pour des détails.Langage du code : JavaScript (javascript)Ouvrez Android Studio, allez dans File → Settings → Appearance & Behavior → System Settings → Android SDK
Allez sur l’onglet SDK Tools et cochez cet élément :
Android SDK Command-line Tools (latest)
Retournez sur l’onglet SDK Tools pour cocher le même élément :
Android SDK Command-line Tools (latest)
Cliquez sur Apply et attendez que le téléchargement et l’installation se terminent.
Lancez à nouveau la commande flutter doctor.
[!] Android toolchain - développement pour appareils Android (version SDK Android 36.1.0)
! Certaines licences Android n’ont pas été acceptées. Pour résoudre cela : exécutez flutter doctor --android-licensesLangage du code : CSS (css)Ce problème vient du fait que vous n’avez pas validé les licences d’utilisation du SDK Android.
Licences Android non acceptées (Some Android licenses not accepted)
Saisissez cette commande dans CMD :
flutter doctor --android-licensesRépondez simplement y à toutes les questions pour valider les licences.
Une fois les licences acceptées, relancez flutter doctor dans le terminal.
C:\Users\Jack>flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [version 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT Entreprise LTSC 64 bits, 21H2, 2009)
[√] Android toolchain - développement pour appareils Android (version SDK Android 36.1.0)
[√] Chrome - développement web
[√] Visual Studio - développement apps Windows (Visual Studio Community 2022 17.9.1)
[√] Appareils connectés (3 disponibles)
[√] Ressources réseau
• No issues found!Langage du code : JavaScript (javascript)
Voilà, l’environnement de développement Flutter est entièrement installé. Dans le prochain chapitre, nous créerons notre premier projet exemple.