Pas à Pas avec Flutter à travers la construction d'une app : Les Recettes de cuisine

Dans ce post, nous allons découvrir flutter cette fois ci partant des choses de bases qui peuvent servir non seulement aux hyper débutants, mais meme aux experimentés qui parfois utilisent certaines choses sans entrés en profondeur.

Bien à savoir: dans ce meme blog les liens suivants sont des posts en reference au developpement sur flutter qui serait interessant d'explorer.

Creation pas à pas d’une application mobile avec le framework Flutter : une calculette simple en flutter

Dvelopper les app Mobile flutter : Comprendre son ecosysteme à travers Quiz Codeur

Gestion des états (State Management ) en Flutter avec Bloc/Cubit et les Repository Pattern

Nous allons crée une application simple  de recette de cuisine de plats africains comme en image:

Je supposes que vous avez installez Flutter et son environnement de developpement si ce n'est pas encore fait tout est décrit dans le premier lien ci haut si non telecharger la SDK de flutter ainsi que android studio ici

On peut creer une app flutter dans plusieurs manière, à travers android studio ou bien directement dans une invite de commande et c'est cette dernière manière qui sera utilisé pour creer l'application de recette de cuisine objet de cet article, ouvrez n'importe quelle invite de commande dans le repertoire ou vous voulez creer le projet en y accedant avec la commande cd "Chemin_Du_Repertoire" (cmd ou powershell moi sur windows je fais tout dans powershell) et tappez la commande suivante:

flutter create recettecuisine

Cette commande vous permet de creer un projet flutter organisé comme suit:

ouvrez ce repertoire dans android studio

Comme vous puvez le constatez, Flutter vous a crée une app dejà fonctionnante e si vous l'exécuter en reliant par une cable USB votre ordinateur à votre telephone et ayant activé l'option developpeur dans paremetrage vous verrez une la app suivante:

 

La meilleur manière d'apprendre c'est de modifier une application existante et de l'adapter à ce que nous voulons faire, nous allons donc modifier ce template gratieusement donné par Gooogle flutter pour creer notre application de recette de cuisine.

le template de depart de flutter nous a generer une classe MyApp qui comme tous les app de flutter, doit deriver/heriter de la classe StatelessWidget, une fois de plus, flutter est un framework basé sur les widgets, tout ce qui est dssiné dans une app flutter à l'écran est un widget en fait l'application flutter est un arbre de widget(widget tree en anglais) et flutter est declarative dans ce sens que le changement des etats de widget est fait par le moteur de flutter, chaque widget à qui est associé un ou des états est recréer chaque fois que sont etat change et que le developpeur le demande à flutter, pour cela il existe deux tupe de widgets dans flutter, ceux qui n'ont pas d'état et ducoup ne peuvent pas changer en runtime(en execution)  on les appelle StatelessWidget widget et tous nos widget à qui on ne veut pas associé des états doivent deriver de cette classe ,et ceux qui on des états associés StatefullWidget

Changeons MyApp en "RecetteCuisineApp" pour cela dans andoid studio, faite un click droit sur "MyApp", refactor=>Rename come en image

maintenant la fonction main qui est le point principale de notre app ressemble à ceci:

Nous allons à présent mettre un peu de style dans notre code, pour cela remplacer la methode Build juste en dessous par le code en image(je fais expressement en image pour eviter que vous copiez/collez essayez de le tappez à la main comme en image pour vous habituer)

Chaque widget Flutter doit contenir cette methode build qui est appellé chaque fois que le framework dessine ou veut redessiner le widget à l'écran(paindre ou repaindre en français facile),justement le mot clé "@override" juste au dessus de la méthode Build veut tout simplement dire qu'on est entrain de refedinir cettte methode qui en fait est heritée de la classe Statelesswidget, c'est la la POO. Nous definissons(2 sur l'image) une variable de type ThemeData qui va contenir l'aspect visuel generale de notre app comme la couleur, le font et le theme de defaut vient du material design de google, en ligne 5 nous imposons à notre app d'avoir une couleur principale grise et une couleur secondaire noire, notre widget retourne en 3 comme je l'ai souligné si haut un widget de type material qui respecte le google material design qui est un ensemble de specifications pronnées par google pour respecter le design des app android et google demande à tous les developpeurs de suivre ces specifications pour que les utilisateurs android puisse avoir les app qui ont une meme hergonomie. Le Material widget a une propriété home ou on doit lui specifier le widget qui doit etre visible à l'écran quand l'utilisateur lance la app, comme tout est question de widget, en 6 nous retournons donc "MyHomePage" qui est de type Statefull car eil doit contenir les états par exemple la listes des recettes qui doit etre dynamique et que nous creerons tout à l'heure.

