Téléchargez le package Flutter SDK en cliquant sur le bouton suivant sur la page Web.

Étape 2 : extraire les fichiers

Extrayez le fichier zip téléchargé et déplacez-le vers l’emplacement souhaité où vous souhaitez installer le SDK Flutter. Ne l’installez pas dans un dossier ou un répertoire nécessitant des privilèges élevés (tels que C:Program Files ) pour garantir le bon fonctionnement du programme. Pour cette formation, il sera stocké dans C:development .

Ensuite, vous devez mettre à jour votre variable d’environnement Path pour exécuter les commandes Flutter dans les consoles Windows PowerShell et Invite de commandes (CMD). Tout d’abord, cliquez sur le bouton Démarrer et tapez pour rechercher, puis cliquez sur Modifier les variables d’environnement pour votre compte.

Étape 4 : Confirmer les outils installés pour exécuter Flutter

Dans CMD, exécutez la commande Flutter Doctor pour confirmer les outils installés ainsi que de brèves descriptions.

C:UsersUser>flutter doctor
Running "flutter pub get" in flutter_tools... 8,9s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.16.0, on Microsoft Windows [Version 10.0.19041.746], locale en-US)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
    Install Android Studio from: https://developer.android.com/studio/index.html
    On first launch it will assist you in installing the Android SDK components.
    (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
    If the Android SDK has been installed to a custom location, please use
    'flutter config --android-sdk' to update to that location.

[√] Chrome - develop for the web
[X]] Visual Studio - develop for Windows
     X Visual Studio not installed; this is necessary for Windows development.
   	Download at https://visualstudio.microsoft.com/downloads/.
   	Please install the "Desktop development with C++" workload, including all of its default components
[!] Android Studio (not installed)
[√] Connected device (2 available)
[√] HTTP Host Availability

! Doctor found issues in 3 categories.

Étape 5 : Téléchargez et installez Android Studio

1. Ouvrez un navigateur Web et accédez à la page de téléchargement d’Android Studio. Il s’agit du site pour les développeurs Android, sur lequel vous pouvez télécharger Android Studio. Cette page détecte automatiquement votre système d’exploitation.

2. Cliquez sur Download Android Studio (Télécharger Android Studio). La page Terms and conditions (Conditions d’utilisation) du License Agreement (Contrat de licence) Android Studio s’ouvre.
3. Lisez le Contrat de licence.
4. En bas de la page, si vous acceptez les conditions d’utilisation, cochez la case I have read and agree with the above terms and conditions (J’ai lu et j’accepte les conditions d’utilisation ci-dessus).
5. Cliquez sur Download Android Studio (Télécharger Android Studio) pour lancer le téléchargement.
6. Lorsque vous y êtes invité, enregistrez le fichier à un emplacement facilement accessible, par exemple dans le dossier Downloads (Téléchargements).
7. Attendez la fin du téléchargement. Cette opération peut prendre du temps. Profitez-en pour faire une pause.

Ensuite lancer l’installation. Sauf si vous avez des exigences spécifiques, vous pouvez cliquer sur Suivant sur tous les écrans en conservant les paramètres par défaut. Assurez-vous que l’option Appareil virtuel Android est sélectionnée sur l’écran Choisir les composants afin de pouvoir exécuter un émulateur Android pour le développement d’applications Android.

Ensuite, l’assistant de configuration d’Android Studio démarrera et vous pourrez continuer en cliquant sur Suivant .

Sur l’écran Type d’installation, sélectionnez Personnalisé et cliquez sur Suivant .

Sélectionnez l’emplacement d’installation ou laissez le chemin par défaut et cliquez sur Suivant .

Sélectionnez votre thème d’interface utilisateur (Perso, j’adore le Dark Mode) et cliquez sur Suivant .

Sélectionnez vos composants SDK et cliquez sur Suivant .

Vérifiez les sélections et cliquez sur Suivant .

Sur l’écran suivant, acceptez le contrat de licence et cliquez sur Terminer .

Le téléchargement des composants démarrera et Android Studio s’installera. Une fois terminé, cliquez sur Terminer .

Après l’installation, démarrez Android Studio. Sur le côté gauche, cliquez sur Plugins . Recherchez Flutter et cliquez sur Installer pour installer le plugin Flutter.

Il vous demandera également d’installer Dart, le langage de programmation utilisé pour créer des applications Flutter. Cliquez sur Installer à l’invite.

Enfin, cliquez sur Redémarrer l’IDE pour que les modifications du plugin soient appliquées. Cliquez sur Redémarrer à l’invite pour confirmer cette action.

