Apprendre Flutter - Installation des outils

Christophe — Fri, 25 Apr 2025 16:33:46 +0000

Par où commencer ?

Je vous l'ai déjà dit dans ma précédente note, je ne connais rien à Flutter.

Donc le mieux est de commencer à s'outiller pour pouvoir rentrer dans le vif du sujet.

Je vais donc m'inspirer de la doc flutter pour installer le SDK, un éditeur, etc sur mon windows.

Installez un éditeur de code

Bon j'ai un VScode installé sur mon poste, parce que je m'en sers parfois pour changer des fichiers de conf sur des serveurs distants ou pour écrire de la doc au format markdown.

Je vais donc partir avec cela pour commencer:

VS Code + Extension Flutter for VS Code

J'en profite pour me créer un petit profil dans VSCode qui sera dédié à Flutter.

Installer le SDK Flutter

L'installation du SDK Flutter, peut se faire à travers VSCode et son extension pour Flutter

Si vous avez ces prérequis:

Ctrl + Shift + P
Taper Flutter
Sélectionner Flutter: New Project
Une fenêtre s'ouvre qui vous permet soit de localiser le SDK si vous l'avez déjà installé, soit de télécharger le SDK pour l'installer.

/!\ Lors de l'installation de flutter il est recommandé de ne pas l'installer dans un répertoire donc le chemin d'accès contiendrait un ou des espaces et/ou nécessiterait une élévation de privilège

A la suite de cette installation l'outil vérifie l'installation


  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ The Google Privacy Policy describes how data is handled in this service.   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/to/crash-reporting                                     ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ║                                                                            ║
  ║ To disable animations in this tool, use                                    ║
  ║ 'flutter config --no-cli-animations'.                                      ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Downloading Material fonts...                                      374ms
Downloading Gradle Wrapper...                                       19ms
Downloading package sky_engine...                                   99ms
Downloading package flutter_gpu...                                  19ms
Downloading flutter_patched_sdk tools...                           232ms
Downloading flutter_patched_sdk_product tools...                   227ms
Downloading windows-x64 tools...                                 2 191ms
Downloading windows-x64/font-subset tools...                       100ms
[!] Flutter (Channel stable, 3.29.3, on Microsoft Windows [version 10.0.22631.5189], locale fr-FR) [1 909ms]
    • Flutter version 3.29.3 on channel stable at C:\Users\CTLAB\AppData\Local\Flutter\flutter
    ! The flutter binary is not on your path. Consider adding C:\Users\CTLAB\AppData\Local\Flutter\flutter\bin to your path.
    ! The dart binary is not on your path. Consider adding C:\Users\CTLAB\AppData\Local\Flutter\flutter\bin to your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea121f8859 (2 weeks ago), 2025-04-11 19:10:07 +0000
    • Engine revision cf56914b32
    • Dart version 3.7.2
    • DevTools version 2.42.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[√] Windows Version (11 Entreprise 64-bit, 23H2, 2009) [9,5s]

[X] Android toolchain - develop for Android devices [20ms]
    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/to/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.


[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe) [12ms]
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[X] Visual Studio - develop Windows apps [11ms]
    X Visual Studio not installed; this is necessary to develop Windows apps.
      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) [8ms]
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/to/windows-android-setup for detailed instructions).

[√] VS Code, 64-bit edition (version 1.99.3) [8ms]
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.108.0

[√] Connected device (2 available) [752ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [version 10.0.22631.5189]
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 134.0.3124.129

[√] Network resources [1 080ms]
    • All expected network resources are available.

! Doctor found issues in 5 categories.
exit code 0

J'ai donc à priori plusieurs problèmes:

Un problème de chemin: Le chemin d'installation de Flutter ne se trouve pas dans mon PATH
C:\Users\CTLAB\AppData\Local\Flutter\flutter\bin
=> Je vais donc ajouter cela à mon path utilisateur
Android toolchain: qui nécessite l'installation du SDK Android (via Android Studio) pour le moment où on devra compiler l'application pour Android
=> Je vais donc installer Android Studio
Chrome: l'application chrome est nécessaire pour le développement d'application web avec Flutter
=> Je vais ignorer ce warning puisque je n'ai pas prévu pour le moment de faire du dev web avec Flutter
Visual Studio: nécessaire pour le développement d'application desktop pour Windows avec Flutter
=> Je vais ignorer ce warning puisque je n'ai pas prévu pour le moment de faire du dev d'appli windows avec Flutter

Installer Android Studio

Lors du premier lancement d'Android Studio, suivez l'assistant qui vous guidera pour installer :

Android SDK
Android SDK Command-line Tools
Android SDK Build-Tools
Android Emulator

Acceptez les licences en exécutant :

flutter doctor --android-licenses

Cette commande ne fonctionne pas j'obtiens un message m'indiquant

"Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this."

Après avoir effectué ces opérations, je relance un

> flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.29.3, on Microsoft Windows [version 10.0.22631.5189], locale fr-FR)
[√] Windows Version (11 Entreprise 64-bit, 23H2, 2009)
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/windows-android-setup for more details.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2024.3)
[√] VS Code, 64-bit edition (version 1.99.3)
[√] Connected device (2 available)
[√] Network resources

