Maintenant que nous pouvons accéder en toute sécurité aux valeurs saisies et sélectionnées, nous voulons
bien sûr nous assurer que ces valeurs sont transmises au widget de liste d'épicerie, car je veux en fait
gérer ma liste d'articles d'épicerie qui doivent être affichés à l'écran.
Pour l'instant, j'utilise bien sûr les produits d'épicerie factices du fichier "dummy items, dot dart".
Mais cela est sur le point de changer car ici, dans grocery list dot dart, au lieu d'utiliser ces
articles factices, nous voulons maintenant gérer une variable ou en fait une propriété finale qui pourrait être appelée grocery items (articles d'épicerie).
Pour être précis, il doit s'agir d'une liste de types.
Une liste d'articles d'épicerie utilisant notre classe d'articles d'épicerie comme type.
Et pour cela, il faut bien sûr ajouter cette importation.
Au départ, il s'agira d'une liste vide.
Mais bien sûr, cette liste ne restera pas vide.
Au lieu de cela, il devrait changer chaque fois que nous ajoutons un nouvel élément.
Mais bien entendu, ces nouvelles données sont saisies dans un autre écran.
Comment faire passer les données de cet écran à ce premier écran à partir duquel nous naviguons vers l'écran des nouveaux
éléments ?
En utilisant une approche et une fonctionnalité de Flutter que vous avez apprises dans la section sur la
navigation, vous pouvez transmettre des données de l'écran B à l'écran A, et vous pouvez le faire dans l'écran B, donc l'écran
vers lequel vous naviguez depuis l'écran A en utilisant la classe de navigateur qui est intégrée dans Flutter du contexte et en appelant
pop.
Cet écran sort de la pile d'écrans et renvoie l'utilisateur à l'écran précédent, comme le fait le bouton "Précédent"
de l'appareil ou de la barre d'applications.
Mais nous pouvons maintenant passer des données à pop ici.
Les données qui ont été saisies et validées, et celles que je souhaite transmettre ici, concernent un article d'épicerie.
Je vais donc créer un nouvel article d'épicerie en utilisant le modèle d'article d'épicerie du dossier des modèles.
Nous devons alors définir un nom d'identification et ainsi de suite.
Maintenant, pour l'ID, je vais générer un nouvel ID en utilisant la classe DateTime intégrée et la fonction constructeur
now.
Ensuite, je convertirai le tout en une chaîne de caractères.
Techniquement, ce n'est pas un identifiant unique parfait, mais c'est suffisant pour cette application fictive et nous passerons
à un meilleur identifiant plus tard, lorsque nous ajouterons un backend à cette application.
Pour l'instant, c'est suffisant et nous pouvons continuer avec le nom.
Maintenant, pour ce nom, nous voulons bien sûr attribuer le nom saisi.
Que nous extrayons à l'aide de la sauvegarde, comme vous l'avez appris.
Pour la quantité.
Il s'agit, bien entendu, de la quantité saisie.
Et pour la catégorie, c'est la catégorie sélectionnée comme ceci.
Cela créera un nouveau produit d'épicerie et le renverra à l'écran d'où nous venons, c'est-à-dire l'écran de
la liste des produits d'épicerie.
Et là, nous pouvons accéder aux données qui sont renvoyées en utilisant async et ensuite await et récupérer le
nouvel élément comme ceci.
C'est ce que vous avez appris dans la section du cours de navigation.
Push produit un futur qui contient les données susceptibles d'être renvoyées par l'écran que vous avez poussé sur
votre pile d'écrans.
Il s'agit d'un futur car, bien sûr, il faudra un certain temps avant que l'utilisateur n'en ait fini avec ce nouvel écran d'éléments.
Mais nous finirons par récupérer ces données, qui devraient être de type "article d'épicerie".
Push est une fonction générique dans laquelle nous pouvons ajouter cette annotation pour indiquer à DART quel type de données sera finalement
produit.
Cela permet de s'assurer que l'EICC comprend que le nouvel article est un article d'épicerie ou qu'il est nul, et il peut être nul parce que, bien sûr, nous
pouvons également revenir à cet écran en utilisant le bouton de retour de l'appareil ou le bouton de retour dans
la barre d'application.
Dans ce cas, aucun nouveau produit d'épicerie n'aura été créé.
Cela ne se produit que si nous avons cliqué sur le bouton d'ajout d'un élément, ce qui déclenche la méthode d'enregistrement de l'élément, puis nous passons
la validation et appelons l'enregistrement.
Ce n'est que dans ce cas qu'un nouvel article d'épicerie sera créé et renvoyé.
C'est pourquoi le nouvel élément pourrait être nul ici et nous devrions vérifier s'il est nul si le nouvel élément est nul.
Je veux retourner et ne rien faire d'autre dans cette méthode d'ajout d'élément ici parce qu'il n'y a plus rien à faire.
Si nous n'avons pas de nouvel élément.
Si nous avons un nouvel article, il faut l'ajouter à cette liste, parce que maintenant, bien sûr,
nous avons un nouvel article qui doit être affiché à l'écran et cela peut être réalisé en utilisant
la liste des articles d'épicerie et en appelant ADD.
Cela nous permet d'ajouter le nouvel élément à la liste.
Maintenant, cela devrait être enveloppé dans Setstate ici parce que bien sûr nous voulons exécuter la méthode
de construction à nouveau parce que maintenant je veux utiliser les articles d'épicerie ici dans mon interface utilisateur au lieu
d'utiliser les articles d'épicerie du fichier dart dummy items dot ici je veux utiliser ma variable ou propriété underscore grocery items que nous
venons de créer et à laquelle nous ajoutons un nouvel article éventuellement, et je veux l'utiliser pour dériver
la longueur, mais aussi bien sûr pour accéder à l'article individuel par l'index.
Dans tous ces endroits, il s'agit donc d'articles d'épicerie.
Nous pouvons donc également nous débarrasser de cette importation d'éléments fictifs, car nous ne l'utiliserons
plus.
Nous pourrions également supprimer le fichier entier si nous le souhaitions.
Nous utilisons maintenant notre liste gérée localement et un nouvel élément devrait être ajouté si nous avons soumis le formulaire
avec succès.
Par conséquent, si je recharge ce fichier, nous pourrons essayer.
Nous ne voyons rien sur l'écran au départ et nous pouvons aller sur cet écran et, par exemple, ajouter du lait,
un lait comme ceci.
Et en effet, nous pouvons le voir ici.
Et bien sûr, je peux aussi ajouter un autre élément ici.
Comme ceci.
Bien sûr, j'ai fait une faute de frappe, mais tout fonctionne comme il se doit.
Nous utilisons donc ce widget de formulaire et toutes les fonctionnalités liées au formulaire pour ajouter de nouveaux éléments
à notre liste.
Je veux juste m'assurer que si nous n'avons pas encore d'éléments, nous affichons un texte
de repli centré au milieu de l'écran.
Par exemple, un texte dans lequel nous disons que vous n'avez pas encore d'articles ou quelque chose comme ça ici.
Et je veux m'assurer que, bien sûr, une fois que nous avons des éléments, nous pouvons aussi nous en débarrasser,
de sorte que nous pouvons les balayer et les supprimer. Prenez ceci comme un défi et un exercice pour vous et essayez d'ajouter
ces fonctionnalités par vous-même avant que nous les ajoutions ensemble dans la prochaine conférence.