A la decouverte pas à pas des Widgets de Flutter

Flutter = Widget  et Widget et Widget bref un arbre de widget et on ne peut veritablement comprendre Flutter si on ne comprend pas ses Widgets et dans cet article nous allons reparlé des widgets de Flutter cette fois ci en entrant un tout petit peu et de manière simple avec demo à l'appui sur une petite app "CuisineAfro" qui ressemble à ceci: 

on va monter pièce par pièce toutes ces pages pour comprendre comment les widget de flutter fonctionne, comment on les embrique pour construire l'arbre qui represente en fait ce qu'on fait voir aux utilisateurs de notre app.

cette fois ci pour faire plus vite, j'ai mis sur mon account github ici les codes source  du  template de depart et le projet finale, vous l'avez compris ,vous devez cloner le projet puis suivre ce tutoriel en partant du template intiale qui contient le minimum ou mieux le squelette pour demarrer et suivre ce post.

Vous devz avoir lu si possible tous les articles sur flutter de ce blog donc en voci certains.

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

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

Si vous n'etes pas familié avec git/Github, dans ce blog il y a un petit tutoriel pour les débuatnts en git/github ici(l'esprit du blog est toujours le meme, si vous voulez d'autres tutoriels sur git/github pour éclaircir des zones d'ombres qui vous échappe il suffit de le signaler sur tous mes canaux et je ferai un tutoriel la dessus de manière simple car ce sont des sujets vaste qu'on ne peut aborder dans un seul tutoriel).