Ensuite, lancez la commande Flutter Doctor à nouveau dans CMD pour confirmer l’installation d’Android Studio.

C:Userstomz>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.4, on Microsoft Windows [version 10.0.19041.746), locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++- workload, including all of its default components
[√] Android Studio (version 2021.1)
[√] Connected device (2 available)
[√] HTTP Host Availability

! Doctor found issues in 2 categories.

Android Studio a été installé avec succès, mais il détecte un problème avec les licences Android. Ce problème est assez courant et est atténué en exécutant la commande suivante dans CMD.

flutter doctor --android-licenses

C:UsersUser>flutter doctor --android-licenses
5 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

L’exécution à nouveau de la commande Flutter Doctor montre que le problème est résolu.

C:UsersUser>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19041.746], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.1)
[√] Connected device (2 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

Étape 6 : Installer Visual Studio

La sortie ci-dessus montre également que Visual Studio n’est pas installé. Vous pouvez télécharger Visual Studio 2022 de Microsoft avec C++ . Une fois le fichier VisualStudioSetup.exe téléchargé, ouvrez-le et procédez à l’installation en acceptant toutes les options d’installation par défaut. Une fois l’installation terminée, exécutez la commande flutter doctor dans CMD pour confirmer l’installation de Visual Studio.

C:UsersUser>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):  
[√] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19041.746], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.3)
[√] Android Studio (version 2021.1)
[√] Connected device (2 available)
[√] HTTP Host Availability

• No issues found!

À ce stade, tous les outils des projets Flutter sont prêts à être utilisés pour le développement d’applications Flutter. Selon vos besoins, vous pouvez démarrer vos projets dans Android Studio ou Visual Studio.

Notre première application

Nous allons créer notre première application. Ouvrez votre terminal ou invite de commande et suivez ces étapes :

1. Création du Projet : Placez-vous dans le dossier de travail (vous pouvez créer un dossier au bureau ou dans un autre dossier sur votre PC) puis exécutez la commande suivante pour créer un nouveau projet Flutter :

   flutter create ma_premiere_app
   

   Cette commande crée un nouveau dossier nommé ma_premiere_app contenant les fichiers initiaux de l’application Flutter.

2. Ouverture dans VS Code : Ouvrez le dossier du projet dans Visual Studio Code. Vous pouvez le faire directement depuis le terminal en exécutant :

   code ma_premiere_app

   Ou allez dans VS Code puis cliquez sur Fichier->Ouvrir le dossier puis sélectionnez le dossier ma_premiere_app.

Comprendre l’Arborescence du Projet

Lorsque vous ouvrez le projet dans VS Code, vous verrez plusieurs dossiers et fichiers. Voici les plus importants :

• /lib : Contient le code source Dart de votre application Flutter. C’est ici que vous écrirez la majorité de votre code.
• /android et /ios : Contiennent les fichiers spécifiques pour compiler l’application sur Android et iOS respectivement.
• pubspec.yaml : Un fichier important où vous déclarez les dépendances de votre application et configurez divers aspects du projet Flutter.

Comprendre la Fonction main()

Le fichier principal de votre application Flutter est /lib/main.dart. Le point d’entrée de l’application est la fonction main(), qui appelle runApp(). La fonction runApp() “gonfle” le widget donné et l’attache à l’écran.

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

Lancement de l’Émulateur

Pour voir votre application en action, vous pouvez lancer un émulateur Android ou iOS.

1. Avec Android Studio :
   • Ouvrez Android Studio et lancez un émulateur Android depuis l’AVD Manager.
2. Via la Palette de Commandes de VS Code :
   • Appuyez sur Ctrl+Shift+P (Cmd+Shift+P sur Mac) pour ouvrir la palette de commandes.
   • Tapez “Flutter” et sélectionnez “Flutter: Launch Emulator”.
   • Choisissez un émulateur dans la liste.

Exécution de l’Application

Avec l’émulateur en cours d’exécution, vous pouvez lancer l’application. Dans le terminal de VS Code, exécutez :

flutter run

Votre première application Flutter, qui est une simple application de compteur, devrait s’afficher dans l’émulateur.

Voici le mien. (J’ai apporté quelques modifications, à l’honneur de … Sunu Code).

Félicitations ! Vous avez créé et exécuté votre première application Flutter. Si vous souhaitez aller plus loin avec Flutter et Dart, inscrivez-vous à notre formation “Flutter en Action : Conception d’Applications Mobiles de A à Z”, un formation complète pour apprendre de la base aux concepts avancés; pour créer tout type d’application mobile. Cliquez ici pour en savoir plus !