Apprentissage en temps réel de Flutter Part.4 : On continue avec le codelabs de Google !

Part. 4. Google Codelabs (suite) : Liste avec ajout de favoris

On part maintenant d’une application qui propose des noms pour une startup. Le but étant d’arriver à ce que l’utilisateur puisse sélectionner et désélectionner des noms, en sauvegarder pour pouvoir les consulter. Cet ajout de favori se fera à l’aide d’un bouton (icône) en forme de cœur à droite de chaque ligne. La liste des favoris sera consultable grâce à un bouton dans l’AppBar !

Nous allons commencer par le plus simple : le visuel, en l’occurrence, l’ajout du bouton en fin de ligne permettant d’ajouter en favori le nom sélectionné

Pour cela nous devons dans un premier temps initialiser une liste de WordPair qui sera la liste des WordPair sauvegardés.
Pour cela nous utiliser le type “SET” que l’on cast comme étant un SET de WordPair. Pourquoi utiliser un SET et pas une LIST ? Bonne question, car je ne connaissais pas Set jusque là.. 😅 De ce que je lis, car contrairement à List, Set ne permet pas de “double entrées”

Pour rappel nous avons actuellement trois classes :

• RandomWordsState (State)
• RandomWords (StatefulWidget)
• MyApp (StatelessWidget)

Notre Widget principal, du moins celui qui dispose du plus de méthodes est donc notre RandomWordsState, nous allons donc ajouter une variable dans sa méthode _buildRow (rappelez vous, cette méthode construit notre ListTitle pour chaque Word.

Pour cela il faut simplement déclarer une variable qui permet de savoir si le WordPair est (ou non) dans la liste _saved, pour cela nous pouvons initialiser cette variable directement comme ceci :

Nous allons également puisque nous sommes dans cette méthode, ajouter le bouton (en forme de cœur) permettant d’ajouter un WordPair dans les favoris (nous verrons l’interaction avec ce bouton que plus loin dans le tutoriel)

Pour cela nous devons ajouter dans notre ListTitle une nouvelle propriété au même niveau que la propriété “title” qui est : “trailing”

Et là j’adooorrree ! C’est comme en JavaScript (les conditions inline). Pour ceux qui ne connaissent pas cette syntaxe c’est tout simplement :

CONDITION ? SI VRAI FAIRE CA : SINON FAIRE CA

En gros on test une valeur, si elle est vrai on applique par exemple un style au cœur (plein et rouge) sinon on applique un autre style (vide avec bordure, et pas de couleur)

Et voila les cœurs apparaissent ! ❤️

On va maintenant ajouter une interaction sur nos boutons en forme de cœur. Pour cela, rappelez vous que nous avons une liste _saved (qui en fait est un Set)

Le but va donc être que lorsque nous cliquons sur le Title (propriété “onTap”) du widget, nous allons appelé une méthode setState() qui va (en fonction du statut du WordPair), l’ajouter ou le supprimer de notre liste de WordPair nommée _saved

ATTENTION : La méthode setState() relance la méthode build() pour rafraîchir l’interface

Et le Hot Reloading fait son job et on peut directement voir sur notre téléphone (ou émulateur) que nous pouvons maintenant cocher des cœurs 👌

Nous allons maintenant ajouter une nouvelle “Page” à notre application afin de pouvoir consulter notre liste de favoris ! Dans Flutter une page se nomme une “Route” (jusque là je ne suis pas perdu, c’est le même nom pour les Frameworks JS du moment..)

Dans flutter, on utilise ce que l’on appelle un Navigator c’est en fait une “pile contenant les routes de l’application”. Lorsque l’on ajoute une route dans cette pile, l’affichage est mis à jour pour cette nouvelle route. Lorsque l’on enlève cette route de la pile, l’application nous ramène à la route précédente

Avant de créer notre nouvelle Route nous devons avoir un bouton qui va nous amener à elle. Pour cela nous allons modifier le composant AppBar (qui se trouve dans la propriété appBar du Scaffold de la méthode build() de notre Widget “RandomWordsState) 😵 😵

Comme vous pouvez le voir, au final on ajoute un paramètre après le AppBar qui est un “actions” qui prend ainsi un tableau de widgets dont le premier (le seul en fait, est un IconButton qui prend en paramètre un(e) icône nommé(e) list (comme favorite pour le cœur par exemple)

On défini également dans ce actions que l’on souhaite lors du “onPressed” (événement lors de l’appuie sur le bouton, nous exécuter la méthode _pushSaved()

On voit que l’appel à _pushSaved est souligné car la méthode n’existe pas, créons là et surtout, définissons ce qu’elle va faire.

Cette méthode va utiliser le Navigator dont on a parlé précédemment, qui va donc se charger de stocker une nouvelle route. Voici comment la syntaxe générale

Nous allons maintenant vous ce que l’on va pousser dans ce Navigator. A priori c’est un gros morceau.
On commence par spécifier ce que l’on pousse dans le Navigator, c’est un MaterialPageRoute qui se déclare avec son builder() prenant en paramètre le Context (deja vu).
Dans ce builder nous déclarons un Widget ListTile qui est en fait un objet qui regroupe Texte et Icônes. Nous l’initialisons en effectuant un .map() sur la liste des mots sauvegardés (_saved). Le .map() sert ici à boucler sur la liste (Set)

Nous déclarons également une liste nommée divided qui elle sera simplement une liste de diviseur.

Si nous voulons que notre page apparaisse, il faut bien entendu que notre builder retourne un Scaffold (structure de base) pour notre page (avec son appBar et son body (qui dans le cas présent est une ListView ))

Un petit coup de CTRL+S pour sauvegarder tout ça et on va voir ce que le Hot Reloading va nous offrir ! (en vrai moi j’ai relancer le Debug: Start Debugging car j’avais éteins mon ordi entre deux 😆

On va maintenant s’attaquer au look de notre application

En gros, par défaut, Flutter (votre application) utilise de base de votre de votre type de téléphone ou émulateur. Mais on peut changer ça pour que ce thème reflète ce que vous aimez et/ou voulez faire.

Pour cela, Flutter met à disposition la classe ThemeData, documentation ici : https://api.flutter.dev/flutter/material/ThemeData-class.html

On va par exemple essayer de changer la couleur de base de notre application

Pour cela, nous modifions simplement le build de notre Stateless Widget (MyApp dans mon cas) pour y ajouter une propriété theme.
Par exemple ici je change la couleur principale en rouge. Voici le résultat :

Le theme est un outils très complexe avec beaucoup de personnalisation. Amusez vous avec, j’ai par exemple utiliser ce code pour essayer

Voici le résultat:

Cela ressemble un peu à un mode nuit j’avoue 😛

C’est fini pour cette partie. Je ferai une conclusion et un avis sur ce que j’ai pu découvrir de Flutter pour le moment. Mais je compte aller beaucoup plus loin (très loin même) dans cette découverte. Je continuerai à partager cela.

Nous créerons un nouveau projet pour partir sur de bonnes bases