Ouvrez le projet initiale dans votre IDE de choix (les demo ici sont fait avec android studio car il est complet et c'est fait par google, vous pouvez egalement le faire avec VSC) dan android studio, quand vous ouvrez n'importe quel projet flutter existant (meme copier de github) allez directement comme sur l'image suivante dans le fichier pubspec.yaml (1) et cliquer sur "Pub get" pour que android studio telecharge immediatement tous les package present dans ce fichier pour les installer dans votre projet de manière que vous n'ayez pas des erreurs de bibliothèques absentes.

une fois faite, vous puvez connecté votre telephone à votre ordinateur par USB et lancez le projet en mode debbogage et ainsi vous n'aurez pas à redemarrer la app à chaque modification car Flutter inclu dans sa SDK ce qu'on appelle un Hot Reload qui permet de modifier la app pendant qu'on est entrain de developer et à chaque fois qu'on modifie un fichier et le sauve, Flutter automatiquement recompile la app et le redeploie sur votre smartphone en temps réel sans que vous ayez à arreter et redemarrer. sur l'image suivant, mon telephone c'est un smasung J250Y et je demarre la app sur le bouton vert

si vous utilisez VSC, en ligne de commande de VSC sur le projet tappez juste "Flutter Pub Get" pour telecharger les package et pour lancer la app en debbogage tappez "Flutter run device android" (vous deviez au prealable avoir connecté votre smartphone à l'ordinateur et en tappant cette commande, flutter vous feras voir votre telephone et vous demandera de le selectionner et une fois fait, il vous lancera la app en modalité debbogage en Hot Reload exactement comme on le fait avec android studio j'en parle de cette manière de faire dans ce tutoriel)

Quand vous lancez la app de depart vous avez cette squelette initiale,(on va le construire pas à pas pour obtenir ce que vous avez vu au depart de ce tutoriel):

Flutter est un arbre de widget, en fait sur le site et la documentation de flutter on a cette formule

Les Widget de flutter sont fait pour gerer les états de la app, un widget est un conteneur des etats de la app, un etat de la app c'est quelque chose que l'utilisateur manipule directement ou indirectement dans l'interface graphique de la app et qui  change regulièrement, bref les états sont associés aux variables dans laquelle nous mettons les données qui servent au fonctionnement de la app, la programmation c'est justement ça: manipuler les données à travers des variables que nous creons et auxquelles on associe des algorithmes, dans Flutter, on passe les états de notre programme au moteur de flutter qui à travers sa methode build (chaque widget flutter contient une methode build qui permet de dessiner le widget à l'ecran en fonction de son état) dessine le widget à l'écran d'ou cette formule mathematique.

ouvrez le fichier main.dart et on va l'interpreter ligne par ligne pour que vous compreniez exatement la structuration de tout projet flutter.

Tout commence par un widget, runApp() dans la fonction main doit retourner le wiget principale (le widget racine) de notre app qui ici est une classe externe qui herite de la classe StatelessWidget de flutter qui est utiliser pour les widgets qui ne doivent pas manipuler les etats, donc des widgets statiques

chaque widget doit implementer la methode build() On parle en OOP(POO) de ovverwriding, c'est à dire on redefinit une methode de la classe de base ici CuisineAfro redefinit la methode build de StatelesWidget car elle derive de cette classe, donc le moteur de flutter s'attend à cette methode qui va contenir l'arbre pour dessiner ce widget à l'écran.

Dissequons à present la classe CuisineAfro (presque toutes les app de Flutter sont plus ou moins structurées de la meme manière et si vous suivez attentivement ce tutoriel, vous serrez capable de lire et comprendre n'importe quel projet flutter)

La app est embriqué dans un widget de type MaterialApp qui nous permet de respecter le Material design de google pour plus de details sur ce sujet bien vouloir lire ici , ce dernier widget contient en son sein le Scaffold widget qui est le widget de flutter pour definir le layout(la structure de la app par exemple barre de navigation, tab, menu, body floatingpoint etc..), dans notre projet de depart, la proprieté body de scaffold contient un autre widget Center qui permet de centré un élement dans son conteneur et c'est ça qui permet au projet initiale d'ecrire le texte "Michui De Porc" au centre, comme quoi on a là un system de widget embriqué. Pour voir l'imbriquation des widget sous forme d'arbre, dans android studio, cliquer sur le devTools comme en image

le DevTools c'est un instrument important quand on est en phase de developpement d'une app flutter et qu'on veut ajuster et mettre en ordre la structure de notre app, on peut inspecter l'arbre et sous arbre de chaque widget pour comprendre comment il est positionné par rapport aux autres widgets et avoir memes ses propriés, je ferai tout un tutoriel seulement pour l'utilisation de ce tool enorme, mais si vous etes curieux et voulez approfondire tout de suite DevTools lisez ce tutoriel

Comment styler notre app?

la plupart des nouveaux en flutter generalement sont des dev qui viennent de la programmation web et justement on appris le CSS qui sert pour styler les pages web, ces developeurs ne se trouverons pas perdu dans flutter,

Nous allons definir le theme de notre app en partant du font de google (package google_fonts qui supporte pret de 90 font qui nous permet de styler nos textes et c'est dejà bien definit dans pubspec.yaml qui contient les package/bibliothèques externes donc on a besoin pour developer notre app), dans le projet initiale, j'ai dejà definit un theme de depart appellé CusineAfroTheme qui contient en grande ligne ceci:

on a definit deux  themes pour les textes appellé "ligthTextTheme et dartTextTheme" en utilisans "Google open sans" pour les textes sous fond blanc et noir et deux methodes static qui retourne des couleur proche du gris et du noir qu'on utilisera pour styler notre app, le code est explicite et tout developeur qui a fait web pourrait le comprendre en grande ligne.Pour utiliser ce thème dans notre app, dans le fichier main.dart, importer ce fichier 

"import 'cuisineafro_theme.dart';"

Remplacer la ou c'est écrit "//TODO: Create theme" par le code suivant

et ensuite la ou il y a "// TODO: Add theme" par 

theme: theme,

ensuite la ou c'est écrit "// TODO: Style the title " remplacer par le code en image(tappez le)

 

à prèsent la ou se trouve le texte "// TODO: Style the body text" remplacez le par le code  en image:

après la mise à jour votre fichier main.dart par tout ce qu'on a decrit ci haut, votre code source contiendra ce qui se trouve ici sur mon gist.github

https://gist.github.com/Defcoq/73025a98d740f0da86123f06a6fa996b

Notre app de depart devient ceci:

Notre theme a fait effet. et c'est simple à comprendre tout ce qu'on vient de voir.

La navigation dans une app mobile est très importante et doit etre planifiée depuis le debut avant meme de concevoir la app car c'est la structure de la app à travers la facilité de le naviguer qui donne toute la puissance à la app, scaffold  est l'un des widget les plus prisé de google material flutter pour la structuration de la app, ce widget implemente presque toutes les structures de layout visuelles à savoir : La AppBar, BottomSheet, BottomNavigationBar,Drawer,FloatingActionButton,SnackBar, Si vous voulez savoir et connaitre tous les widgets qui font partir de Material de google c'est par ici. Dans l'optique de mieux organiser notre code, deplaçons la homepage de notre app dans un fichier à part appellé home.dart (crèeez le) qui doit contenir une classe Home qui doit deriver plutot de StatefullWidget car comme vous l'aurez devinez, la homepage forcement doit gere des états , inserrez dans ce nouveau fichier le code suivant:

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

on a juste recopié ce qui etait jusqu'alors dans la propriété home de material widget, modifions à present notre main.dart de manière à instancié notre nouvelle classe (vous devez importez en haut le fichier home.dart dans la main.dart)

Ajoutons à present le menu de navigation qui se trouve en bas des app android, on appelle cela en anglais BottomNavigationBar je parle de ceci

Pour le faire dans le nouveau fichier home.dart remplacer la ou c'est écrit "// TODO: Add bottom navigation bar" par le code suivant

https://gist.github.com/Defcoq/67525852bbda34ae233ce359eb802297

Vous obtenez le result suivant quand vous sauveguardez le fichier dans android studio et le hot reload recharge la app:

Petit à petit on commence à voir quelque chose de plus utile,pour naviguer d'une tab à l'autre par exemple de car à card2 à card3, on doit avoir la possibilité de connaitre à chaque moment l'index exacte du card, pour cela remplacer la ou c'est écrit "// TODO: Add state variables and functions" (cette fois ci je ne met pas à disposition le code pour ceux qui sont pressés vous avez le projet finale dans mon compte github copiez et collez mais comme ici on est entrain de prendre la main tappez le code suivant en image à la main comme cela vous vous habituerai Lol)

la variariable "_selectedIndex" nous permet de ternire trace de l'index du card sur lequel se trouve l'utilisateur, en bonne tecnique de coding OOP/POO toutes les variables privées commencent toujours par _(caractère underscore), donc il faut avoir cette belle manière de coding, et comme vous l'avez compris, la homepage herite de StatefullWidget parceque justement on doit gerer l'etat de cette variable car chaque fois que l'utilisateur va passer d'une car à une autre, le framework flutter devra repaindre l'interface graphique(donc appéllé la methode build de la home page pour redessiner l'interface graphique voilà pourquoi la Home est un StatefullWidget, retenez le tout widget qui doit gerer des etats/variables qui change en fonction de l'interaction avec l'utilisateur doit etre fait dans un StatefullWidget et non un StatelessWidget qui lui ne gere pas des etats) Pour demander au framework de repaindre l'interface graphique, donc lui signaler que l'etat de notre widget à changer on doit utiliser la fonction mis à disposition par flutter qu'on appelle "setState()", voilà pourquoi en 9, on a crée une methode privée qui va gerer quand l'utilisateur clique sur un tab, on appelle setState et on change l'index. 

Localiser ou c'est écrit "// TODO: Show selected tab" et remplacer le par le code suivant:

Remplacer la ou c'est écrit "// TODO: Set selected tab bar " par le code suivant

currentIndex: _selectedIndex, // 11

onTap: _onItemTapped,

Votre code au finale devrait etre comme ceci:

 

Creons à present les 3 card, vous l'avez deviné, créez 3 fichiers dart: card1.dart, card2.dart,card3.dart contenant respectivement les codes suivant:

card1.dart

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

card2.dart

https://gist.github.com/Defcoq/22b4a28a50a33129e9e5cfa5b9605851

card3.dart

https://gist.github.com/Defcoq/5df0717fbbc33955e086b9419b65164e

creez deux autres fichiers dart pour corriger les erreurs qui apparaissent, tout ce qui est ecrit comme code dans ces fichiers sera decrit tout à l'heure : creez author_card.dart avec le code suivant:

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

puis le fichier circle_image.dart avec le code suivant:

https://gist.github.com/Defcoq/855d1e3180c9f03202d29ef30f99344a

Retournez dans home.dart et remplacer notre array provisoire de car par ce code la ou on avait definit la variable pages contenant le contenu de ce qu'on doit voir en cliquant chaque tab.

Si vous relancez à present la app vous aurez exactement l'image qui a été posté au debut de ce tutoriel à savoir:

Place maintenant à l'explication pas à pas des contenus de chaque card pour mieux decouvrir les widgets de flutter:

Decortiquons le code du Premier card

Il est constitué des widgets suivants:

 Container: le but et le role de ce type de widget est juste de regrouper ensemble d'autres widegets, pour cela il applique le "Padding" et utilise le "BoxDecoration" pour appliquer des ombratures(ombres) et arrondire les angles

Stack: c'est un widget donc le but est d'empilé ces widgets fils, donc l'un audessus de l'autre, si vous observez bien la card1 en reguadrant le code et l'image vous verrez comment le texte "Michui de porc" est au dessus de "Porc de dschang" etc car c'est contenu dans un stack qui force se positionnement.

card1 contient aussi les widget image et text donc point besoin n'est de dire ce qu'ils font car vous l'aurez compris que  le widget sert pour afficher une image et du coup comme on se trouve dans un container, on peut arrondire l'angle de l'image en appliquant un BoxDecoration, le code est assez explicatif et comprehensif. Comme l'image du card est un peu noir, on opte pour les écritures en font blanc avec le theme suivant "CuisineAfroTheme.darkTextTheme.headline2", si on a une image sous font blanc comme dans card2, on optera pour des textes noirs d'ou le changement de theme pour les textes dans ce card, juste pour vous faire comprendre l'utilité d'avoir des alternatifs differents pour styler vos widgets, vous remarquerez la qu'on est exatement en plein comme dans le css avec une page web 

.Decortiquons le card 2

Il est similaire au card1 car embriqué dans un conatiner widget et donc utilise Boxdecoration et padding, mais on a ajouté un petit profile du cusinier avec sa photo, son nom et sa profession, concentrons nous un peu sur le widget qui decrit le profil du cuisinier un instant car c'est la particulité de ce card2, on a concentré dans un fichier à part question de diviser pour mieux reigner et faire un peu de nettoyage, le code pour concevoir le profil du cusinier qui se trouve dans "author_card.dart"

ouvrez le code et lisez ligne par ligne en essayant au besoin de reguarder l'image ci dessus que j'ai bricolé juste pour vous faire comprendre comment ça a été imaginé et puis implementé pour produire exactement ce rendu, j'ai pris le soin de mettre tous les widget de flutter qui ont permis de le construire, le widget row de flutter permet d'aligner ses widgets fils sur une meme ligne exactement comme le row de bootsrap, le widget colum permet de positionner c'est element dans une colonne ainsi alors qu'on était dejà dans une row, il y avait necessité de positioner l'un au dessus de l'autre le nom du cusinier et sa profession, le widget colum permet ainsi de faire ce jeu. Ce widget du profil du cuisiner introduit aussi un nouveau widget qu'on a crée de toute pièce pour faire le cercle sur la photo de profile du cuisinier (un peu comme dans tous les profils sur facebook, github, linkedin etc..), le widget est definit dans Circle_image.dart et utilise en grande ligne le widget natif de flutter material "CircleAvatar", remarquez que dans author.card.dart on a utilisé deux row parce qu'on voulait faire un grand espace entre l'image en couer pour les like du profile du cuisiner et son nom + description + son image de profil, ainsi la row comune ou tous ses widgets utilise l'option "mainAxisAlignment: MainAxisAlignment.spaceBetween," pour creer cet espace entre les deux groupes, vous pouvez vous exercer en les modifiant et en changeant meme la structure pour voir son comportement.

Decortiquons le card3

La particularité de ce widget par rapport aux autres est qu'il contient un widget qu'on appelle chip,vous l'avez dejà rencontré dans plusieurs de vos app et pour approffondire ce widget lisez ici

Comment savoir le widget qu'il faut pour telle ou telle autre chose?

Flutter met à notre disposition une documentation complete de chaque widget et comment s'en servir par ici et je vous invite de temps en temps à y donner un coup d'oeil

comme je vous ai dit au bas de cet article ci, 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.

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: