Lancer ma première application mobile en Flutter

Ça y est, c’est le grand jour ? ! Vous avez enfin décidé de vous lancer dans le développement d’application mobile avec Flutter.

Bonjour et bienvenue à vous. Aujourd’hui nous allons Lancer notre première application mobile en Flutter !

Cette partie du cours s’appuie sur des pré-requis. A savoir, connaitre les bases de la programmation en Dart, connaitre les bases de la programmation orientée objet en Dart et enfin, avoir installé et configuré son environnement de développement.

Bon, puisque tout est dit, commençons sans tarder…

Création d’un projet Flutter

Pour commencer, vous devez créer un projet Flutter. La création d’un projet Flutter peut se faire de deux façons. Via le terminal (avec une commande) ou via votre éditeur (Ex: Android studio).

• Création via un terminal

flutter create nom_du_projet

• Création via Android studio

NB : toutefois, certains éditeurs tels que Vscode n’offrent pas d’option de création via l’interface graphique. Je vous suggère alors d’être à l’aise avec la première option.

Une fois que le projet est créé, vous pouvez l’ouvrir avec votre éditeur favoris. Vous aurez alors une liste de fichiers et dossiers créés. Voir capture suivante :

Nous allons décrire les éléments qui sont les plus utilisés dans la liste ci-dessus.

• android : dans ce dossier, sont rangés tous les fichiers et dossiers qui permettent le paramétrage de l’application qui sera exécutée sur les smartphones android.
• ios : ce dossier comporte tous les fichiers et dossiers qui permettent le paramétrage de l’application qui sera exécutée sur les smartphones ios.
• linux : ce dossier comporte tous les fichiers et dossiers qui permettent le paramétrage de l’application qui sera exécutée sur les systèmes d’exploitation linux.
• macos : ce dossier comporte tous les fichiers et dossiers qui permettent le paramétrage de l’application qui sera exécutée sur les systèmes d’exploitation macos.
• windows : ce dossier comporte tous les fichiers et dossiers qui permettent le paramétrage de l’application qui sera exécutée sur les systèmes d’exploitation windows.
• web : ce dossier comporte tous les fichiers et dossiers qui permettent le paramétrage de l’application qui sera exécutée sur en environnement web (dans un navigateur).
• test : ce dossier comporte tous les fichiers et dossiers qui permettent le paramétrage des tests unitaires du projet.
• pubspec.yaml : ce fichier contient les déclarations des assets, plugins et autres paramètres tel que la version de l’application, la description, etc.
• lib : ce dossier contient tous les fichiers de code de votre application Flutter écrit en Dart.

Sachez que vous pouvez faire du développement d’application Android, Ios, Web, Linux, Windows, Macos avec le framework Flutter à partir d’une seule base de code. En d’autres termes, avec un seul code écrit, vous pouvez générer des applications pour toutes les plateformes sus-citées. Cependant, comme vous l’aurez deviné, nous nous intéresserons dans cet article qu’aux plateformes Android et Ios.

Exécution d’un projet Flutter

Dans le dossier lib, vous pourrez retrouver un fichier main.dart. Ce fichier contient également un fonction main. Cette fonction main est le point de démarrage d’une application Flutter. C’est à partir de lui que, dans certains éditeurs (Ex: Vscode) vous pourrez démarrer votre application. Dans d’autres éditeurs (Ex: Android studio), vous aurez une barre d’outils sur laquelle vous trouverai un bouton « démarrer ». Mais avant de pouvoir démarrer votre application, veuillez vous assurer que vous avez démarré un émulateur android/ios ou connecté un téléphone android/ios physique de test et qu’il soit bien visible par votre éditeur. Si ce n’est pas le cas, je vous invite à voir cet article, qui vous aidera à mettre en place votre environnement de développement. Une fois que c’est fait, vous pourrez démarrer votre application en précisant comme cible le téléphone.

• Vscode

• Android studio

Vous pouvez ensuite lancer votre application. Vous verrez dans les deux cas, votre console de déboggage s’ouvrir. Vous n’aurai qu’à attendre que l’application soit construite et lancée sur l’appareil cible.

• Vscode

• Android studio

NB : quand vous lancez la première fois une application Flutter, elle peut mettre un certain temps avant de s’afficher sur votre téléphone de test. Ce temps peut aller jusqu’à 30 minutes en fonction de la qualité de votre connexion internet et aussi des performances de votre ordinateur.

Vous aurez ensuite le résultat qui suit, selon les plateformes Android ou Ios :

Conclusion

Félicitation! Voici démarré, votre première vraie application mobile ! J’espère que cet article vous a été d’une grande utilité. Nous continuerons la formations dans un autre article, où nous commenterons et modifierons le code de cette première application. En attendant, n’hésitez pas à commenter cet article en nous laissant vos impressions et vos suggestions. Nous sommes ouverts, vous pourrez nous contacter à tout moment si vous rencontrez un problème particulier. Peace !