Plan de Flutter Révolution

Je vous propose une petite présentation de la formation, en vous montrant tout son contenu, tutos et bonus...

La formation est constituée de 9 chapitres et de 35 tutoriels au total.

Chaque tutoriel est composé d'une vidéo (13 heures de cours au total) et d'un support écrit (comme les tutos du blog).

J'ai donc détaillé dans cette page l'objectif et le résultat de chaque tutoriel de la formation.

Note: Certains tutoriels plus conséquents sont découpés en 3 parties (Messagerie et Carte), mais représentent un seul et même exercice.

Si vous avez des questions sur le contenu de la formation, n'hésitez pas à me poser vos questions à ces adresses: (contact@drissas.com ou contact.drissas@gmail.com)

Commandez le COURS maintenant
shadow-ornament

Chapitre 1: Introduction

Création de votre première application

Bonus: Template Flutter complet d’application à interface sociale.

Comme nouveau bonus de la formation, je vous propose un template Flutter complet d’application à interface sociale.

J’ai mis plusieurs semaines à vous réaliser ce template pour vous permettre de réutiliser tout son code source.

L’application se compose de quatre pages et d’une interface de connexion/inscription que vous pouvez ouvrir depuis le menu.

Il ne s’agit que d’un template visuel, donc aucune connexion à Firebase n’est requise et toutes les données à charger sont locales.

Qu’est-ce que Flutter ?

Flutter est en fait un SDK et non un framework de développement mobile. Qu’est-ce qu’un SDK par rapport à un framework et qu’est-ce que cela représente-t-il pour nos applications ?

Concrètement un framework comme Angular ou React permet de créer de A à Z une application mobile par exemple.

Il nous faut cependant passer par une phase d’adaptation aux appareils mobile lors de la création de chaque version iOS et Android.

Flutter en revanche est donc un SDK, qui veut dire littéralement Kit de Développement (Software Development Kit).

Qu’est-ce que Dart ?

Contrairement à ce qu’on peut penser, le projet du langage Dart chez Google est plus ancien que le projet Flutter.

Il a été développé chez Google au départ pour combler les défauts du JavaScript et avait pour objectif de le remplacer en tant que langage phare du web.

Flutter n’est venu dans un deuxième temps pour trouver une nouvelle utilité au langage Dart resté inconnu du grand public.

Aujourd’hui avec le langage Dart et Flutter, nous pouvons créer des applications mobiles, des sites web et des logiciels de bureau.

Installer Flutter sur MacOS

Dans ce chapitre, nous allons voir comment installer le SDK Flutter sur votre Mac de A à Z.

Une distinction est faite entre les systèmes d’exploitation, car les méthodes de téléchargement sont différentes entre Mac et PC.

Sur MacOS, vous avez la possibilité d’Installer Xcode et Android Studio et vous serez donc capable de développer pour iOS et Android.

Sur Windows le logiciel Xcode d’Apple n’est pas disponible et vous ne pourrez pas développer ou publier sur iOS.

Installer Flutter sur Windows

Dans ce chapitre nous allons voir comment installer Flutter sur un PC Windows.

La procédure est légèrement différente que sur un Mac, notamment en ce qui concerne la déclaration des variables d’environnement.

En ce qui concerne Android Studio le logiciel est identique sur Windows et Mac donc pas de différence majeure à ce niveau-là

En revanche sur Windows vous n’avez pas accès au logiciel Xcode et donc au développement sur iOS.

Configurer Visual Studio Code

Dans ce chapitre, nous allons voir comment installer et configurer l’éditeur de code Visual Studio pour créer nos applications avec Flutter.

Flutter propose en effet différentes solutions pour développer avec Dart et Flutter, j’ai choisi d’utiliser Visual Studio Code, car le logiciel est disponible sur toutes les plateformes Mac et PC.

Nous verrons ensuite comment créer une nouvelle application Flutter en partant de zéro et l’ouvrir dans votre émulateur iOS ou Android depuis Visual Studio Code (VSC).

shadow-ornament

Chapitre 2: Dart

Maîtrise définitive du langage Dart

Comment coder avec Dart ?

Bienvenue dans cette première leçon consacrée au langage Dart et à ses bases fondamentales.