Tous les widgets de type Statefull ont toujours cette signature:

la classe qui doit gerer les états du widget doit etre une classe externe definir à l'exterieur de la StatefullWidget, d'ou la variable privée _MyHomePageState, qui est definit externement à MyHomePage et qui contient le code pour la construction de la home page avec ses états, tous les app de flutter sont fait de cette manière et vous devez vous y habituez. Faison un peu de nettoyage dans cette classe, remplacer toute la classe _MyHomePageState par ce que vous voyez en image, pour eviter le copiez/collez, je met plutot l'image comme cela vous vous habituerez.(attention on fera reference plus en dessous sur les zone ou c'est ecrit à faire)

en 1, le "Scaffold" est un widget qui permet de d'avoir une structure bien organisé de notre app, il contient une propriété appbar qui est un autre widget definit en 2 et qui contient le titre de notre app que lui passe la HomePage comme ceci : home: MyHomePage(title: 'Recette Cuisine africaine'), il comprend aussi une propriété de type body qui est un autre widget et ici definit par SafeArea pour avoir une hergonomie très très proche de la plateforme ou la app sera exécutée, je rappelle que avec flutter on fait un seul code mais on peut generer plusieurs app du meme code pour different plateforme(android, ios, web, desktop, PWA etc..), SafeArea lui meme a un widget (child ) qui ici est juste un contenaire vide(un autre widget).

Dans cette app de demo, nous n'allons pas lire les recette d'une api REST/Base de données (normalement chaque app communique presque toujours avec une base de données à travers des API REST sous format JSON pour ses données mais dans cette demo on doit faire simple et cablé toutes nos données directement dans le code, pour ceux qui participent au developpement de notre application QuizCodeur, ils peuvent comprendre ce que je viens de dire plus facilement car QuizCodeur n'est pas seulement une app mais une plateforme fais de plusieurs applications et c'est ainsi pour toutes les plateformes professionnelles de nos jours).

Dan le repertoir lib ou se trouve main.dart le fichier principale de l'application, créez un nouveau fichier recette.dart avec le contenu suivant en image(prenez la peine de le tappez pour apprendre à la fin du tutoriel je mettrai le lien pour telecharger le code source finale sur mon account github, faite attention à ce qui est encadré en balnc car par la suite on va remplacé ces endroit par du code plus bas.)

