Nouvelles Et Événements
Comment créer votre première application mobile avec Flutter ?
Flutter, vous en avez sûrement déjà entendu parler. Mais au fait, qu’est-ce que c’est exactement ? Dans ce tuto, nous allons découvrir les origines de Flutter, de Dart et comment installer notre environnement de développement. Nous verrons ensuite comment créer notre première application mobile.
Les origines
Flutter a été créé par Google et est apparu pour la première fois en mai 2017. À l’origine, Flutter devait permettre à Google de proposer une interface utilisateur unifiée et performante aussi bien pour Android que pour iOS.
Le pari était osé, mais Google a investi massivement dans le développement de Flutter qui est rapidement devenu un projet open source à part entière. Aujourd’hui Flutter est utilisé par des milliers de développeurs à travers le monde.
Dart ?
Dart est un langage de programmation développé par Google pour accompagner le framework Flutter. Dart propose une syntaxe familière pour les développeurs et comporte de nombreuses fonctionnalités modernes.
Dans ce chapitre, nous allons découvrir les bases de la syntaxe et des fonctionnalités clés de Dart.
Une syntaxe simple et familière
La syntaxe de Dart s’inspire de langages populaires comme Java, JavaScript ou C#. Elle sera rapidement abordable si vous avez déjà une expérience en programmation.
Voici un exemple de code Dart qui imprime un texte dans la console :
Note : Dart supporte également la programmation orientée objet avec des classes, que nous verrons plus loin.
Typage statique
Dart est un langage avec typage statique. Cela signifie que chaque variable doit être explicitement déclarée avec son type :
int nombreEntier = 42; double nombreDecimal = 3.14; bool valeurBooleene = true;
Le typage strict est un gage de qualité et permet d’éviter de nombreuses erreurs.
Installation
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
- 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.
- 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.
- Lisez le Contrat de licence.
- 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).
- Cliquez sur Download Android Studio (Télécharger Android Studio) pour lancer le téléchargement.
- Lorsque vous y êtes invité, enregistrez le fichier à un emplacement facilement accessible, par exemple dans le dossier
Downloads(Téléchargements). - 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 :
- 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_appcontenant les fichiers initiaux de l’application Flutter. - 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./androidet/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.
- Avec Android Studio :
- Ouvrez Android Studio et lancez un émulateur Android depuis l’AVD Manager.
- Via la Palette de Commandes de VS Code :
- Appuyez sur
Ctrl+Shift+P(Cmd+Shift+Psur Mac) pour ouvrir la palette de commandes. - Tapez “Flutter” et sélectionnez “Flutter: Launch Emulator”.
- Choisissez un émulateur dans la liste.
- Appuyez sur
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 !