! Doctor found issues in 3 categories.

J'ai donc encore des problèmes à corriger au niveau de Android Toolchain

Installation cmdline-tools

Pour réaliser cette installation il faut ouvrir Android Studio

puis aller dans More actions > SDK Manager

Aller dans l'onglet SDK Tools et cocher "Android SDK Command-line Tools (latest)" puis appuyer sur Apply

Je relance

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.29.3, on Microsoft Windows [version 10.0.22631.5189], locale fr-FR)
[√] Windows Version (11 Entreprise 64-bit, 23H2, 2009)
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2024.3)
[√] VS Code, 64-bit edition (version 1.99.3)
[√] Connected device (2 available)
[√] Network resources

! Doctor found issues in 3 categories.

Il ne me reste plus que les licences à accepter avec la commande et accepter toutes les licences.

flutter doctor --android-licences

Vérifier que tout est ok

Par acquis de conscience j'exécute un dernier

> flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.29.3, on Microsoft Windows [version 10.0.22631.5189], locale fr-FR)
[√] Windows Version (11 Entreprise 64-bit, 23H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2024.3)
[√] VS Code, 64-bit edition (version 1.99.3)
[√] Connected device (2 available)
[√] Network resources

! Doctor found issues in 2 categories.

Tout semble ok à l'exception des prérequis pour faire du développement web ou desktop windows. On pourra voir plus tard si le besoin s'en fait sentir.

Comme je souhaite me concentrer pour le moment sur l'aspect mobile Android, il semblerait que la voie soit dégagée pour commencer à rentrer dans le vif du sujet.

Vu les différents problèmes rencontrés lors de l'installation je ferais les choses dans cette ordre pour limiter les problèmes.

Installer Android Studio
Installer le sdkmanager (via android Studio)
Installer le SDK Flutter (via VSCode ou directement)
Accepter les licences avec la CLI flutter

Dans la prochaine note je vais essayer de créer ma première application mobile.

A suivre...

Cette note fait partie d'une série de notes documentant mon apprentissage flutter

Apprendre Flutter

Christophe — Fri, 25 Apr 2025 13:33:44 +0000

J'ai fait du développement web il y a fort longtemps, et une petite voix au fond de moi me pousse à me remettre au dev, alors même que tout le monde prédit la fin des développeurs avec l'arrivée de l'IA (personnellement vu ce que je peux en voir, je n'y crois pas pour le moment)

Bref me remettre au dev, parce que j'ai toujours aimé cela.

Ce pouvoir de créer des choses et de les partager aussi facilement à l'ensemble du monde, c'est ce qui m'a toujours enthousiasmé dans le développement web.

Mais la technologie évolue tellement vite, qu'on a toujours l'impression d'avoir un train de retard. Et c'est peut-être ce qui m'a fait m'écarter de cette voie pendant toutes ces années.

Aujourd'hui je reviens avec l'envie de découvrir le développement d'application mobile auquel je ne connais rien.

D'ailleurs, même si j'ai des connaissances en développement qui datent, on peut considérer que je repars vraiment de zéro après toutes ces années sans avoir touché une ligne de code.

Donc je me lance dans l'apprentissage du développement d'application mobile, certainement motivé par l'inconnu et mon envie de découvrir.

A l'ère de l'IA, je compte bien m'en servir dans cette apprentissage.

J'ai d'ailleurs engagé une discussion avec celle-ci pour comprendre les solutions qui s'offraient à moi et elle m'a proposé:

Ionic: A priori le plus accessible si on a des notions de HTML/CSS/Javascript
React Native: Assez faile à prendre en main si on maitrise React
Flutter: Pas le plus simple à prendre en main du fait de son langage Dart, mais le plus performant sur mobile et le plus polyvalent puisqu'il permet d'avoir une base de code commune pour du développement mobile, web, desktop...

J'ai bien quelques restes de HTML/CSS/Javascript, mais depuis toutes ces années sans pratiqué, ces languages ont beaucoup évolué.

C'est pourquoi je me suis dit que quelque soit mon choix, rien ne serait simple pour moi et donc pourquoi ne pas partir sur Flutter.

J'ouvre donc ce compte sur dev.to pour garder une trace de cet apprentissage et partager si ça peut aider.

Je n'ai pas beaucoup de temps disponible, donc l'apprentissage prendra le temps que ça prendra.

C'est donc ici que démarre mon apprentissage de Flutter...

A suivre...

Cette note fait partie d'une série de notes documentant mon apprentissage flutter

DEV Community: Christophe

Apprendre Flutter - Installation des outils

Par où commencer ?

Apprendre Flutter