Copiez collez le code suivant (cette fois ci je mets le code car c'est un json assez long) là ou c'est écrit : "// A Faire; Ajouter List<Recette> ici"

https://gist.github.com/Defcoq/db4019d985c6c20f5e5c74f47512da5f

comme vous le voyez dans le json des recettes (qui normalement devrait etre lu à partir d'une API REST), nous faisons reference aux images qu'on doit lire à partire du repertoire assests de notre projet flutter, il faut donc specifier à flutter que nous disposons des images dans ce repertoire et qu'il doit le prendre en consideration au moment de la compilation de la app, pour faire cette indication nous devons modifier le fichier pubspec.yaml (j'ai dejà decrit dans d'autres tutories à quoi sert ce fichier) comme en image:

Vous devez ensuite telecharger les images  dans le code source github de ce tutoriel pour le mettre dans le repertoire assets(si vous n'avez pas ce repertoire dans votre projet flutter creez le), vous pouvez aussi si vous voulez utiliser vos propres images en les copiant sur le net.

Retournez dans la classe Recette.dart et remplacer  l'endroit ou on avait mis "// A faire: Ajouter Ingredient() ici" par le code en image (cette fois ci el code n'est pas long )

On peut à present retourner dans notre fichier main.dart pour essayer de construire et finire notre homePage.  dans le fichier main, importons notre fichier Recette.dart qu'on vient à peine de creer en haut du fichier comme en image

Chaque Recette dan notre application sera contenu dans un Card bref un widget de type Card, pour ceux qui ont fait html et utilsé boostrap, ils peuvent savoir ò quoi sert une Card, c'est juste une composante qui permet de regrouper un ensemble d'information correllées de manière ergonomique et flexible , notre app doit produite dans la homepage une liste des recettes de la app fait comme ceci:

chaque image avec le nom de la recette tout en bas forme ce qu'on appelle une Card, donc en fait une Card c'est un regroupement de widget qui à leur tourne seront encastré dans une listview de flutter qui est un autre widget capable de contenir une liste d'element sur lequel l'utilisateur peut faire defiler à l'ecran, d'ailleur la majorité des app que nous avons dans nos telephones sont constituées des listview. Dans _MyHomePageState, creer la methode suivante (à mettre la ou c'etait prevu : A faire: Ajouter buildRecetteCuisineCard() ici):

la propriété "elevation" du widget card en 1 en image permet de faire en sorte que notre resorte un peu en avant à l'ecran de l'utilisateur cet à dire donne l'effet d'etre bombé en quelque sorte, essayez d'augmenter sa valeur après pour voir comment il se comporte, on entoure notre card dans un rectangle rond en 2 avec la propriété shape et le widget natif "RoundedRectangleBorder" du framework flutter, tout ce qu'on veut inserrer dans un widget Card doit etre contenu dans la proprité child de ce widget qui en fait est un autre widget(flutter c'est un arbre de widget imbriqué père fils je vous l'ai dit), en 3 nous utilisons donc un widget Padding qui fait un peu de l'espace à l'interieur pour ses elements fils un peu comme le padding du HTML et justement on specifie le padding qu'on veut dans la propriété padding de ce widget puis, la propriété child doit comprendre les widget qui vont faire partire de l'arbre de ce sous widget padding, on a choisit en 4 le widget Colum qui comme vous pouvez immaginer creer un layout verticale entre ses enfants, donc en quelque sorte l'un est empilé au dessus de l'autre dans le flusse d'insertion, ce widget colum a une propriété children(enfant en anglais) qui est un array(tableau) de widget, nous empilons donc d'abord une image (un autre widget) qui contient notre recette en 5, nous creons un peu de l'espace avec un autre widget(sizebox), et enfin en 6 on a le text qui devra comprendre le nom de notre recette.. ce qui va donner un card exactement fait comme ceci:

Creez un autre fichier "detail_recette.dart" avec le code suivant qui va contenir plus de detail sur la recette (chaque recette doit avoir des details de manière à ce que quand l'utilisateur clique sur la card d'une recette, nous le dirigeons vers une page de notre app  contenant les données detaillées de la recette):

https://gist.github.com/Defcoq/e33e17cfe9791de972653d649b16bf16

Ce code comme vous le constatez represente un autre widget qui derive de StateFullWidget et qui va contenir tous les composantes que nous voulons voir dans la page de details de la recette, plus besoin de vous expliquer ce que pourrai produire ce code, le resultat finale en accedant au detail d'une recette est la suivante:

donc en s'inspirant un peu de ce qui a été decrit si haut, on peu directement en lisant le code comprendre comment est fait l'arbre de ce widget.

Retournons enfin dans la Build de _MyHomePageState qui contient l'interface graphiqrue de notre home page et ses états (vous avez deja compris flutter c'est un ensemble de widget et chaque widget a des états associés et ce sont ces états qui rendent l'application interactif et chaque fois que l'etats d'un widget change, le framework flutter repaint ou mieux redessine tout l'arbre de ce widget (donc le widget parent et ses fils), c'est pourquoi on dit que flutter est un framework declaratif.. retenez le bien), remplacer la propriété body par le code suivant:

il y a plusieurs recettes et nous devons le mettre dans une ListView(en 4), la listview flutter est un widget dynamique dans ce sens qui ne sait pas à l'avance combien de fils il peut contenir et du coup plus les fils s'ajoute, plus il est dynamique et donne la possibilité à l'utilisateur de parcourir (on parle de scroller en anglais) tous les fils par une gesture sur l'ecran qui fait defilé les élements, vous le faite chaque jours dans vos app, par exemple ouvrez la app de facebook dans votre smartphone, ce que vous voyez dans votre file d'actualité est une listview, tous post que vous voyez defilé dans la file d'actualité est une listview, le widget Listview de flutter attend une propriété itemCount qui doit contenir le nombre d'élement de la listeview, en 5 on en profite pour lire notre tableau de recette et on lui passe le nombre d'élement dans ce tableau qui represente le nombre de recette  qui devrait normalement provenir d'un API REST mais là n'est pas le sujet ici, la propriété itemBuilder en 6 de la listview c'est là ou effectivement on dècrit ce que devrait contenir notre listeview, la listeview est dynamique et peut contenir n'importe quoi, sa propriété child  en 11 doit contenir le design que devrait avoir chaque élement de la liste, les élements doivent etre identiques, nous appellons donc notre methode ou on a definit le card, donc chaque élement de la listview aura un card des recettes comme dejà expliqué ci dessus. Chaque élement de notre listview est embriqué dans un widget "GestureDetector" qui a cette particularité de detecter les actions que l'utilisateur fait à l'ecran, par exemple s'il a cliqué sur un élement de la listview,  la proprié OnTap ou mieux l'evenement OnTap de GestureDetector contient le bout de code qui est executé si l'utilisateur clique sur un élement de la liste (8), dans notre cas, si l'utilisateur clique sur une Card, on doit partir à la page de detail qui comme vous l'avez compris si haut est un autre widget, pour naviguer d'une page à l'autre, le framework dispose d'un widget specialement fait pour passer d'une page à l'autre appellé Navigator qui fonctionne avec une structure de type PILE, dans une structure de donnée de type PILE, c'est le last in first out donc en fait c'est le dernier élement de la PILE qui est visible à l'écran, donc on utilise la methode push de navigator pour mettre au dessus de la pile la page qu'on souhaite que l'utilisateur voit à l'écran, et ce'st la page de detail des recettes, si on veut retourner dans la page precedente, comme c'est une pile, on utilisera la methode POP pour l'enlever dans la PILE (j'ai parlé ici dans mes pages des structures de données et meme dans ce blog j'ai des articles qui parles des structures de donnèes en generale et meme pleur implementation dans plusieurs langage de programmation, et dans ces structures de donnèes il y a biensure les PILE (stack en anglais))

Voic le code complet de notre main.dart

https://gist.github.com/Defcoq/f8bfe60e35d5aa6f5cd5fe9460435bf1

Dans le prochain article, on jouera et on s'amusera avec different type de widget present dans le framework flutter pour que vous vous y habituez et que quand vous voyez un code flutter comme QuizCodeur version Flutter, aucun widget ne dois vous faire peur, outre les widget du framwork nativement, flutter permet de creer ses proprres widget en les derivant des widget stateless et Statefull comme vous avez vu dans cet article et c'est ce que beaucoup de devloppeurs flutter font.

J'ai un toolkit fait de milliers de dizaines de widget pret à l'emploi, des milliers de templates pour tout genre de app que vous pouvez immaginer(sport, ecommerce, login, cinema, news etc..) je le partage gratuitement avec tous les followers abonné de ma page, pour vous donné juste une idée:

Si vous voulez avoir ce toolkit, abbonnez vous à mon blog et laisser un commentaire en bas de ce post avec votre compte github ou contactez moi inbox sur messenger je le partagerai avec vous.

Le code complet de l'application se trouve ici sur mon compte github vous pouvez le telecharger et le modifier à votre plaisir pour vous divertir et pour tous ceux qui desirent participer à la plateforme QuizCodeur , lire les fonctionalités que nous voulons ajoutés à ce qui est actuellement en cour de devloppement, et contactez moi inbox ou mettez votre compte github en commentaire à ce post et dite moi le projet au quel vous voulez participer et je vous mettrerai dans le projet en question. on a pas besoin d'etre un expert pour entrer dans un projet, juste avoir la volonté de se challenger en particiapant à un projet réel, toutes vos doutes seront éclaircit à travers des tutoriels comme celui ci.

 

 

 

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: