Flutter est un framework d'application mobile open source qui est une solution multiplateforme pour créer des applications de haute qualité. Il utilise un cadre réactif, ce qui permet de créer rapidement et facilement de belles applications mobiles.
Qu'est-ce que Flutter?
Flutter est un framework de développement d'applications mobiles qui fonctionne sur iOS et Android. Il est conçu pour aider les développeurs à créer des applications pour les deux systèmes d'exploitation avec une seule base de code.
Pourquoi apprendre Flutter?
Flutter est un framework open source qui aide les développeurs à créer des applications mobiles multiplateformes. Il a été développé par Google et constitue leur alternative à d'autres frameworks tels que React Native, Ionic et Xamarin.
Les développeurs devraient envisager d'apprendre Flutter car c'est l'une des technologies à la croissance la plus rapide au monde, elle a une forte demande d'emplois et elle est soutenue par Google.
Comment installer Flutter sur Mac
Étape 1: Téléchargez le paquet d'installation suivant pour obtenir la dernière version stable du SDK Flutter : Intel | Apple Silicon
Étape 2: Décompressez le fichier à l'emplacement souhaité, par exemple :
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_3.3.0-stable.zipÉtape 3: Ajoutez Flutter à votre path :
$ export PATH="$PATH:`pwd`/flutter/bin"Cette commande définit votre variable PATH pour la fenêtre actuelle du terminal uniquement. Pour ajouter définitivement Flutter à votre chemin d'accès, voir Mettre à jour votre chemin d'accès.
Vous êtes maintenant prêt à exécuter les commandes de Flutter !
Comment installer Flutter sur Windows
Étape 1: Téléchargez le paquet d'installation suivant pour obtenir la dernière version stable du SDK Flutter : Le lien.
Étape 2: Décompressez le fichier à l'emplacement souhaité, par exemple : C:\src\flutter
Étape 3: Ajoutez Flutter à votre path :
Si vous souhaitez exécuter les commandes Flutter dans la console Windows ordinaire, procédez comme suit pour ajouter Flutter à la variable d'environnement PATH :
Dans la barre de recherche du menu Démarrer, entrez "env" et sélectionnez Modifier les variables d'environnement de votre compte. Sous Variables utilisateur, vérifiez s'il existe une entrée appelée Path :
Si l'entrée existe, ajoutez le chemin complet à flutter\bin en utilisant ; comme séparateur des valeurs existantes.
Si l'entrée n'existe pas, créez une nouvelle variable utilisateur nommée Path avec le chemin complet vers flutter\bin comme valeur.
Vous devez fermer et rouvrir toutes les fenêtres de console existantes pour que ces modifications prennent effet.
Testez votre installation
Exécutez la commande suivante pour voir s'il y a des dépendances que vous devez installer pour compléter la configuration (pour une sortie verbeuse, ajoutez le mot -v) :
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5.1 21G83 darwin-x64, locale
en-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.71.0)
[✓] Connected device (1 available)
[✓] HTTP Host Availability
! Doctor found issues in 1 category.Installer un éditeur de code
Pour ce tutoriel, nous allons utiliser Visual studio code, cliquez ici pour télécharger VS Code.
Installer les plugins Flutter et Dart
Cliquez sur l'onglet extension à gauche et cherchez flutter, installez flutter dart.
Créer un nouveau projet avec VS Code
Tapez la commande ctrl+shift+p sur Windows ou cmd+shift+p sur Mac. Saisissez flutter sur la barre de recherche et cliquez sur l'option New project.
VS Code, va vous proposer différentes options, choisissez la première.
Cliquez sur Application et choisissez un dossier pour votre projet.
Validez et changez le nom de votre application.
Tester l'application sur VS Code
Pour tester l'application, nous allons appuyer sur la touche f5 sur Windows ou fn+f5 sur mac. Attendez quelques minutes, flutter est entrain de builder votre application.
Une fois fini, vous obtenez ce résultat.
Changement du code
Nous allons faire quelques manipulations du code généré par VS Code. Ouvrez le fichier lib/main.dart et scrollez jusqu'a la ligne 27 et modifiez le texte "Flutter Demo Home Page" par un texte de votre choix. Enregistrez et regardez votre émulateur.
home: const MyHomePage(title: 'Apprendre Flutter')
Jouez avec le code, pour modifier le texte qui est au milieu, scrollez jusqu'a la ligne 99 .
const Text(
'Vous avez cliquez le bouton plusieurs fois:',
)
Changez la couleur de l'application, scrollez jusqu'a la ligne 25.
primarySwatch: Colors.orange,
Cette application devrait suffire à vous faire découvrir Flutter sur Visual studio code. Si vous voulez aller plus loin, inscrivez-vous à notre prochaine cohorte.