Le Dart, comme tous les langages informatiques possède des règles et des notions fondamentales à connaître.

Il s’agit de la partie du cours qui sera la plus théorique, car nous ne manipulerons pas directement Flutter.

C’est un passage qui est malheureusement obligé si vous souhaitez poursuivre votre enseignement de Flutter.

Je ferais donc en sorte de le rendre le plus dynamique possible, concret et surtout utile pour le développement de vos applications mobiles.

Les principes fondamentaux du Dart

En Dart, comme dans d’autres langages (C++, Objective C, C#) tout votre code passera par une fonction principale appelée main.

Le code Dart qui s’exécutera dans votre application ou votre page sera celui placé à l’intérieur de cette fonction.

Bien sûr, nous ne placerons pas directement tout notre code à l’intérieur, nous utiliserons des fonctionsclasses et par la suite des widgets Flutter pour développer nos applications.

Les variables en Dart

Comme pour tous les langages informatiques, l’une des premières choses à aborder est la notion de variable.

Les variables sont à la fois simples à prendre en main et nous donnent une première utilité rapide à notre code.

Il existe pour tous les langages informatiques toujours les mêmes types de variables.

Nous allons dans le cadre du développement de nos applications avec Flutter, utiliser chacune de ces variables.

Les opérateurs de condition et de boucle

La deuxième notion à aborder dans ce chapitre sur le Dart et celle des conditions et des boucles.

Dans tous les langages, ces différents opérateurs sont utilisés pour réaliser des opérations de base, comme effectuer une condition sur un nombre ou parcourir une liste de données.

Ces opérateurs de conditions et de boucles s’appliqueront justement à des variables, car il s’agira de vérifier leur valeur ou leur contenu et d’exécuter du code en fonction.

Les fonctions en Dart

Les fonctions sont indispensables aux programmes informatiques, elles permettent d’exécuter un code en faisant rapidement appel à elles.

Il existe des fonctions Dart préconçues, comme la fonction print() qui affiche du contenu dans la console.

Mais il est aussi possible de créer des fonctions dans notre code Dart, pour le structurer et séparer les différentes actions.

Les librairies Dart à importer et exporter

L’installation du SDK Dart comprend la présence de librairies Dart à importer dans vos fichiers Dart.

Il est également possible de découper son code en différents fichiers et également en bibliothèques.

Nous allons voir dans cette leçon comment utiliser les principales librairies de Dart et comment en créer de nouvelles.

shadow-ornament

Chapitre 3: Flutter

Les meilleurs pratiques de Flutter

Créer une application Flutter vierge

On entre enfin dans le vif du sujet: Flutter. Après avoir abordé les bases du Dart, nous allons mettre en application tout ce que nous avons appris.

Cette partie consistera à vous faire prendre en main Flutter et à vous faire découvrir ses meilleures pratiques.

Le code de notre application Flutter peut rapidement devenir impressionnant lorsqu’on débute notre apprentissage.

La syntaxe du Dart et la structure des Widgets de Flutter peuvent nous faire peur quand on voit les longues pages de code.

C’est pourquoi je souhaitais revenir sur les bases avec une application quasiment vierge, de cette manière, nous verrons étapes par étapes comment ajouter du contenu à notre page.

Introduction aux Widgets Flutter

Comme vous l’avez peut-être déjà remarqué, l’une des notions essentielles de Flutter est celle des Widgets.

Ils nous permettent d’ajouter du contenu, mais aussi de bâtir l’architecture de notre application.

Ils sont partout dans notre code Flutter et il me semblait indispensable de vous présenter le plus tôt possible toutes les notions à connaître sur les widgets.

Nous verrons avec l’application de démarrage de Flutter les différents types de widgets ainsi que la bonne syntaxe pour les utiliser.

Les packages Flutter

Les packages Flutter sont très utiles voir indispensables lors du développement de nos applications mobiles.

Flutter met à notre disposition des milliers de packages (Dart et Flutter) qui nous permettent d’accéder à des fonctionnalités très facilement.

Nous allons voir comment prendre en main les packages Flutter, les installer et les configurer pour nous en servir.

Les Widgets Flutter de base

On passe maintenant à la deuxième partie de notre chapitre sur les bases de Flutter.

Il s’agira ici de construire de véritables applications Flutter, avec les fondements d’une interface utilisateur.

Nous avons vu dans les leçons précédentes comment manipuler les Widgets Flutter et créer de premières applications très simples.

Maintenant, nous allons voir comment ajouter d’autres Widgets de type image, icône et bouton dans nos applications.

shadow-ornament

Chapitre 4: Interface Utilisateur

Créez une interface utilisateur magnifique

Les Widgets de Design Flutter

On commence ce nouveau chapitre consacré aux interfaces utilisateurs Flutter et plus précisément au design et aux animations.

On débutera par des leçons sur le design Flutter qui est dans la continuité des chapitres précédents.

On a effectivement abordé dans la leçon précédente la notion de Widget Flutter, et on va maintenant s’en servir pour des applications concrètes.

L’idée sera de créer un design d’application étape par étape pour que vous soyez totalement autonome à la fin.

Création d’une page de login avec Flutter

On continue avec une nouvelle leçon qui devrait tous vous intéresser, dans laquelle nous allons recréer une interface de connexion.

L’idée est d’apprendre à maîtriser la création de différentes pages et de gérer la navigation.

Par la même occasion on verra comment séparer notre code Dart en différents fichiers pour s’y retrouver.

Voilà le design que nous allons reproduire avec Flutter dans cette leçon:

Création d’une application Flutter à interface sociale

On termine la partie de ce chapitre consacré au design avec un nouveau tutoriel pratique pour créer une application Flutter.

Il s’agit ici de reproduire une application de type réseau social avec une page d’accueil, de profil et avec un menu tab pour naviguer.

C’est le modèle classique des applications comme Instagram pour séparer les différentes pages de leur application.

Créer des animations de transition de page avec le Widget Hero

On se retrouve aujourd’hui pour un nouveau tutoriel Flutter que j’ai pris beaucoup de plaisir à réaliser.

Il s’agit de prendre en main un nouveau type d’animation Flutter pendant la navigation entre deux pages.

Nous allons pour cela utiliser les widgets Hero() qui vont littéralement se déplacer lors de la navigation entre nos pages.

J’ai repris un modèle d’application de musique pour mettre en scène cette animation:

Créer des animations de chargement avec le Widget Animator

Bonjour à tous et bienvenu dans ce tutoriel sur les différentes animations que Flutter propose.

Nous avons abordé dans la vidéo précédente le widget Hero pour gérer les transitions de page de manière dynamique.

J’aimerais maintenant vous faire découvrir plusieurs notions d’animations Flutter pour dynamiser vos pages.

Nous allons notamment aborder le widget Animator() pour faire effectuer des cycles d’animations à nos widgets.

shadow-ornament

Chapitre 5: Firebase

Intégrez rapidement Firebase dans Flutter

Configurer Firebase avec Flutter sur iOS et Android

Première leçon du chapitre Firebase où nous allons commencer par configurer notre application Flutter.

Nous allons ainsi créer un projet Firebase puis le connecter successivement à l’interface iOS puis Android de notre application Flutter.

Cette leçon va donc nous faire manipuler les outils logiciels de chaque plateforme et donc séparer les étapes pour iOS et Android.

On créera au passage une application toute simple qui se connecte à notre base de données Firebase et nous affiche ce message:

Créer une application Todolist avec Flutter et Firestore

Deuxième tutoriel Firebase pour Flutter, il s’agit cette fois de prendre en main les bases de données Firestore et de construire une application todo-list.

Nous allons créer cette application progressivement en suivant pas à pas chaque étape (Ajouter/Récupérer du contenu à Firebase, Mettre à jour les données de Firebase).

Voilà l’application todolist que nous réaliser qui permet d’ajouter, de valider ou de supprimer une tâche.

Créer une interface de connexion / inscription avec Flutter et Firebase

On se retrouve aujourd’hui un tutoriel très important dans l’intégration de Firebase dans Flutter.

Il s’agit de gérer la connexion et l’inscription de nos utilisateurs via un email et un mot de passe.

Mais il faut également gérer d’autres fonctionnalités complémentaires, comme la redirection ou encore le stockage du profil de l’utilisateur.

Utiliser Firebase Storage pour gérer une photo de profil

Nous allons aborder aujourd’hui une fonctionnalité et un service de Firebase très pratique: le stockage.

En effet, pour gérer les photos, les vidéos ou tout autre type document partagés via votre application, vous devez gérer le stockage.

Nous allons prendre comme exemple ici le cas classique de la photo de profil que nous souhaitons mettre à jour.

Cette photo sera celle de l’utilisateur actuellement connecté et fera partie intégrante de son profil utilisateur.

shadow-ornament

Chapitre 6: Messagerie

Ajoutez un chat à votre application

Création d’un chat en temps réel avec Flutter et Firebase

Je vous propose un tutoriel sur la création d’une application de chat.

Les services de messagerie sont omniprésents dans nos vies, avec des applications comme WhatsApp et Messenger qui comptent des milliards d’utilisateurs.

De nombreux développeurs ou entreprises souhaitent ainsi créer leur propre service de messagerie ou l’intégrer à une application existante.

Je vous propose donc un tutoriel pour créer votre premier chat Flutter avec les bases de données Firestore de Firebase.

shadow-ornament

Chapitre 7: Carte

Créez des cartes dynamiques interactives

Intégrer Google Maps dans Flutter

Nous allons aborder les principales notions de Google Maps dans ce tutoriel pour vous permettre de créer des cartes dynamiques.

Le SDK Google Maps est en effet très vaste et propose de nombreuses autres fonctionnalités que nous n’aborderons pas aujourd’hui.

Nous allons nous concentrer sur la création d’une application de consultation de biens immobiliers.

Les données des logements sont stockées dans Firebase et sont affichées de manière dynamique sur la carte:

shadow-ornament

Chapitre 8: Monétisation

Créez une application rentable en la monétisant

Accepter les paiements bancaires avec Stripe dans Flutter

Aujourd’hui nous abordons l’intégration du gestionnaire de paiement Stripe très populaire dans le milieu des startups.

Stripe permet en effet à n’importe quelle personne ou entreprise de recevoir des paiements via une API extrêmement performante.

Stripe est d’ailleurs utilisé par de nombreuses applications et plateformes célèbres pour gérer les transactions (Booking, Deliveroo, etc).

Nous allons donc voir comment intégrer l’API Stripe dans notre application Flutter pour recevoir des paiements bancaires.

Intégrer des achats intégrés avec Flutter sur iOS et Android

L’objectif du tutoriel, sera de configurer les achats intégrés sur iOS et Android pour ensuite créer une petite application test.

L’application offrira à l’utilisateur plusieurs packs de “Flutter Coins” à différents prix, qu’il pourra acheter et dépenser dans l’application.

Une bonne partie du tuto sera consacrée à la configuration des achats intégrés, qui demande de bien maitriser les environnements d’iOS et d’Android.

shadow-ornament

Chapitre 9: Publication

Publiez votre application sur iOS et Android

Publiez votre application Flutter sur l’App Store (iOS)

Bienvenue dans ce tutoriel sur la publication iOS de votre application Flutter.

Quelque soit l’outil de développement que vous utilisez pour développer votre application iOS, la procédure de publication sera toujours même.

En effet, vous passerez toujours par les logiciels et sites d’Apple, à savoir Xcode et l’AppStore Connect.

J’utilisais donc déjà cette procédure de publication pour mes applications développées avec Ionic par le passé.

Publiez votre application Flutter sur le Play Store (Android)

Nous allons voir comment publier notre application Flutter sur le Play Store de Google.

Pour cela vous aurez besoin d’un compte Google Developper et d’une licence Android (25 $).

Contrairement à l’AppStore d’iOS, la publication Android ne passe pas directement par le logiciel Android Studio.

Nous utiliserons plutôt notre terminal et le SDK Android de notre ordinateur pour signer et archiver notre application.

À la fin nous obtiendrons une App Bundle qui contiendra tout le code de notre application que nous pourrons importer dans le PlayStore.

Commandez le COURS maintenant

Cliquez sur le lien ci-dessous pour Commander le COURS dès Maintenant:

Commandez le COURS dès Maintenant