×

Tutoriel : Installation de Flutter et Création de Votre Première Application Flutter

Tutoriel : Installation de Flutter et Création de Votre Première Application Flutter

Flutter est un framework open-source de développement d’applications mobiles, créé par Google, qui vous permet de développer des applications Android et iOS à partir d’un seul code source. Ce tutoriel vous guidera à travers les étapes pour installer Flutter et créer votre première application Flutter.

Étape 1 : Prérequis

Avant de commencer, assurez-vous de disposer des éléments suivants :

  • Un ordinateur avec Windows, macOS ou Linux.
  • Un éditeur de code tel que Visual Studio Code, Android Studio, IntelliJ IDEA, ou tout autre éditeur de votre choix.

Étape 2 : Installation de Flutter

Étape 2.1 : Téléchargement de Flutter

  1. Rendez-vous sur le site officiel de Flutter : https://flutter.dev/.
  2. Cliquez sur le bouton « Get Started » pour accéder à la page de téléchargement de Flutter.
  3. Choisissez la version de Flutter compatible avec votre système d’exploitation (Windows, macOS ou Linux) et téléchargez le fichier ZIP correspondant.
  4. Extraire le contenu du fichier ZIP dans un emplacement de votre choix sur votre ordinateur. Par exemple, sur macOS et Linux, vous pouvez extraire Flutter dans votre répertoire personnel (~/), et sur Windows, vous pouvez extraire Flutter dans un répertoire tel que C:\.

Étape 2.2 : Configuration des variables d’environnement

Pour utiliser Flutter, vous devez ajouter le chemin vers le dossier bin de Flutter dans vos variables d’environnement.

Sur macOS et Linux

  1. Ouvrez un terminal.
  2. Exécutez la commande suivante pour ouvrir votre fichier de profil (~/.bashrc, ~/.zshrc, ou équivalent) en mode édition :
   nano ~/.bashrc

Pour les utilisateurs de Zsh, remplacez ~/.bashrc par ~/.zshrc.

  1. Ajoutez la ligne suivante à la fin du fichier :
   export PATH="$PATH:`chemin_vers_flutter/bin`"

Remplacez chemin_vers_flutter par le chemin absolu vers le répertoire flutter que vous avez extrait.

  1. Enregistrez les modifications (dans Nano, appuyez sur Ctrl + O, puis appuyez sur Entrée pour enregistrer, puis appuyez sur Ctrl + X pour quitter).
  2. Exécutez la commande suivante pour appliquer les modifications :
   source ~/.bashrc

Sur Windows

  1. Ouvrez le « Panneau de configuration » et recherchez « variables d’environnement ».
  2. Cliquez sur « Modifier les variables d’environnement système ».
  3. Sous la section « Variables système », recherchez la variable « Path » et cliquez sur « Modifier ».
  4. Cliquez sur « Nouveau » et ajoutez le chemin absolu vers le répertoire bin de Flutter.
  5. Cliquez sur « OK » pour fermer toutes les fenêtres de configuration.
  6. Vous devrez peut-être redémarrer votre ordinateur pour que les modifications prennent effet.

Étape 2.3 : Vérification de l’installation

Pour vérifier si Flutter a été installé correctement, ouvrez un terminal (ou Invite de commandes sur Windows) et exécutez la commande suivante :

flutter doctor

Flutter doctor effectuera une vérification de votre installation et signalera tout problème éventuel. Suivez les instructions pour résoudre les problèmes détectés si nécessaire.

Étape 3 : Installation de Visual Studio Code (VSCode) et de l’extension Flutter

Si vous n’avez pas encore installé Visual Studio Code (VSCode), téléchargez et installez-le à partir du site officiel de VSCode : https://code.visualstudio.com/.

Une fois VSCode installé, ouvrez-le et installez l’extension Flutter en suivant ces étapes :

  1. Cliquez sur l’icône des extensions sur la barre latérale gauche de VSCode (ou utilisez le raccourci Ctrl + Shift + X).
  2. Recherchez « Flutter » dans la barre de recherche des extensions.
  3. Cliquez sur l’extension Flutter officielle proposée par l’équipe Flutter et cliquez sur le bouton « Installer ».
  4. Une fois l’extension installée, redémarrez VSCode.

Étape 4 : Création de votre première application Flutter

Étape 4.1 : Création d’une nouvelle application

  1. Ouvrez un terminal et naviguez vers le répertoire où vous souhaitez créer votre nouvelle application Flutter.
  2. Exécutez la commande suivante pour créer une nouvelle application Flutter :
   flutter create nom_de_votre_application

Remplacez nom_de_votre_application par le nom que vous souhaitez donner à votre application.

  1. Attendez que Flutter crée la structure de votre application.

Étape 4.2 : Exécution de votre application

  1. Une fois la création de l’application terminée, accédez au répertoire de votre application en utilisant le terminal :
   cd nom_de_votre_application
  1. Exécutez votre application en utilisant la commande suivante :
   flutter run

Cette commande lancera votre application sur un émulateur Android ou iOS (si vous en avez configuré un) ou sur votre propre appareil Android ou iOS s’il est connecté via USB.

  1. Vous devriez voir votre première application Flutter en cours d’exécution.

Étape 5 : Personnalisation de votre application

Votre application Flutter est maintenant prête à être personnalisée. Vous pouvez modifier le code source dans le répertoire de votre application en utilisant votre éditeur de code préféré (VSCode, Android Studio, etc.) et voir instantanément les changements en utilisant la commande flutter run.

Explorez la structure de fichiers de votre application Flutter pour comprendre où se trouvent les fichiers de code source, les ressources et les dépendances. Vous pouvez également consulter la documentation Flutter pour apprendre à concevoir des interfaces utilisateur, ajouter des fonctionnalités, et bien plus encore : [https://flutter.dev/docs](https://flutter.dev/docs).

Félicitations ! Vous avez créé et exécuté votre première application Flutter. Vous êtes maintenant prêt à plonger plus profondément dans le développement d’applications mobiles multiplateformes en utilisant Flutter. Bon codage !

4 commentaires

Avatar
Wyatt

Hello, all is going fine here and ofcourse every one is
sharing facts, that’s really fine, keep up writing.

Here is my web site: vpn special code

Avatar
Lorena

Good post. I learn something totally new and challenging on blogs I stumbleupon everyday.

It will always be useful to read through content from
other authors and use a little something from their websites.

Here is my blog: vpn special coupon

Avatar
tlover tonet

You have remarked very interesting details ! ps decent website .

Avatar
Karol

Excellent goods from you, man. I have understand your stuff previous to and you’re just extremely great.
I really like what you’ve acquired here, certainly like what you’re saying
and the way in which you say it. You make it entertaining and you
still take care of to keep it smart. I can not wait facebook vs eharmony to find love online read much more from you.
This is actually a terrific web site.

Laisser un commentaire