Développement d'applications de maîtres flutter pour les débutants absolus

1. Introduction du cours: Si vous débutez dans le développement d' applications et cherchez un emploi pour gagner une somme d'argent décente, vous ne regretterez pas d' avoir suivi ce cours. Comme tout le monde sait que la Floride est une technologie tendance et a changé la façon dont nous créons des applications. Il s'agit d'un outil multiplateforme pour créer des applications pour Android iOS Web Deck stop avec une seule base de code. Dans ce cours, nous apprendrons tout à partir de zéro. C'est pour les débutants absolus. Nous comprendrons les widgets, comment gérer les concepts de navigation d'état, gérer les entrées utilisateur et intégrer l'API Rest. Tous ces concepts suffisent à vous donner confiance en tant que développeur. Alors, avez-vous saigné pour le travail de vos rêves ? Donc, sans gaspiller plus que l'objectif commence. 2. Créer une nouvelle structure de fichiers de projet et de compréhension: Le moment est venu de créer notre tout premier projet en Floride. Maintenant, pour nous assurer que flutter est correctement installé, nous pouvons simplement utiliser une commande comme la version flutter. Ouvrez d'abord votre invite de commandes , puis sélectionnez simplement cette commande et appuyez sur Entrée. Si vous ne voyez aucune version, vous l'avez correctement installée. Et s'il existe également des versions plus récentes, alors vous pouvez également voir qu'une nouvelle version de Floride est disponible. Mais en ce moment, nous allons travailler avec Flutter 2.2 si nécessaire ultérieurement et ambigu, nous allons mettre à niveau mais nous ne savons pas. Les données CRF sont correctement installées dans votre système. Maintenant, créer le Florida Project directement à mes enfants, il y a deux façons. La première consiste à utiliser Android Studio. Si vous utilisez le lot Android Studio, vous pouvez simplement ajouter Android Studio et installer extensions requises, car il y aura un outil d'extension dans Android Studio comme bien. Il vous suffit de télécharger ou d'installer les outils de données. Mais je ne préfère pas l'étude enrichie parce que tout d'abord , c'est très, elle utilise beaucoup de vos sources PCD. Cela ralentit, je suppose que parce que je suis un mode d'utilisateur de VS Code ou que je meurs texturalement, je préfère nous coder. Donc, c'est Wave. Nous allons utiliser le code VS. Assurez-vous de l' installer dans votre système. C'est très facile. Tu peux juste y aller. Maintenant, pour commencer par créer un projet, allez dans le dossier où vous voulez votre premier projet. Ensuite, il suffit d' y ajouter une invite commune et d'écrire simplement, Flutter, créer. C'est le code. Vous pouvez également dire, attendez de créer un nouveau projet. Et après la création, quel que soit le nom que vous donnez sera un nom de projet qui correspond au nom de votre application. Vous pouvez dire évidemment que vous pouvez le modifier plus tard. Ce n'est pas un problème. Nous ne ferons qu' un tutoriel de flottement. Tutoriel, ok, cliquez sur Entrée. Il vous suffit donc de télécharger et de créer votre projet évasé. Si vous voyez que tout est fait, c'est tout. Vous l'avez fait correctement. Dans, projet Inside Definitivement. Vous verrez peut-être beaucoup de fichiers dont nous ne parlerons que maintenant. Mais avant cela, nous ajoutons simplement du code VS de la cour, allons au fichier et ajoutons simplement. Et ici, il vous suffit d'ajouter votre projet comme celui-ci. Vous voyez donc des dossiers et des fichiers présents. Vous avez réussi à utiliser VS Code. Maintenant. Maintenant, ce que nous allons faire, nous en verrons plus sur la structure de ces deux dossiers. Il existe différents dossiers. C'est Android, iOS live, test de spec dot YAML que web, lord of thing dossiers et fichiers. Nous devons simplement nous rappeler que le dossier Android est endroit où sont stockés les fichiers supprimés Android. Nous ne changeons pas beaucoup cela. Nous l'utiliserons simplement pour certaines choses comme quelle sera l' icône de votre application, appareil Android, quel sera le nom de l'application ? Très peu de choses spécifiques à Android sont des plugins, mais pas tout le cours. La même chose avec le dossier iOS plié iOS est tous les fichiers qui seront utilisés pour construire une application iOS. Mais nous allons simplement faire ces changements, petits changements qui avaient acquis le nœud, pas le code de couleur sombre. Maintenant que cette feuille tombe, c'est l'essentiel, c' est le dossier que nous allons l'utiliser encore et encore. C'est là que nous travaillerons la plupart du temps. Par défaut, il contient Main.Jack. C'est le point d'entrée de l'application photo, comme je l'ai déjà vu dans cette section de données. Et ce point principal, point ou fonction principale est le point d'entrée. Si vous allez cliquer dessus. Cette fonction principale ici, sauvegarder. Et il y aura certainement d'autres citations aussi. Et vous pourriez être submergé à l'heure actuelle. Alors, ne regardez pas ce code. Rappelez-vous simplement cette fonction principale. Après ça. Il y a test, testez-le là où vous placez le code de test unitaire pour l'application. Lorsque vous êtes prêt, lorsque votre application est prête pour la production, vous devez la tester beaucoup de temps. Le test est un sujet complètement différent que nous ne couvrirons pas car avant de passer le test, vous devez disposer d'une application de flutter structurée très propre. Et puis le fichier suivant et très important est le fichier YAML Pub spec dot. Ce fichier définit la version et le numéro de version de votre application. Si vous le voyez, nous verrons simplement cette version et elle sera utilisée lorsque vous publiez votre application dans n'importe quel endroit, torr ou iOS Store. Les premières utilisations sont ceci, puis ces dépendances. Et vous vous demandez peut-être ce que sont les dépendances ? Nous le verrons et le comprendrons également dans la prochaine vidéo. Parce que les dépendances signifient que votre application dépendra certainement de logiciels ou de bibliothèques ou de plugins tiers. C'est également très important. Il devrait y avoir une vidéo distincte à discuter. Mais rappelez-vous que j'ai ignoré d'autres dossiers et fichiers car la plupart du temps, nous n'avons pas vraiment besoin de les toucher. Nous n'avons qu'à travailler sur leap, Pub spec dot YAML et un peu sur le dossier Android et iOS. Vous avez donc maintenant votre application de flottement. Il est temps de l'exécuter sur un appareil. Pour l'appareil, il suffit d'ajouter Android Studio car vous devriez avoir un émulateur. Si vous n'avez pas l'émulateur, vous pouvez également utiliser votre appareil Android physique. Il vous suffit de vous assurer que le mode de débogage est activé dans les paramètres de votre appareil Android. Ici. Oui, cliquez sur, configurez-le. Ici, j'ai un appareil. Vous pouvez également créer votre appareil virtuel. C'est très facile, mais j'ai cette grosse cellule trois APH serait 8. Je vais juste le faire fonctionner. Cela peut prendre un peu de temps. Voyez, votre émulateur est là, c'est dire appareil Android. Maintenant, ce que vous devez faire, c'est d'être votre code VS aller au point principal. Et dans leur exécution, il suffit de cliquer sur Démarrer le débogage. Et maintenant, vous devez attendre un moment, car pour la toute première fois, cela prendra du temps, mais vous pouvez rester. Il lance notre principal point sur ce qui émule le mode de débogage. C'est donc bien. Cela fonctionne. Je veux juste dire que l'inondation est un outil très génial. C'est comme si c'était très facile à comprendre et à travailler. De plus, vous avez compris que les concepts de base dans n'importe quel langage de programmation sont les mêmes que dans le langage sombre. N'oubliez pas que lorsque vous utilisez Android Studio, votre système peut être en retard. Est-ce qu'il peut se bloquer parce que son utilisation dans votre RAM. Vous pouvez donc ne pas utiliser ou faire autre chose pendant que vous travaillez sur un émulateur Android, car cela fait en lui-même que votre système fonctionne très dur. Et vous ne voulez pas planter car vous mettez à jour le système pas pu le gérer. Oui. Il montre les sorties de build flutter, APK, point de débogage d'application APK. J'espère donc que vous savez que cette extension APKs souvent application Android. Maintenant, d'accord. voyez, vous aurez cette largeur d'écran comme la page d'accueil de démo flotter. Et dans leur oreille moyenne, vous avez appuyé autant de fois sur le bouton et un bouton est là. Si je clique dessus, voir 1, 2, 3, 4, 5, il augmente. Nous avons donc enfin notre application flotter dans notre émulateur. Dans la prochaine vidéo, nous parlerons davantage concepts tels que les widgets et autres choses. Pour l'instant. J'espère que vous avez apprécié. 3. Quels sont les widgets: Aujourd'hui, nous parlerons de widgets. Quand nous travaillons en flirt. Vous rencontrerez ce mot beaucoup de temps parce que j'ai écrit avec effort la demande est un budget. D'un simple texte, deux boutons aux mises en page d'écran. Je vais juste vous montrer l'exemple. Si vous venez, si vous avez de l'expérience dans le développement Web, vous comprendrez qu'il existe une barre de navigation, champ de texte, une div, des tables dans Bootstrap ou en HTML. En flottement. Toutes ces choses que autres éléments de l'interface utilisateur sont appelés widgets. C'est ça. Ce n'est donc pas un concept très difficile. Je ne dis pas que les widgets le sont, moins que vous écriviez sur leader, mais pour la compréhension de base, vous devez vous rappeler que si vous voyez quelque chose sur cet écran, ce sera un widget. C'est ça. Maintenant, chaque widget aura des propriétés, ou vous pouvez dire des arguments que nous devons passer. Donc, si vous vous souvenez du concept d'arguments nommés du programme sombre précédent, doutez de tutoriels, nous l' avons déjà fait. la même façon. Je l'aurais fait. Widget est également une fonction que vous pouvez enregistrer car à l'arrière du code de base de flutter, il est mentionné comme argument nommé. Je vais juste vous donner un exemple. Ici. Certainement, ce code que vous ne devriez pas toucher. Vous verrez simplement de quoi je parle. Ce centre est un widget. Donc, sa propriété est acceptée est de 11. La propriété est appelée enfant. Imaginez simplement. Oui, je suis juste train de l'écrire ici. Nous avons un centre d'appels fonctionnels. Et ici, il pourrait accepter quelque chose comme argument nommé. Supposons un nom de chaîne. Ici, c'est la même chose, mais c'est une propriété rigide appelée enfant. C'est pourquoi nous appelons cette propriété enfant de réindexation du widget centré. Nous envoyons à nouveau un widget différent, cette colonne. Dans les prochaines vidéos, nous plongerons en profondeur dans tous les textes de colonne du centre budgétaire stable, quels qu'ils soient, les widgets que nous comprendrons chacun et tout. Mais pour l'instant, je veux simplement donner un aperçu de base. Au moins, vous devez savoir quelle est la signification du widget mot. Maintenant, vous pouvez rayonner, entendre cela, et cette propriété sera la plupart du temps accepté comme valeur, comme je vous l'ai dit, comme je vous l'ai montré que dans cette propriété enfant, Il accepte une colonne qui est encore Abhijit. Et la dernière chose, c'est que chaque widget commence par son nom suivi d'une parenthèse. Encore une fois, je vais ratter et supposer qu' il s'agit d'un texte rigide puis d'une parenthèse. Et en soi, vous avez d'autres propriétés. Supposons que l'enfant comme ça et ceci, encore une fois excepté, la valorise, mais dans un texte, ce n'est pas un enfant, je suppose que c'est différent, mais je vous donne juste un exemple de base. Maintenant. Voyez cette image. C'est une façon, s'agit d'une application construite à l'aide de flutter. Donc ici, si vous pouvez voir ce bouton de Verde, voici cette image ou cette flèche, tout cela, nos budgets. Ce texte est encore une fois un widget. Cette barre de navigation est à nouveau en moyenne. Un exemple. C'est une application de livraison de nourriture très basique, mais elle est tellement belle car elle est construite avec Flutter. Par conséquent, ces catégories sont également un widget appelé ligne car il est horizontal de gauche à droite. Ensuite, à l'intérieur de cette chose circulaire ou autre, ou l'icône de recherche se trouve également un widget. Il en est de même pour cet exemple. Cette barre de recherche est encore une fois un widget. Ce bouton de navigation est à nouveau un widget. Cette image est encore une fois un widget. Qu'est-ce que le widget est l'image. C'est ça. Vous le verrez dans la vidéo suivante. Je veux juste vous montrer que, peu importe ce que vous voyez à l'écran, ils sont tous différents, différents widgets. C'est ça. Nous ne le faisons pas si vous êtes débordé, alors ça va aussi parce que c'est très bien. Vous n'avez pas fait notre travail, fait quoi que ce soit comme ça, mais c'est très simple. Ok, jusqu'à présent, c'est suffisant pour ce sujet de widgets. Merci. 4. Travailler avec un fichier d'actifs et Pubspec: Au cours de la session d'aujourd'hui, nous aborderons un thème très élémentaire des actifs. Vous vous demandez peut-être ce que sont les actifs ? Imaginez simplement que vous avez une application, et certainement dans cette application, vous aurez des images, des images différentes. Vous êtes le logo d'une entreprise, des fichiers de polices différents, des animations, peu importe ce que vous voyez, vous avez des fichiers différents pour votre application. À ce moment-là. Vous devez vous assurer de l'avoir fait. Vous avez dit que pour votre projet flutter, ce sont les atouts que je souhaite inclure dans ma demande. C'est ça. Jusqu'à présent, ce que vous devez faire est d'aller dans le dossier de votre projet de filtre. Vous verrez différents dossiers ici. Il suffit de créer un nouveau dossier de ressources. Ou que voulez-vous dire par « donner » ? Je donne généralement des ressources informatiques parce que c'est pratique pour moi. Ensuite, dans les actifs, quels actifs vous voulez si vous avez juste si vous le souhaitez, vous pouvez également déposer tous vos fichiers ici, par voie électorale. Mais je préfère ça. Encore une fois, la création d'un dossier d'images est si vous le souhaitez. Désolé. Si vous voulez. Si vous le souhaitez, vous pouvez également avoir différents dossiers, tels que les fonds sont peu importe. Ainsi, vous avez correctement votre ancienne structure de dossiers. Maintenant, dans les images, il suffit d'aller copier n'importe quelle image de votre choix et de la coller simplement. Je l'ai si nous voulions voir l'image. Maintenant, ce que vous devez faire c'est que vous avez correctement votre dossier ici. Mais maintenant, c'est l'heure. Nous mettons en œuvre notre projet de Floride, c'est le dossier Assets. Pour ça. Vous devez accéder à ce fichier KML. Maintenant, rappelez-vous simplement que ce fichier YAML de point de spécification Pub est très sensible, très bien, car si vous avez un onglet supplémentaire ou un espace supplémentaire ou autre, toute votre application se bloquera. Alors rappelez-vous et soyez très prudent. Ne touchez à rien. Rappelez-vous juste ici. Pourtant, vous pouvez voir ces atouts qui se trouve dans le commentaire. Il suffit donc d'aller à un et avant un et d'empiler deux fois l'espacement arrière. C'est ça. Et là encore, retour arrière deux fois. Pas plus que cela, car si vous voyez un genou, oubliez pas de défaire et d'essayer à nouveau. Maintenant, ces actifs, le code n' est fait que pour mentionner les noms de dossiers. Ici. Je vais juste l' écrire dès le début. C'est comme des ressources, puis des images, puis une jambe, c'est tout. Cela signifie simplement ce dossier de ressources. Dans ce dossier, un dossier d' images vient d'être téléchargé. Je vais arrêter ma session de débogage en Floride. Depuis que vous avez fait un changement, les charnières de l'entraîneur. Et tout simplement, si vous voulez inclure des polices ici, c'est la police où il vous suffit de l'annuler, de la décommenter suffit de l'annuler, de la décommenter et de mentionner l'emplacement de votre fichier de polices. le moment, nous ne traitons pas de polices car ce n'est pas la chose la plus importante dans votre application pour les débutants. En savoir plus sur ce fichier de spécifications Pub. N'oubliez pas que la première chose importante est cette version. Et pour l'instant, nous ne l'utiliserons pas. Vous ne l'utiliserez que lorsque vous publiez votre application sur n'importe quel Android ou App Store, Apple App Store. Le deuxième est le dossier de ces dépendances. Maintenant, vous me demandez peut-être quelle est cette dépendance ? Si vous avez un paquet externe, notre plugin pour implémenter en année l'application flood, nous utilisons ce truc de dépendances. Et quand je vous parle d'un paquet externe, pour cela, vous avez un site Web appelé Pub Deaf. Vous pouvez simplement voir est un gestionnaire de paquets pour l'application Flutter. Ici, vous obtiendrez beaucoup de paquets et tout. Voir la partie analyseur, sélecteur de numéros de connexion Google et j'y participe. Cela vous aidera donc à construire l'application très rapidement, et vous devez certainement l'utiliser. Je vais donc aller chercher. Supposons HTTP. Vous disposez ensuite de cette bibliothèque STDP. Il suffit d'y aller. Et leurs dépendances, il suffit de le copier comme ça et de le coller ci-dessous, comme ceci et de l'enregistrer. Mais pour l'instant, nous ne le faisons pas parce que cela dépend. Ensuite, la sous-unité que nous utilisons à l'heure actuelle, voulez au moins vous montrer ce que sont ces actifs et le fichier YAML Pub spec dot. Et quelles sont les dépendances externes vous utiliserez abondamment plus tard lorsque nous construirons une application de données intermédiaires ? J'espère que vous avez compris les concepts. Merci. 5. Widget de texte et ÉCHELON: Il est donc temps, dans cette session, d' aborder directement le concept des flottements. C'est-à-dire que nous devons avoir les mains sales en écrivant du code nous-mêmes. Sortez votre code VS et accédez simplement à Main.Jack. Maintenant, ce que vous devez faire c'est simplement aller supprimer tout ce code à l'exception de la fonction principale. Tout comme ça, nous supprimons tout le code. Et dans le fichier main.js, qui est le point d'entrée, vous devez simplement écrire mon application, mon application matérielle, puis titre ma première application. Et puis à la maison. C'est ça. Nous avons donc importé le paquet de matériaux tout en haut car nous les utiliserons Material Design riche, développé par Google, la conception matérielle d' Android. Pour iOS, vous avez un package Cupertino, vous pouvez également utiliser le package Cupertino, mais il ne fonctionne que sur le système Mac. Diriez-vous que vous aurez besoin d'un appareil iOS pour le rendre beau. Mais la plupart du temps, vous utiliserez Material Design et utiliserez simplement quelques iOS. Les boutons sont également des éléments si vous le souhaitez à l'avenir. Et vous pouvez également voir que nous mettons en œuvre des dettes Material Design. Pourquoi nous utilisons l'application de métadonnées ici. Et l'application matérielle est vierge. Comme je l'ai dit, c'est le nom, puis les parenthèses, qui acceptent deux propriétés. C'est le titre le plus rapide et le second est entier. Titre est le nom de votre application qui apparaît dans ce texte, mais il s'agit du lieu. Sortez de votre application lorsque votre application est en arrière-plan. Mais cette maison est la disposition principale qui sera visible par l'utilisateur. KV a donc notre première application Flutter. Vous avez compris jusqu'à présent que la fonction principale est le point d'entrée. Après cela, vous me demandez peut-être quelle est cette application run-up ? Est-ce la faute ? Ce que vous direz c'est la vue par défaut du flottement de l'exécution de notre application. Il suffit donc de s'en souvenir parce qu' il est prédéfini. Prédéfinis, nous ne pouvons pas le faire ou nous ne pouvons pas le modifier. Mais nous pouvons en savoir plus sur les widgets, qui est le concept central. Donc, tout d'abord, nous parlerons de ce widget de texte. Dans n'importe quelle application. Certainement, vous devez mettre quelque chose à lire pour que l'utilisateur puisse lire. Je pense que c'est son nom d'utilisateur ou quelles sont des données de base simples. Pour cela également, vous devez d'abord savoir quel widget utiliser pour imprimer à l'écran. Auparavant, nous avions l'habitude d'écrire l'impression dans ce code sombre. Parce qu'à ce moment-là, nous imprimions simplement dans cette console de débogage, ce qui n'était rien. C'était juste plus loin que la commodité des développeurs. Mais maintenant, nous allons écrire quelque chose qui sera montré à l'utilisateur qui est une application. Le texte est donc ce widget en tant que nom de toluène , puis entre parenthèses. Et là, c'est à part la première chose comme une chaîne, qui est un argument positionnel. Vous devez vous souvenir de ces concepts sombres par cœur pour vous assurer de ne pas être confus. Demandez ce que c'est, pourquoi ce paramètre est envoyé comme ceci et non en tant qu'argument nommé ? Je reviendrai également à l'argument du nom. Mais maintenant, il vous suffit de sauvegarder, puis d'afficher votre émulateur et d'exécuter votre application. Et vous pouvez aussi voir que testfile est sien parce que nous avons supprimé les tribunaux. Si vous le souhaitez, vous pourrez simplement supprimer ce test rigide. Pour l'instant. Parce que nous n'en avons pas besoin. Encore une fois, exécutez simplement votre application. Vous, encore une fois, vous devez le faire, ça peut prendre un certain temps. Lors de la dernière session, nous avons également compris comment importer des ressources. C'est pourquoi nous devons pouvoir vendre cette session de débogage cette fois-ci. Si nous effectuons des modifications essentielles dans l'application, nous devons arrêter le débogage, puis le redémarrer afin que cela sache quelles sont les modifications apportées à son impression. Je veux juste que vous vous familiarisez. Habituez-vous à ce concept de widget d' écriture qui est prénom, puis parenthèse, puis à l'intérieur des parenthèses I, puis il s'agira d'un paramètre de nom comme ce titre ou nom sur un paramètre national comme ce champ de texte. Encore une fois, il faudra attendre un peu. Cela prend un peu plus de temps. C'est au moins nos APK de débogage en cours de construction. C'est un processus qui prend beaucoup de temps. Mais pour qu'une bonne chose arrive, il faut attendre. Il suffit d'ignorer ce qu'ils étaient affichés dans la console de débogage. Nous n'avons pas à nous inquiéter à ce sujet. Mais voyez, maintenant la sortie sera ici. Et nous avons une première application Predator très moche. Mais il suffit de voir que nous avons réussi sortir des textes sur l'écran de l'application. Cela signifie que si vous avez publié cette application, si vous avez publié cette application plaît à tous les utilisateurs, chaque fois qu'ils ajouteront cette application, ils verront ce texte de ma première application Flutter. Maintenant, vous pensez peut-être que ça a l'air très moche. Ce texte est collé en haut et que ces blancs pour le rendre beau, nous utiliserons notre prochaine région. C'est un widget d'échafaudage. Qu'est-ce qu'un échafaudage ? Pour changer la couleur de l'application entière ou utiliser boutons de la barre AB, il y a quelque chose comme naviguer, feuille inférieure ou quoi que ce soit. Nous utilisons ce widget d'échafaudage. Il donne une belle apparence à votre application. Il contient tous les éléments nécessaires. Maintenant, nous allons simplement accéder à notre code. Tout simplement à l'intérieur de la maison, vous retirerez et écrirez des échafaudages. Il s'agit également d'un widget qui acceptera et ne saura pas quelles propriétés sont acceptées. Vous pouvez simplement contrôler et espacer et voir ici d'abord que ça alimente mon labo. Ce sont toutes les propriétés qu'il accepte. abord, vous pouvez choisir APA. Cette partie, encore une fois, à l'exception d'un widget d'application. Le côté du widget Bart. Encore une fois, cliquez sur Tapez Control plus space. Voici beaucoup de propriétés dont nous avions besoin par deux. Ensuite, ce titre acceptera le texte, des roches flottées. Et maintenant, vous redémarrez. 21 Je peux simplement contrôler S. Et maintenant, voyez ce changement. voyez, c'est très beau qu'avant. Juste parce que nous avons utilisé un widget d'échafaudage. Que ce soit ici, peu importe ce que vous voyez, c'est cette barre AB ou cette chose blanche à l'intérieur à cause de cette casquette pour widget. Maintenant, cette partie blanche est le corps dans lequel vous allez produire ce que vous voulez montrer à l'utilisateur dans les premières propriétés de l'échafaudage. Ensuite, vous allez juste après ce contrôle de virgule, l'espace et le corps droit. Dans le corps, vous aurez un autre texte qui nous permettra de clarifier l'application. Et encore une fois , Contrôlez S. Vous pensez peut-être que rien n'est montré. Et cette raison est que cette couleur de ce texte et de l'onglet de couleur Arrière-plan est deux. Maintenant, pour changer la couleur de fond, j'irais simplement à l'échafaudage à chaque lumière. Couleur de fond. Vous n'avez pas à comprendre ce que je fais en ce moment. Contexte, je suppose. Voyez si j'ai redémarré l'application. Il montre mon premier dépôt de couche parce qu'il s'agissait d'une couleur vide. Dans les prochaines vidéos, nous comprendrons comment changer de couleurs comme celle-ci. Je l'ai fait maintenant juste pour vous montrer la sortie du corps. Ce truc rouge est donc le corps du talon de votre application. Vous n'avez qu'à vous rappeler jusqu' ici que l'APA et corps sont la propriété du widget d'échafaudage. Apa a le titre comme propriété, qui accepte le widget texte loin maintenant, car titre titre, vous pouvez avoir n'importe quel widget dont nous discuterons un par un. Si nous voulons voir une autre propriété de la barre AB, vous pouvez simplement passer sous le titre et à droite, resserrer au centre. Et puis c'est vrai. Il s'agit d'une propriété qui dit elle-même qu'elle centrera ce titre. Titre de cette barre d'application. Nous irons au centre de votre application. J'espère donc que vous avez aimé apprendre parce que vous êtes capable de créer une application lettrée de base. Au moins, vous avez quelque chose à l'écran en ce moment, ce qui est très cool. Dans la vidéo suivante, nous en apprendrons plus sur widgets pour adultes car, comme je l'ai dit encore et encore, flotter est une question de budget. Merci. 6. Bouton d'action central et flottant: Nous allons donc continuer à explorer d'autres budgets. Comme Flint ne savait pas si vous avez une application très basique, elle ne s'applique pas uniquement à une UA avec du texte. Le prochain widget, dont nous parlerons est la visite du centre est très simple et fait ce que son nom dit. Il se centre vers le bas de n'importe quel rigide. Donc, si nous voulons centrer le texte dans le corps, nous pouvons envelopper ce texte dans une visite centrale. Vous pouvez donc le voir, ma réplication plate se trouve tout en haut à gauche. Si vous le voulez au centre du corps, c'est le centre de l'écran. Il faut juste l'envelopper. Et que voulez-vous dire par rapt ? Si vous y allez, vous pouvez simplement voir ce matériau à l'intérieur, puis c'est un échafaudage. Cette partie de l'application est enveloppée sous un échafaudage. Ce texte est encapsulé dans la barre AB. Maintenant, si je veux l'utiliser, budget du centre de texte, vous pouvez simplement y aller. Une étape consiste à copier ou à couper les soins. Ensuite, le centre de chai est rigide. C'est rigide. Ensuite, nous entrons à l'intérieur, nous avons une propriété pour enfants, et nous avons simplement tordu. Ceci est donc encapsulé par un autre widget centré. Et en passant à la caisse de notre application. Vous voyez, nous avons ce texte au centre de l'écran. Rappelez-vous, je vous ai dit que c'était une première voie et la seconde était que je vais tout simplement annuler. La deuxième façon est simplement Cu, cliquez sur cette ampoule. Pensez-y des correctifs. Et ici, vous pouvez créer un widget et simplement un centre. C'est également une autre façon de faire la même chose. Parce que lorsque nous avons une application plus grande, il est impossible de couper et de coller tout le temps car il y a beaucoup de virgules, ne sont pas des crochets impliqués dans notre application. Maintenant. Alors rappelez-vous, nous ne pouvons pas simplement imprimer directement de la chaîne à l'intérieur de ce centre, comme je vais juste couper et voir que vous pouvez simplement écrire directement une chaîne ici comme ceci. Non, vous devez utiliser la propriété enfant à l'intérieur de cet enfant. Vous l'avez fait, et vous devez utiliser un autre widget, c' est-à-dire un widget de texte. ce moment, nous utilisons, mais comme enfant est un type de widget de type de données, vous pouvez voir ici, si je le survole, cela signifie qu'il acceptera n'importe quelle région. La loi que nous n'avons pas appris sur d'autres widgets. C'est pourquoi j'utilise simplement le widget texte de base. J'espère que vous avez compris le widget central. C'est un widget très basique. Maintenant, le prochain widget dont nous parlerons est le bouton d'action flottant. Je suppose donc que vous connaissez déjà l'application WhatsApp. Dans votre application WhatsApp, en bas à droite, vous verrez une icône sur notre bouton. Il s'agit du bouton d'action flottant. Nous pouvons donc implémenter le bouton d'action flottante par la propriété, du même nom que le bouton d'action flottant pour la visite d'échafaudage. Ce que je veux dire par là. Vous avez votre échafaudage. Nous l'avons fait ici. Première propriété, nous venons de lui donner une couleur d'arrière-plan car nous devons la rendre rouge. Le deuxième établissement était le bar AB. La troisième propriété était le corps. Maintenant, nous avons cette virgule. Si je vais contrôler un C, il y a tellement d'autres propriétés qui sont exemptées. Mais nous allons utiliser le bouton d'action flottant. Ainsi, le bouton d'action flottant accepte le nom du widget. Bouton d'action flottant. Comme ça. Vous pouvez voir qu'il dispose désormais d'un bouton d'action flottant. Et il doit le soutenir, ce qui est obligatoire. D'abord cet enfant, et le second est pressé. Alors, mon enfant, nous n' aurons qu'une simple publicité textuelle. Je vais redémarrer notre sauvegarde de notre application afin que les modifications soient affichées dans l'interface utilisateur. Dans la partie droite, vous pouvez voir ce bouton Ajouter. Il s'agit donc d'un bouton d'action flottant. ce moment, lorsque nous cliquons dessus, il ne pense pas que si vous voulez voir, vous pouvez simplement continuer, pressé et simplement écrire, imprimer, bonjour et sauvegarder. Maintenant, si je fais un clic droit, si je vais cliquer sur notre bouton Ajouter. Dans le débogage, vous pouvez voir qu'il y a ce bonjour impression, impression. Mais l'essentiel est que vous compreniez que c'est la façon d'écrire le code d'une application flottante. Propriétés de l'engrenage, il y a des widgets dans les widgets. Là encore, les propriétés des données. Cette propriété va encore une fois , sauf certains widgets. Et puis ce non compressé est à nouveau la propriété du bouton d'action flottant. faut se rappeler où elle commence, où elle se termine, quelle propriété est rigide. Et si vous avez encore des pays, j'aimerais juste dire qu'elle vous que supposé que c'est une fonction. Nous appelons une fonction de bouton d'action flottant , puis nous envoyons deux arguments nomment ces humains. C'est le premier, sauf enregistrer le widget. Et le second accepte une fonction. C'est encore une fois pour chaque lettre de daft rigide qui est toujours en majuscule. Vous pouvez voir ce f, ce t, son centre, l'échafaudage S. Donc chaque widget a une lettre majuscule phosphore, et chaque propriété accepte un autre widget comme valeur. s'agit donc d'une propriété enfant, elle accepte du texte et toutes ces propriétés ont une statistique avec ces petites lettres a, B, a, une barre, un bouton d'action flottant. Celui-ci, qui est la propriété, ce f est une petite lettre. Et dans la plupart des widgets, cette propriété enfant deviendra. Et ici, vous pouvez voir un enfant, c'est aussi un enfant. La propriété de l'enfant sera donc commune. Plusieurs chiffres à deux chiffres. Si vous êtes encore confus, je vous demanderai simplement faire une pause pendant un certain temps et d'essayer le faire vous-même et de faire quelques erreurs que vous le compreniez correctement. Mais j'espère que cette vidéo a été effacée et vous a donné les informations de deux widgets ou plus. première est la visite au centre, et la seconde est le bouton d'action flottant, dont nous discuterons davantage dans les prochaines vidéos. 7. Changements de couleur et de style: Salut, bon retour. Au cours de cette session, nous allons apprendre à changer couleur et à donner du style à nos éléments. Maintenant, pour changer la couleur de tous les éléments tels que la barre AB v ont certaines propriétés. Comme dans une barre d'application il existe une propriété appelée background-color. Maintenant généralement sympathique, nous avons affaire à d'autres propriétés. Nous avions la valeur d'une chaîne ou d'un entier, ou d'un widget. Mais maintenant, un autre cas est un peu différent. La valeur d'une couleur est conservée à l'aide du clavier. Faisons un point et suivis du nom de la couleur. Maintenant, faisons-le pratiquement. Nous allons maintenant changer la couleur de notre barre d'applications, allons maintenant voir d'autres propriétés ici. Et l'un d'eux est la couleur de fond est juste des couleurs droites, foncées, ambrées. C'est l'une des couleurs. Maintenant, vérifiez notre application. Ce bleu, est-ce que ça change ? Oui, ça a changé. Il est maintenant de couleur jaune. jaunâtre. Vous pouvez vous séparer, mais c'est une nuance différente, définitivement. J'espère donc que vous avez compris qu'il est très facile de donner de l'insouciance. Ces couleurs pointent et si ce widget a une propriété qui est ici, sa couleur d'arrière-plan, dans d'autres limites, il peut y avoir différentes. Maintenant, pour changer la couleur du bouton d'action flottant, encore une fois, nous devons aller vérifier s'il y a une propriété. Maintenant, vous pouvez voir qu'il y a une propriété appelée couleur d' arrière-plan, et nous allons simplement écrire des couleurs. Dot plus tôt. Cette couleur était bleue. Je vais juste le rendre vert. Voyons voir. Est-ce que ça marche ? J'espère, oui. Oui, il a changé. Il est donc évident que lorsque vous créez une application réelle, vous aurez des combinaisons de couleurs différentes pour votre application. Il est donc nécessaire de comprendre cela, quelle couleur utiliser et comment implémenter le code couleur. La prochaine chose, ce que nous avons, ce que nous allons faire, c'est comment styler cet élément de texte. Changez donc la couleur, nos cadeaux, le style en texte. Nous devons donner une propriété de style au widget texte. Encore une fois, vous pouvez lire qu' il y a une propriété appelée style. Passons à l'élément de texte. Ce premier argument est un argument positionnel à 0. Le prochain, voyons ici. Oui, un style orienté texte alignant le texte. Je vais utiliser la propriété style. Maintenant, comme je l'ai mentionné, un texte que nous acceptons également différents arguments. Mais cela rappelez-vous que la première propriété est vecteur positionnel v mentionné le texte réel. Et d'autres propriétés sont des arguments nim, comme l'une d'elles est serrée. Maintenant, la propriété style acceptera un autre widget comme valeur, qui est le widget de queue de texte de style. Donc ici, il suffit d' écrire un style de texte. Et au cours de ce week-end, mentionnez que les propriétés que nous voulons changer. Comme tout d'abord, j' aimerais changer cette couleur. Couleurs, bleu foncé. Voyons voir ici. Est-ce que ça change ? Oui. De plus, je voudrais supprimer ce fond de couleur rouge. Ce n'est pas beau. C'est donc fait. D'accord. Maintenant, la prochaine propriété que nous utiliserons est la taille de la police. Passons maintenant la taille de notre police à 30. Désolé, la taille de police, ça devrait être amusant. Dit, oui, il accepte un entier, on peut dire la valeur W. Voyez donc que la taille de la police a changé. La prochaine propriété que nous utiliserons est leur style de police. Et il y aura un style de police, italique et normal. Alors, quel est cet italique ? J'espère que vous savez qu'il ne fera que lui donner une position inclinée. Ici. Vous voyez ça ? Et ni l'un ni l'autre des décrochage que nous avons utilisés n'a de poids font-weight Police avec sondage à points. Il aura juste un regard plus audacieux. Voir. C'est ainsi que nous appliquons le style à notre élément de texte. Oui, rappelez-vous, il y a aussi leurs propriétés. Ici, vous pouvez simplement vérifier son arrière-plan, son arrière-plan, sa couleur, sa décoration, sa police, famille, sa hauteur, son espacement des lettres, son espacement des mots, ses ombres. Donc, si vous le souhaitez, vous pouvez utiliser tous ces éléments. Mais c'est très américain Pacifique si nous voulons l'utiliser ou non. Mais généralement, dans la plupart des autres obligations, vous utiliserez taille de police colorée et le poids de la police. De plus, si vous voulez vous assurer que le texte est mis en surbrillance, vous pouvez le dire. Donc. J'espère que vous avez compris ce concept de changement de couleur et de style. C'est tout pour cette session, nous en apprendrons plus sur les widgets dans les prochaines vidéos. 8. Quels sont les widget Stateless: Bonjour, Cette session est très importante car nous allons discuter de ce qui est une région apatride. Jusqu'à présent, nous écrivions du code uniquement dans notre fonction principale. Mais ce n'est pas le cas lorsque nous croyons à l'obligation, osez, nous devons absolument séparer notre code en morceaux plus petits et les utiliser partout où cela est nécessaire. Nous pouvons créer notre propre widget, qui continuera sur les autres widgets qu'il contient. Quels types de widgets de construction personnalisés sont des régions sans état et avec état ? instant, il suffit de se concentrer sur un état moins rigide. Nous allons certainement s'inquiéter l'autre région dans les vidéos ultérieures. Vous pouvez donc voir ici que nous pouvons créer une région apatride en étendant notre classe à une région apatride et en appliquant un minimum de bière comme celui-ci. Il s'agit donc d'un code très basique d'un widget apatride. Allons dans le fichier moyen, nous allons avoir un nouveau fichier appelé point d'accueil. Maintenant, vous pouvez tout simplement d' abord importer un paquet matériel. Ensuite, vous pouvez avoir un écran d'accueil de classe, qui étend la région apatride C. D'accord ? est donc fini ici. Il suffit maintenant d'aller cliquer sur cette ampoule. Vous pouvez voir qu'il manque 11 remplacements. Si vous cliquez dessus, il vous donnera cette chose. Donc, ici, il suffit de retourner quelque chose. Je vais juste rendre cet échafaudage ici. Voyez donc notre premier écran, c' est-à-dire que l'écran d'accueil est écrit, qui est une région apatride. Vous me demandez peut-être, d'accord, mais que signifie exactement le widget d'état ? Souvenez-vous simplement que les données d'un widget sans état ne peuvent pas être modifiées après le rendu. Supposons que nous voulions qu'après avoir cliqué sur le bouton, la couleur du texte soit modifiée. Cela n'est pas possible en lecture apatride car cette couleur, c'est-à-dire le vert, est rendue. C'est à ce moment que nous ajoutons notre application, elle est rendue. Donc, dans un apatride vraiment, il n'est pas possible de changer la couleur. Plus tard. C'est comme si nous n'avions pas cliqué sur User faire Harvard ou quoi que ce soit. Si l'utilisateur interagit avec lui, alors pour ce genre de choses, vous devez avoir un widget avec état. Mais vous comprendrez lentement la différence entre les deux. Maintenant, ici, n'importe quel nom, c'est un widget apatride. Il y a un nom du widget, et il doit éviter la fonction appelée buildup, qui renvoie un widget en tant que type de retour. Et ce widget signifie que cela peut être un échafaudage, cela peut être un conteneur, ce peut être un bouton, cela peut être une icône. Ce n'est donc pas comme si le widget apatride était toujours un écran complet. Il peut également être défini, mais il s'agit également d'un morceau de codes séparés. Il n'est pas nécessaire de prendre autant de stress à l'heure actuelle. Il suffit de suivre le flux. Voyons maintenant. Implémente, mettons en œuvre le widget date moins. Maintenant, ce concept, donc ce que vous devez faire est simplement d'aller là-dedans et de couper cet échafaudage et de le coller ici. Maintenant, dans ces foyers, pouvez-vous juste avoir à écrire l'écran des maisons ? Et dans ce haut, vous devez importer cet écran comme ceci. Maintenant, si je redémarre, vous verrez que rien n' a changé. Mais nous avons notre écran d'accueil sur un fichier séparé qui existait moins rigide. Et ce que j'entends par apatride, j'aimerais l' expliquer encore une fois. C'est que cette couleur du texte bleu ne sera pas modifiée si j' essayais de cliquer dessus sur cette annonce. Donc simplement, c'est la signification d'un widget apatride. Maintenant, si je veux changer cette couleur de cet ambre pour laisser redire quoi ? Vert, disons bleu. Voyez-vous, vous savez, et si vous voyez maintenant Control S Hot Reload fonctionne parfaitement. Et ce n'est pas parce que nous avons tout écrit dans le numéro 5 principal. Pas comme ça rigide. Mais maintenant, lorsque nous appuyons sur Control S, cette fonction de facturation est de nouveau rendue. Il est appelé et est rendu à nouveau. Mon premier projet de lettre tous les jours et je viens de toucher Control S. See, ça fonctionne parfaitement. Alors maintenant, c'est pourquoi Hood Hot Reload fonctionnera. Maintenant, je couche, vous pensez peut-être pourquoi cela ne fonctionne pas simplement parce que nous ne nous sommes pas séparés dans un widget apatride et avec état. Parce qu'à ce moment-là, Lee qui fonctionnera sera rappelé et les changements seront effectués. J'espère donc que vous avez compris le concept de widget apatride et apatride. Et nous sommes en mesure de séparer votre code d'un fichier en plusieurs découvertes. Plus à ce sujet, nous apprendrons certainement quand nous construirons certains projets de base. Mais à l'heure actuelle, ces connaissances suffisent. 9. Asset et image du réseau: Aujourd'hui, nous allons apprendre comment afficher une image dans notre application. Jusqu'à présent, nous n'affichions que du texte, mais la vraie application contentera certainement des images. Il existe donc maintenant deux types d'images. Principalement. L'une est une image réseau et l' autre est une image définie. Maintenant, l'image réseau, lorsque nous la péchons pour l'image, cela signifie que l'image viendra d'Internet. d'autres termes, nous n' hébergeons pas cette image ou nous ne stockons pas cette image dans notre code de flottement. Donc, nous devons avoir dans l'URL de l'image pour la montrer. Tout d'abord, faites sortir votre navigateur et écrivez simplement n'importe quelle image de Google, vous le voulez comme logo flottant. Ensuite, j'ai tellement d'images, j'ai tellement d'images, je vais juste choisir cette image et écrire l'adresse de copie de l'image. Maintenant, vous pouvez voir cette syntaxe d'image réseau est image.network. Ensuite, nous devons coller l'URL à l'intérieur. Allons-y. Maintenant au centre, je vais supprimer ce texte et image.net et simplement le coller ici comme ça. Voyons voir. Sommes-nous en mesure de montrer l'image ou elle s'affiche, oui, voyez-vous, c'est la première fois que nous utilisons une image réelle dans notre application. Et c'était tellement facile. heure actuelle, nous supprimons les textes en couches rigides car nous ne pouvons pas passer deux widgets directement à l'intérieur de l'enfant. Ce problème sera définitivement résolu dans les vidéos ultérieures où nous discuterons du widget que nous pouvons utiliser pour afficher plusieurs widgets dans notre application. Maintenant, il y a aussi certaines propriétés, comme ici vous pouvez voir la hauteur. Donc la hauteur, on peut donner, si je réduit immédiatement la hauteur, très peu, très petite. Si je le change. Voyez comme ça. C'est ainsi que nous travaillons avec les images réseau. L'autre chose est maintenant une image de ressource pour insérer une image déjà présente dans votre système. Donc généralement, ce que nous faisons est de vous faire tomber images dans le répertoire racine comme celui-ci ici, nous avons créé des ressources et dit que nous avons créé un répertoire d'images auparavant parce que c'est structure de dossier très propre à créer. Maintenant, nous collons un fichier à l'intérieur mort comme ça. J'ai ce fichier PNG à 6 points de l'image. L'étape suivante consiste à donner à CO2 Pub spec dot HTML et décommenter la section des actifs que nous n'avons pas déjà aimé cela. Consultez la section sur ces ressources. Nous n'avons pas fait de commentaires. Il s'assure de l' indentation ou sinon il sera ajouté, ce qui signifie. Et ce dossier est très sensible. Vous devez donc vous assurer ne pas donner d' espaces ou d'onglets supplémentaires. Il fallait juste écrire comme ces acides. Maintenant, il saura qu'à l'intérieur de nos ressources, il y a des images. Nous serons des dossiers plus anciens. Vous pouvez également écrire l'emplacement de votre répertoire d'images avec ou sans le nom de l'image. d'autres termes, si nous ne mentons le nom de l'image comme celui-ci , alors je dirai que c'est correct car Vince télécharge toutes les images qu'il contient. Maintenant, en choisissant comment insérer une image de ressource plus tôt pour une image réseau, nous avons simplement surpris ce réseau. Maintenant, nous allons faire un jeu de points d'image, une image, un ensemble de points comme ceci. Ensuite, nous dirons simplement des décors, puis des images. Quel est le nom du fichier ? Émettre un PNG à 6 points. PNG à 6 points. Et maintenant, voyons, est-ce que ça marche ? Voyez, nous avons téléchargé notre fichier de ressources , c' est-à-dire notre application phare, saurait de quel fichier nous parlons. Et cela ne vient pas d'Internet. Maintenant, nous pouvons modifier certaines propriétés comme hauteur du lac, nous pouvons donner une valeur de 100 °C comme celle-ci. Nous pouvons aussi changer. Il s'agit des autres propriétés que vous pouvez modifier. Mais pour l'instant, nous n'en avons pas envie. Habituellement, la hauteur est correcte. Nous supposons 150 ans. Eh bien, ça a l'air bien. Il est donc très important de comprendre cette différence entre l' actif, l'image réseau, car dans votre application réelle, vous jouerez avec des images tout ce temps. Toutes les applications ont une sorte d'image. Soit c'est une image acide comme le logo de l'application, le logo. Il ne changera pas facilement. Nous pouvons donc simplement les envoyer dans notre code. Et la disponibilité, quelque chose comme l'image de profil d'un utilisateur. Il proviendra de la base de données car l'utilisateur va la modifier, ce qui le rend fréquemment. C'est ça la différence. C'est tout pour aujourd'hui. Dans les prochaines vidéos, nous parlerons d' autres widgets qui poursuivent notre session comme celle-ci. Merci. 10. Widget d'icône et de bouton: Il est maintenant temps d'en apprendre davantage sur d'autres budgets, tels que la visite Icone. La Floride est dotée de tonnes d'icônes qui peuvent être utilisées pour rendre notre application plus belle. Si vous voyez une application, que ce soit via Facebook, Instagram WhatsApp, vous verrez certainement une sorte d' icônes parce que c'est le cas, c'est très agréable à l'œil. Les utilisateurs peuvent directement se rapporter à cette icône. Maintenant, la syntaxe est très simple. Nous devons d'abord écrire une icône. Et à l'intérieur de cela, v ne peut pas simplement écrire directement le nom de l'icône. Nous devons écrire comme des icônes pointant n'importe quel nom d'icône. Supposons que je puisse démarrer l'utilisateur, que je puisse démarrer l'alarme, peu importe. Essayons ça. Je vais supprimer cet enfant de l'image. Maintenant. Je vais juste dire icône et ensuite je peux démarrer une alarme excédentaire. Maintenant, je vais simplement l' enregistrer et voir notre icône s'affiche à l'écran et c'est tellement facile. Maintenant, comme n'importe quel autre widget V utilisé, nous pouvons certainement changer sa couleur et quelques propriétés également. Maintenant, pour changer la couleur, nous allons simplement dire virgule, puis voir la couleur, roue, les couleurs, l'orange. Et ensuite, la taille. Je vais écrire à une centaine. Maintenant, vous voyez que la taille est tellement plus grande que j'ai donnée à un bord juste pour vous montrer que nous pouvons modifier ses propriétés de l'icône. Et le fait est que ce n'est pas que nous ne pouvons utiliser l' icône que dans ce corps. Maintenant, si je veux dans le bouton d'action flottant, je peux simplement écrire une icône puis des icônes, ce message là-dedans. Bouton d'action flottant. Voir. Vous pouvez donc maintenant le comparer avec WhatsApp. WhatsApp a également ce genre de choses que je peux me retrouver sur eux. Et ça a l'air très bien. Je dois dire qu'après le bouton d'icône, il y a un autre widget, qui est la région du bouton. Donc, sans bouton, toute application est inutile. Parce que des boutons sont là pour donner un feedback, ils prennent en compte les commentaires de l'utilisateur. Autrement dit, s'il est dit cerclage des codons Ajouter au panier. Et s'il s'agit d'un formulaire quelconque, vous devez le soumettre. S'il y en a un autre, si deux karma, si vous avez une modification dans votre, si vous avez utilisé une application quelconque, vous avez peut-être rencontré beaucoup de boutons. Donc, dans flotté, il y a trois types de bouton, texte, de bouton, de bouton surélevé, et je peux les mettre. Comprenons cela un par un. Alors, quel est ce manuel ? Donc, dans ce bouton de texte, il n'y aura pas d'allégement. Notre effet 3D comme celui-ci, si je retire simplement l'icône ici et j'écris du texte. Mais alors la première propriété est obligatoire, que cet enfant, c'est-à-dire que devrions-nous à l'intérieur de ce bouton, je ferai simplement un clic droit sur moi. Et le second obligatoire concerne les précesses. Que se passe-t-il lorsqu'un utilisateur clique sur ce bouton ? Voyez donc, il s'agit d'un bouton de texte. n'y a pas de couleur d'arrière-plan ni d'allégement, ou c'est simplement du texte simple. C'est pourquoi son nom est le suivant. Maintenant, si vous voulez vraiment changer ou coiffer notre bouton, vous pouvez le faire. Mais je ne pense pas que ce soit vraiment forcément parce que si vous voulez dire qu'il y d'autres mais la densité est élevée, mais un animal. Mais je vais simplement vous montrer comment changer leur style. Si vous voyez la propriété de tuile et qu'elle acceptera, s'il s'agit d'un texte, mais qu'elle acceptera des textes, mais ensuite le style de point depuis et à l'intérieur que vous pouvez simplement écrire primaire, c'est cette couleur de l' arrière-plan et cette orange. Voyez que la couleur a changé. Ensuite, si vous le souhaitez, vous pouvez donner un peu de rembourrage. Inserts de bordure, zones, non ? Il suffit de 10. Pour le rembourrage définitivement, il ne s'affiche pas en ce moment. Nous pouvons ajouter une couleur d' arrière-plan, un fond noir si vous voulez vraiment cette couleur. Parce que d'habitude, que se passe-t-il si vous voulez vraiment ce type de bouton ? Vous allez directement à lever le bouton car il vous donne automatiquement ces fonctionnalités. Mais c'est très bien. Ensuite. Quelque chose d'important ? Je ne pense pas. C'est très important. Non. C'est ainsi que vous affichez un bouton de texte. Et si vous le souhaitez vraiment, vous pouvez le coiffer en utilisant des textes, mais un style à 10 points et ensuite donner des propriétés différentes. Maintenant, rappelez-vous simplement si je retire ce style. Il s'agit d'un bouton de texte de base. Mais que se passe-t-il si j' utilise un bouton surélevé ? Si je suis simplement, la syntaxe est la même. Si je n'écris simplement qu' un bouton limité ici, alors vous voyez que la couleur d'arrière-plan est leur couleur de texte est blanche et une certaine allégement est le spin étant donné qu' un effet 3D est donné. C'est pourquoi nous utilisons un bouton surélevé, car il est très pratique à utiliser. Maintenant, encore une fois, si vous le souhaitez, vous pouvez le coiffer comme ici. Nous avons un style limité mais ensuite point de et primaire sera fait couleur d'arrière-plan. C'est ça, ça veut dire ça. Bouton dans le texte. Je veux dire, c'était la couleur du texte, mais ici c'est la couleur d'arrière-plan. Maintenant, si vous voulez un soulagement, vous pouvez simplement en donner cinq. Vous pouvez voir qu'il y a d'autres effets 3D. Si vous souhaitez modifier le rembourrage, vous pouvez modifier les incrustations d'arêtes. Lorsque T C, c'est le rembourrage est également fait. Maintenant, si vous voulez changer de forme. Vous pouvez également le faire à l'aide d'une bordure rectangulaire arrondie. Et puis point de bordure à rayon de bordure. Dans un point de rayon de bordure. Et vous pouvez utiliser dans des années ce circulaire comme a1 de tous les côtés, circulaire, rayon de point de polaire et en donner dix ici. Voyez-vous, si j'en donne deux en D, vous en remarquerez plus. Cette forme est modifiée par cette émission en raison de l'ADS que nous avons donné. Et ici, le style, vous les avez compris. Et ce sur site simplement ce qui devrait se passer lorsqu'un utilisateur a appuyé sur le bouton lui. J'écris le temps, j'imprime juste. Mais d'habitude, vous faites une sorte d' activité ici, voyez comme ça. Jusqu'à présent, nous avons discuté de textes, mais ensuite d'un bouton surélevé. Le dernier type de bouton est le bouton icône. Donc, ce qu'il fait, c'est une sorte d'icône sur laquelle nous pouvons appuyer et faire quelque chose. Et nous venons de supprimer le code précédent et simplement soulevé je peux. Mais ensuite, sur la presse, il y aura des boutons plus anciens. Et en icône. Je vous ai déjà appris comment afficher n'importe quelle icône. Cette icône est ici, à la caisse. Il s'agit maintenant d'une icône, mais vous pouvez cliquer dessus. Vous pouvez cliquer dessus ici. Maintenant, vous pouvez découvrir, vérifier quelles autres propriétés il accepte, comme les couleurs, l'accent bleu. Alors je peux dire que vous pouvez en donner 100. voyez, c'est tellement beau. Et s'il y a autre chose, couleur des éclaboussures, vous pensez peut-être, quelle est la couleur d'éclaboussure ? Voyons voir. Voir. Si je clique dessus. C'est la couleur d'éclaboussure. Et de même, il y a sur presse que je vais simplement imprimer. Je peux le faire. Mais voir dans le débogage, vous pouvez dire bouton Can. Nous avons donc réussi à couvrir les trois boutons. Il s'agit d'un bouton de texte surélevé , mais d'un bouton d'icône NDA. Et aussi comment utiliser les icônes dans notre application flotter. Dans ce bouton d'icône, rappelez-vous que la propriété enfant n'est pas présente. Ici. Je peux y propriétés qui acceptent une icône. Et dans les boutons Alda qui sont pressés sont obligatoires. Vous devez donc mentionner ce qui devrait se passer si quelqu'un clique dessus parce qu'il s'agit d'un bouton, vous devez savoir ce qui devrait se passer après cela. Donc, c'est tout. J'espère que vous apprécierez le cours et que vous en apprendrez davantage sur différents types de widgets. On se voit dans la vidéo suivante. 11. Widget de conteneur: Dans cette session, nous parlerons du widget conteneur. Qu'est-ce qu'un conteneur ? Un conteneur ne fait que contourner leur budget. Donc, si vous connaissez le concept de div dans le développement Web, cela fonctionne de la même manière que cela. Nous utilisons ce widget pour que nous puissions donner une marge d'alignement avec et beaucoup d'autres propriétés de cet élément sont les deux widgets qui s'y trouvent. Il suffit donc de le considérer comme un wrapper qui sera utilisé pour manipuler les autres widgets. Quelle est donc la syntaxe ? Sa syntaxe est très simple. Comme ça. Container est le nom du budget et les menthes enfants qui devraient se trouver à l'intérieur de ce conteneur. Alors, d'accord, commençons. Je verrais simplement déplacer ce code précédent et avoir un widget de conteneur ici. Chez l'enfant. Je vais d'abord avoir la région des ponts. Ce sera donc comme ça. Et pas ça. C'est comme si flirté était génial. Nous allons le sauver. Voyons ici. Vous pouvez donc voir que le texte est là, mais rien de tel que vous ne remarquerez même pas qu'il a été encapsulé dans un widget de conteneur. Donc, ce que nous devons faire si vous voulez voir ce conteneur, la première propriété que vous pouvez utiliser est cette propriété de couleur. Les couleurs commencent à crainte. Vous savez déjà comment utiliser color non. Voir. Donc maintenant, vous pouvez voir ce que c'est, cette chose rouge est ce conteneur, vous pouvez aussi le dire comme une boîte maintenant. C'est donc le conteneur et il a des propriétés différentes. Première propriété, deux premières, nous utilisons l'enfant et la couleur. Voyons maintenant ce qu'est le rembourrage et la marge. D'accord ? rembourrage et la marge sont donc utilisés pour donner un espacement entre les éléments. Qu'est-ce qu'un rembourrage ? rembourrage est l'espace à l'intérieur, qui signifie que vous pouvez voir ce génial II et la boîte, et c'est ici, un truc rouge. Le truc de la perspicacité se répand. Et le truc rouge finit par être bleu. C'est l'extérieur, l'extérieur, c'est la marge. Voyez-le avec l'exemple et nous lui donnons simplement une propriété de rembourrage, de remplissage et il accepte une valeur en tant qu'encarts d'arête. Ensuite, après, par exemple, si vous cliquez sur dot-dot-dot, vous aurez d'autres options de gauche, droite, gauche, haut, droite, bas sur Lee symétrique. Pour plus de simplicité, j' utiliserai tout ce qui provient du plus ancien site. Je vais lui donner 20. Maintenant, vous voyez, voyez d'après la perspicacité que ceci, ceci et ceci, c'est le rembourrage et il a l' air plus agréable qu'avant. C'est donc le rembourrage. Et ce que je disais, c'est la prochaine propriété qui est la marge et la fusion, c'est cet espacement en dehors de cela, que ce soit ici, voici le haut et la gauche ici. Donc, si je vais à marge et à nouveau marginal , j'accepte les valeurs, encarts d'arête, et pour tout cela, je donnerai 20. Vous saurez donc maintenant cette différence. Voyez de l'extérieur ici vous obtenez cette marge. Vous pouvez également lire ici. La marge est l'espace extérieur et le rembourrage. L'âge est l'espace à l'intérieur. Ces propriétés sont également présentes, telles que la largeur. Si je clique sur Attendre et que je lui donne une valeur de supposer AT, alors voyez cela se réduire. Si je donne un jour. C'est comme ça. Si j'y arrive, ça ira plus loin. Donc, ce sont les conteneurs à l'intérieur si je ne cède aucun moyen. Il faudra tout ce qui se trouve à l'intérieur. Il y a un texte et nous ne le sommes que. Maintenant. Une autre propriété se trouve à l'intérieur du conteneur, à savoir l'alignement. Et il l'a sauf l'alignement de Sibelius. Supposons en haut à gauche, en haut à gauche, en haut à droite Voyez maintenant, je dois donner un taux de 250 et une hauteur de 50, 58 ans. C'est moins après avoir mangé D. L'alignement. En ce moment. Le fait est qu'il n'y a pas d'autre élément, c'est que seul cet élément est ici. C'est pourquoi l'alignement ne fonctionne pas car la hauteur ou la position est ce côté et cette zone seulement. Si je viens de le retirer en C prend tout l'écran. C'est la chose que nous devons d'abord attribuer hauteur et le poids du conteneur de tout ce qu'il enveloppait à l'intérieur. Ensuite, seulement la pellicule. Cet alignement va fonctionner. Dans les prochaines vidéos , nous allons construire une application plus agréable. Ensuite, je vous apprendrai cet alignement et quand utiliser le code d'alignement. Parce qu'en ce moment, vous pensez peut-être : Non, cela ne fonctionne pas. Pourquoi cela ne fonctionne pas ? Il se peut que nous ayons trop de questions. Et cette propriété est la déclaration du widget conteneur, qui excepte la décoration de boîte comme valeur. Maintenant, à l'intérieur de la décoration de la boîte, vous pouvez également donner une forme. Forme de boîte, cercle. Décoration intérieure de la boîte. Voyez quand vous utilisez la décoration de boîte. Le fait est qu' ils ont également une propriété de couleur, de sorte que vous ne pouvez pas donner plusieurs couleurs. Dans ce cas, vous devez mentionner cette propriété de couleur à l'intérieur de la décoration de boîte. Et je vais encore donner du rembourrage pour que le cercle soit un peu plus beau, qu'il soit à l'intérieur. Maintenant, nous n'avons pas fait de décoration de boîte. Il y a une couleur, une bordure, un rayon de bordure, une ombre de boîte. Ces propriétés peuvent donc également être utilisées pour décorer votre conteneur, ce qui est très spécifique à vos besoins. Donc, si vous en avez besoin, vous pouvez simplement l'essayer vous-même. Dans les prochaines vidéos, nous parlerons donc nous parlerons des dernières visites qui restent à discuter. Merci. 12. Widget TextField: Aujourd'hui, nous discuterons de TextField Virgin. Ainsi, les textes permettent à l' utilisateur d'entrer du texte. Soit nous avons embauché très croquettes dans le clavier à l'écran. Il nous permet donc essentiellement de collecter des informations auprès de l'utilisateur. Si vous avez utilisé une application mobile, vous savez que le texte est l' épine dorsale de la demande de dette. Maintenant, quelle est cette syntaxe, c'est une syntaxe très basique du champ de texte TXT. Alors, comme vous le feriez notre parenthèse. Essayons ça dans leur corps. Je vais supprimer le conteneur précédent et lui donner du texte, un champ de texte. Ici. Si je l'enregistre, alors vous direz ceci, cette ligne. Et si je clique dessus, nous avons notre clavier. Je peux écrire ce que je veux. Mais le fait est que ce champ de texte ne ressemble ni ne dit rien à l'utilisateur. L'utilisateur ne saura même pas quoi y écrire. Pour cela, nous devons utiliser d'autres propriétés à l'intérieur, qui sont comme de la décoration. La décoration, et elle accepte la déclaration d'entrée est sa valeur. À l'intérieur de ça. Ici, vous verrez beaucoup d'options. J'utiliserai d'abord des indices ou des textes étiquetés. Maintenant, si vous le survolez, il accepte directement la chaîne, pas un widget. Nous pouvons donc juste dire, nom comme celui-ci. Et vous pouvez voir maintenant qu'il regarde jusqu'à 10, car lorsque nous cliquons dessus, nous savons ce que nous devons y écrire. Maintenant, en dehors des textes étiquetés, il y a beaucoup d'autres comme l'activation du compteur de frontières, activer, si cela échoue devrait être désactivé pour ce moment ou non. Les textes d'indice sont comme un nom complet, s'il vous plaît. Et si j'économise. Maintenant, dans ce texte, allez-vous voir cet indice. C'est-à-dire que nous devons écrire notre nom complet. Donc au moins nous pouvons donner quelques données factices sont un indice à l'utilisateur sur ce qu'il doit écrire. Une autre chose que vous pouvez avoir est une icône de préfixe. Les icônes donnent un peu de visuel. Vous pouvez dire visuellement cela semble bon lorsque nous utilisons un que je peux voir maintenant, ce texte est comparativement meilleur. Avec cette petite icône en direct. Il y a quelque chose de plus comme une bordure, que nous pouvons obtenir une bordure d'entrée de contour. Maintenant. Maintenant, vous ne pouvez pas le voir correctement. Je vais faire quoi ? Je vais juste l'enrouler autour du conteneur que nous venons apprendre et donner une marge d'avance. Encarts. 20. Vous voyez, cette frontière est si belle. Et ça a l'air plus joli. Et si je ne donne aucun point de bordure d'entrée, alors toute la bordure est en C déplacée. Mais j'aime généralement ce contour en poudre. Maintenant, vous pensez peut-être que seules autant de propriétés existent. Il y a donc beaucoup de propriétés dont nous allons certainement discuter correctement. Parce que sans champ de texte, nous ne pourrons créer aucune application. Maxlength nous dit simplement que le nom ne devrait pas contenir de caractères Dan non éclairés. Pas plus que ça. Il peut être utilisé lorsque nous utilisons un mot de passe, n'importe quel numéro de téléphone, il doit contenir un nombre spécifique de chiffres. Pas plus que ça. Et maintenant, pour l'instant, nous allons simplement voir la propriété onchange obtenir beaucoup qui est onsubmit autre, mais on change signifie qu'elle lui donne une fonction qui nous donne une valeur quel que soit son champ de texte renvoyé. Nous allons imprimer cette valeur dans notre console de débogage. Maintenant. Nous avons juste du flottement. Voir. Maintenant, avec cette valeur, si vous le souhaitez, nous pouvons l'affecter à une variable, puis l'utiliser partout où nous le voulons. C'est à nous de décider ce que nous voulons faire. Mais TextField a définitivement une règle importante. en discuterons plus dans le prochain module. Merci. 13. Colonne et ligne: Au cours de cette session, nous parlerons d'un widget très important. Nous parlerons donc de deux widgets. Le premier widget est le budget de la colonne. Donc, si vous l'avez remarqué jusqu'à présent, nous ne faisions que sortir un widget à l'époque. Mais cela ne se produit pas dans une application réelle. Un écran contient plusieurs widgets, tels que des textes imagés, mais un tout. Ainsi, à cette fin, un widget de colonne est utilisé car il permet de générer des widgets dans la direction verticale, c' est-à-dire de haut en bas. C'est pourquoi son nom est colonne. La syntaxe est très simple. Il suffit de sélectionner le nom de la colonne. C'est-à-dire que le nom rigide est colonne. Mais ici, une chose a changé maintenant parce que je vis avec chaque widget que nous utilisions la propriété enfant. Mais ici, ce sont les enfants. Et tout simplement parce que nous allons sortir plusieurs widgets. Et c'est pourquoi il s'agit d'un téléphone au pluriel. Alors oui, sortez votre éditeur de texte. Et je vais juste finir corps. Je vais juste voir déplacer le code précédent et la colonne de nuit. Ici, ce sera des enfants. Enfants. Nous vous insulinons simplement de scanner de haut en bas les éléments que vous souhaitez imprimer. Je vais juste ce premier V élevé, j'apprends. Flutter. Ensuite, le widget suivant, vous pouvez utiliser le bouton surélevé. Chez cet enfant, nous pouvons avoir un texte de soumission. Sauvons et voyons. Voir. Pour la première fois, nous avons pu imprimer deux widgets en même temps, le corps des index. Il s'agit donc de l'utilisation du widget de colonne si vous le souhaitez après l'élimination, mais vous pouvez ensuite utiliser le jeu de points d'image, puis définir les images, l'image six, PNG. Nous l'avons déjà fait, nous avons cette image ici. Voir. Maintenant, nous avons trois éléments sur la peau. Le premier est un widget de texte, second est un élément surélevé, mais ensuite, et le troisième est l'image. Maintenant, vous pouvez voir ici dans la section notes que les enfants sont utilisés. Au lieu d'un enfant. Tous les éléments sont séparés par une virgule parce qu'il simplement dit : C'est une liste de widgets, c'est-à-dire Y. Et chaque widget est l'ordre de ce widget sera le même que vous l'écrivez ici. Cette image n'est pas imprimée de haut en bas. Dead est un autre widget qui vous aide à imprimer un objet de gauche à droite. Donc, rho est aussi la même colonne. Il permet de générer plusieurs widgets, mais une ligne permet de générer des widgets dans la direction horizontale. Et nous allons d'abord changer la taille et le poids. C'est trop gros. Le poids sera de 100. voyez, il regarde l'évier maintenant. La syntaxe est identique. Je vais juste changer cette rangée. Donc, cette colonne à ranger et à enregistrer. Maintenant, cette chose horizontale devient verticale. Il s'agit donc d'un élément très important car lorsque vous construisez une interface utilisateur complète, chaque écran de Getty utilise une ligne ou une colonne. Combinaison des deux. Row a une autre propriété qui est l'axe principal aligne la dette. C'est ainsi les éléments doivent être affichés à l'écran. Donc, si nous écrivons l'espace uniformément, vu de gauche, de gauche partout, tout cet espacement des espaces est égal. Et si j'écris l'espace entre, l'espace entre, alors c est le côté extrême gauche et extrême. L'espacement n'est pas là. Et il y a aussi le centre. Tout va se réunir au centre. Donc, le fait intéressant est que le port de ligne et de colonne a cette sortie principale et croisement existant. La seule différence est que vous devez vous souvenir quand il dit dessiner les accès principaux de gauche à droite. Et l'axe croisé sera de haut en bas. Autrement dit, si je croise l'alignement de la croix de x, c'est centré. Je ne pense pas. C'est vraiment en ce moment, parce que l'élément est déjà au centre, car cela ne prend que autant d'espace, pas tout l'écran. C'est pourquoi il n'a pas été envoyé au centre. Mais le succès croisé pour une ligne signifie de haut en bas et principal existe de gauche à droite. De même, dans une colonne, l'axe principal est de haut en bas et l' axe transversal est de gauche à droite. Vous devez donc simplement vous entraîner seul et essayer de comprendre ce que je viens de dire. Parce que le concept est très simple. Colonne et ligne que nous sommes, nous l'utilisons simplement pour générer plusieurs éléments dans une certaine direction. Et nous pouvons également utiliser une colonne à l'intérieur d'une ligne et une ligne à l'intérieur de la colonne. Et grâce à cela, avec l' aide de ces personnes et de Lee, vous serez en mesure de créer une interface utilisateur complète. Merci. Ainsi, dans la prochaine session, nous parlerons un autre widget qui est très important et qui nous aidera également à produire plusieurs éléments. Merci. 14. ListTile et ListView: Dans cette session d' exploration des visites, nous parlerons de notre style de liste et de ce qu'est le widget ListView. Ainsi, un style de liste est une seule ligne qui contient généralement X, contient du texte ainsi que des icônes de début ou de fin de l'image. Vous pouvez uniquement comprendre comment, quel est un style de liste et son apparence. Certains peuvent être un peu similaires à l'interface utilisateur souvent ce que j'espère que vous aimez, vous avez un compte WhatsApp et vous êtes très familier à cela. Quelle est donc la syntaxe ? C'est simplement sa tuile. Ce sont là les propriétés qu'il accepte. Essayez-le moins seul d'abord. Je n'aurai qu'une vignette de liste au début. Ensuite, dans le titre, j'aurai le texte d' Elon Musk. Épargons. Voir. Donc, c'est ce que ça dit comme une rangée horizontale. Ensuite, l'autre élément, dont j'utiliserai l'autre propriété, est sous-titré aller à la lune. sous-titre est juste Seton, a une police plus petite et sa couleur par défaut est quelque part écrevisse. Ensuite, une autre propriété est en tête, c'est ce qui devrait être un front de duff. Je vais utiliser une icône ici. Et je peux commencer par le cercle de comte. Et nous allons lui donner la couleur des couleurs, bleu et de la taille pour t. Essayons. Voyez-vous, c'est ce que je disais. Il s'agit de l'icône principale. Et maintenant, une autre propriété, beaucoup de propriétés, mais une autre importante est la traîne. C'est ce qui devrait être à la fin. J'aurai un surélevé mais dix supposons. Et il n'aura que le texte de ce qui devrait être le texte. Ce n'est pas une bonne idée d' utiliser un bouton comme celui-ci. Dans cette traîne. Je vais juste avoir une icône. Mais si je le veux, alors dans l'icône, je l'aurai, je peux commencer différé. Voyez que nous avons une icône ici. La traîne signifie la fin de la chose horizontale, le vent de tête, l'élément avant. Et la dernière propriété importante est l'untap. C'est-à-dire ce qui devrait se passer. Qu'est-ce qui aurait dû être si l' utilisateur clique sur cette vignette ? Donc, dans la console que vous venez de voir, je cliquerai ici et je verrai alors il faut. Je ne parle pas de ce bouton. Ceci, c'est ce que nous avons fait, si nous voulons faire quelque chose de bien, nous devons l'écrire sur site. Mais tout ce truc de tuile imprime cet Elon Musk. Disons que j'ai cliqué sur cinq dixièmes. C'est pourquoi il est ici comme ça. Ce style de liste est également un widget d'interface utilisateur très intéressant car c' est un ensemble de toutes les choses qui peuvent être nécessaires dans notre application. Maintenant, nous savons déjà ce qu' est un widget de colonne. Je vais juste l'enrouler autour de la colonne. Je vois que rien ne changera. Maintenant, ce que je vais faire, c'est que je veux parler du prochain élément, qui est ListView. Mais avant d'y aller, j'aimerais vous montrer le problème avec cette chronique. Si moi, si j'ai ce style de liste, autant fois, plus, si je l'ai fait, si j'appuie sur mu2 fois, voir une erreur est là en bas, c' est-à-dire que le fond est notre liquide. Si nous avons directement raison. Colonne ici comme celle-ci, elle affichera une erreur et elle n'est pas défilable. Voici donc notre prochain widget, qui est List View. ListView est comme une colonne. C'est-à-dire qu'il imprime cette chose. widgets Alda de la manière verticale vers le haut vers le bas. Mais c'est aussi une chose à faire défiler. Si j'écris la vue de liste ici et que je l'enregistre. L'erreur est de voir que nous sommes capables de faire défiler nos éléments sont des widgets. Donc ListView est, encore une fois, est le même que la colonne sur leader. La principale différence est qu'il est au niveau du corail et souvenez-vous, il imprime les widgets dans la direction verticale par défaut, si vous voulez changer, vous pouvez simplement le modifier ici dans le direction de défilement et point d'accès, vous pouvez également lui donner la verticale. Mais notre Saoudien horizontal aussi. Mais le fait est que l' élément doit être différent car verticalement, vous ne pouvez pas imprimer de style de liste. De plus, vous pensez peut-être, que devrions-nous faire si vous ne souhaitez pas utiliser de données ? Colonne rigide ? Mais nous ne voulons pas utiliser le widget ListView, mais nous voulons tout de même supprimer cette erreur. Parce que toute l'application, toutes les pages de l'écran que nous utiliserons auront tellement d' éléments dans cet écran. Dans ce cas, vous pouvez simplement adapter cet élément le plus haut, c' est-à-dire celui-ci, c'est l'élément le plus haut du corps. Vous pouvez simplement l'envelopper avec un widget et ce nom de visite est une vue de défilement enfant unique. Vous vous souvenez simplement de ce nom parce qu'il change la donne. Et cela vous aidera à faire défiler le widget de colonne. Voyez que l'erreur a disparu, et pour l'instant, cette colonne fait défiler sans ajout en bas. Si vous le souhaitez, vous pouvez Google ces conditions. Quelle vue de défilement enfant unique, ce que ListView, quelle est notre colonne, si nous voulons aller plus en profondeur. Mais je vous ai donné les informations de base sur un concept de base sur la façon et le moment où nous devrions utiliser ce type de widgets. J'espère que ce module vous a plu , car vous êtes maintenant prêt à approfondir les choses dans les prochains modules. Et à la fin de ce cours, vous deviendrez un développeur complet d'applications flutter. 15. Qu'est-ce que un Etat: Ce module est très important car nous discuterons ici de ce qu'est un budget avec état. Dans les sessions V précédentes, nous sommes très habitués à indiquer moins de widget. Nous avons également créé notre propre widget sans état sous le nom de l'écran d'accueil. Mais certainement dans une application mondiale idéale V, ma fille peut être beaucoup de scénarios où nous devons utiliser un budget avec état. Avant d'entrer dans le widget d'état entièrement, vous pensez peut-être à quel est cet état ? Un état n'est donc qu'une valeur ou un élément de données dans notre application. Tout ce qui peut changer, comme un compteur, un texte, une couleur, etc., peut faire partie des données des instructions d' état de votre application. C'est comme Zoom, un état de nom d'utilisateur, c'est quoi ? Ses compétences, flotter, Firebase, elles sont toutes d'état. Quelle est la couleur de l'application ? Blue, c'est aussi un état. Le widget Stateful est simplement un widget rigide dont les données internes changeront sur certaines actions. Autrement dit, on clique sur le bouton et que la couleur du texte doit être modifiée, il devrait y avoir une sorte d'animation. Dans ce cas. Soyez rigide, c'est rafraîchir et reconstruire avec 10 nouvelles données. Cela n'est pas possible dans les régions apatrides. Donc, théoriquement, vous avez compris, mais nous travaillons définitivement dans notre code. Vous avez peut-être beaucoup de doutes. Et disons-le un par un. Je vais donc supprimer à nouveau toutes ces données. Mais avant de supprimer toutes les données, j'aimerais avoir un nouvel écran. C'est à la maison, c'est bon. C'est un état moins rigide. Mais j'aimerais supposer que le point de contact, point. Nous avons cet écran. Créons maintenant notre premier état en plein écran. Ensuite, nous devons d'abord importer du matériel comme d'habitude, puis créer une classe et un nom. Le nom que je nommerai est le contact, puis date d'échéance prolongée, la vision complète. OK. Ensuite, il manquera une machine ou quels droits. Et c'est comme ça. Il s'agit de l'état de création. widget avec état aura deux classes. L'un est l'état full div, qui étend l'état. Et le second est la classe d'état qui l'étend. Donc ici vous pouvez simplement revenir, supposons que je le nomme tech. État. Ce sera encore une fois rigide. Je vais créer cet état contextuel. Il prolongera sa date, qui portera ce nom. Et maintenant, là encore, il va manquer déjà le projet de loi. Et maintenant, vous connaissez cette ceinture. Je vais simplement retourner un échafaudage ici. C'est donc le minima nu ou squelette dub d'un widget avec état. Vous pensez peut-être : Oh non, je ne veux pas écrire ça encore et encore. Dans ce cas, il se peut que vous ayez besoin de quelques extensions. Comme ici, j'ai ces superbes extraits de flottement. Alors vous aurez certainement Dart et fertile dedans. Avec ces superbes flottements, extraits. Nous avons beaucoup de raccourcis. L'un des raccourcis consiste à créer directement un widget avec état. Je vais donc simplement supprimer toutes ces touches de raccourci S, D, F, qui est un widget d' état flottant. Et puis je cliquerai simplement sur Entrée et je vais le nommer. Contact. À voir. C'est fait. Nous n'avons rien à faire avec ce raccourci. Et quel est cet état ici ? Je vais avoir ce nom de chaîne est égal à invité. Supposons que ce nom d'invité soit un état que nous modifierons plus tard et que nous vous montrerons comment il est, comment l'écran dribble et comment il est, comment l'interface utilisateur change Gs lors de toute action que nous effectuons. Dans la prochaine vidéo, nous allons continuer à partir d'ici. Alors tendon et joie et pratique de ton mieux. Et vous. 16. La méthode setState(): Maintenant, nous avons déjà discuté pour ceux-ci et comment écrire un widget avec état. Maintenant, il est temps de le faire pratiquement et de comprendre lors de l'inversion, nous devons utiliser la méthode set state. Et quel est l' avantage de l'utiliser ? Allons-y. Nous avons cette page de contact, dot-dot-dot. Ici, dans l'échafaudage, j'aurai une barre d'application, et elle aura un type de texte. Supposons un widget avec état. OK ? Et dans le corps, avons une colonne dans les enfants. Et les enfants moins premier champ de texte Habit. Et en dessous, avons un texte de supposons bonjour, Dan, variable de nom. Et dans le point point principal, au lieu d' entrer dans l'écran d'accueil, passons à l'écran contextuel. Actualisez notre redémarrage de notre application. Et voyez, vous verrez simplement un champ de texte normal mais de texte avec ce widget de texte Hello. Maintenant, ce que je veux, c'est que chaque fois que quelque chose est changé ici, c'est sur la valeur modifiée. Je veux que cette variable de nom soit définie. Le peu importe ce qui le réécrit. OK ? Mais le fait est que si nous le faisons comme ça, il y a sans utiliser l' état défini, cela ne fonctionnera pas. Allons voir Bonjour, j' aimerais un fichier Flutter. Vous voyez, rien ne fonctionne ici. C'est solide. C'est encore, bonjour invité. Mais si nous utilisons simplement la méthode set state ici, il s'agit d'une modification des données de test et de façon dont nous aimerions placer States, SET 10 majuscules, set state, puis parenthèse. Et à l'intérieur de cela, encore une fois, la fonction IF comme celle-ci, c'est comme ça qu'il est écrit. Donc, dans cet état défini, maintenant si je change de nom est égal à valeur, puis nous commençons. Maintenant, vous vous concentrez simplement sur le texte Hello. Voyez, la première fois que ce qu'ils étaient, nous écrivons, l'interface utilisateur est en cours de reconstruction juste pour une raison, parce qu'elle indique le widget d'état complet. Maintenant, il est indiqué que c'est le nom. Nous pouvons le modifier en fonction de certaines actions ici. Cette action est un champ de texte. Pour comprendre ce qui se passe et comment l'écran se reconstruit. Nous pouvons simplement avoir une déclaration imprimée. Tout d'abord dans ce projet de loi, c'est l'impression d'écran Building. Et un ici. Valeur d'impression si vous le souhaitez. Vous pouvez également utiliser un état des jeux d'impression qui est appelé. Maintenant, lorsque je redémarre, vous voyez simplement le bâtiment de l' écran de la console de débogage, c'est-à-dire que cette fonction de facturation est appelée. C'est pourquoi nous sommes en mesure de voir ce résultat. Maintenant, je vais écrire, voir, si j'écris f, puis remet à nouveau le rebut et l' écran est en train de se reconstruire. Et vous d, d, e. Donc pendant tout ce temps le CUI était que cette fonction de facturation appelait à nouveau et que ce nom de valeur était en train d'être changé. C'est pourquoi il se reflète ici. Ainsi, grâce à la console de débogage, vous pouvez comprendre ce qui se passe sous le capot. Et la demi-lettre utilise la méthode set state pour alerter l'interface utilisateur de se reconstruire elle-même. C'est donc la différence entre un widget apatride et un widget avec état. Dans une dette rigide apatride, la dette est ce qu'elle est écrite ne peut pas être modifiée si nous le voulions via certains boutons, clics ou autre. Mais dans un widget avec état, ces valeurs peuvent être modifiées à l'aide de cette méthode set state. Dans la vidéo suivante, nous allons faire un autre exemple de «  set state tail », puis essayez simplement de rechercher et de pratiquer vous-même. 17. Widget important en action: Jusqu'à présent, nous savons comment utiliser une instruction SET et comment elle peut être utilisée pour reconstruire notre écran avec Dan new state. Mais c'est mieux si nous pratiquons certains avec d'autres exemples. Commençons et créons un nouvel écran. Un nouveau fichier sera nouveau. Supposons que ça ne devrait pas l'être. Et nous allons juste le nommer avec état. Points-points. Comme d'habitude, emballage de matériel d'importation. Alors j'ai une visite avec état de mon rendez-vous en plein écran. Je viens de le nommer comme ça. Ensuite, prenez l'échafaudage. Et comme d'habitude, dans ce titre, j'ai un texte de date, complètement rigide dans le corps. Vous, dans le corps. Nous allons avoir un widget centré et un enfant. Disons un widget de colonne. Se trouve maintenant dans un widget avec état. Il y a certainement un état où je vais créer une liste de chaînes. Je vais le nommer. Les noms sont égaux à cela. Et j'apprends Bill, Mark. D'accord ? Et j'aurai un NSdate de int I est égal à 0. Vous pensez peut-être, qu'est-ce que c'est ? C'est donc juste 0 car l' index d'une liste commence par 0. Maintenant, ici, il y aura d'abord des textes, un champ de texte et pour inviter, ma moyenne est alors les noms. Et moi, donc ça va ajouter le tout début, il montrera IL-1. Et pour cela, nous devons passer à mon point point moyen, qui est mon état plein écran, puis redémarrer. Voyons voir. Voyez mon nom et mon nom est 11. D'accord ? Et aussi la colonne que j'utiliserai un centre de points d'alignement principal de X principal qui est de haut en bas, il devrait être centré. D'accord ? Maintenant, ce que je veux, c'est que je veux lever des boutons dans la même colonne. Surélevé signifie que je suis désolé, je veux dire bouton surélevé. Et le premier bouton sera le suivant. Et le second a été élevé, mais nous y retournerons. Bon, voyons voir. OK. Ce que je veux, c'est que lorsque je clique sur ce bouton Suivant, je m'appelle Elaine, je m'appelle Bill. C'est que H devrait faire un cercle ou il devrait passer par cette liste de noms pour cela. Sur site, je dois modifier ces données. Je l'ai fait si j'ai 0 ans. Il devrait en être un. Si je clique sur le bouton Suivant, jusqu'à présent, je vais juste écrire l'état défini et puis je plus, plus. Voyons voir. Je vais cliquer sur ce prochain C, Mon nom est intégré. Si je clique sur Mon nom est Mark. De même, si je veux revenir en arrière, je vais juste définir l'état I moins moins. Ici. Si je clique sur Suivant, il s'agira de Bill. En fait, nous pouvons y retourner. Il apprendra encore une fois. Mais le fait est que si l'utilisateur clique plusieurs fois, il affichera une lettre C. Parce que je ne suis que l'Atlantide seulement 0, 1 dette est trois. Mais si j'y vais plus de deux, cela commencera à montrer une erreur trop loin que nous devons faire une sorte de conditions ici sur site, comme l'état défini. Si je veux juste le dire ici. Si je suis inférieur à la longueur du point de noms, alors seul l'exécution a fait ce truc d'état défini. OK. Redémarrons maintenant et vérifions ce qui va se passer. 012 va à traiter ne doit pas exécuter 01 mark. Et encore une fois, je dois écrire moins un ici, puis définitivement. Refaisons-le. Eland Bill, tu vois, maintenant il ne montre aucune erreur. Et de même, revenez en arrière. Lorsque vous y retournez, nous devons vérifier si je ne suis pas égal à 0, dix moins si c'est déjà 0, alors nous ne pouvons pas aller plus loin. Maintenant, essayons. Si j'y vais 123, d'accord ? Maintenant, si j'adopte le projet de loi 11, et maintenant si j' essaie de revenir en arrière aussi, cela ne fonctionnera pas parce que nous avons notre condition qui veillera à ce que cet écran ne se bloque pas. Il s'agit donc d'un exemple très basique de l'état défini. Un autre exemple que vous pouvez avoir est supposer que mort est une couleur, cette couleur est rouge. D'accord ? Il s'agit d'un seul état. Maintenant, je vais avoir un bouton d'action flottant. Bouton d'action flottant que j'aime. Dans cet enfant, il aura une icône. Je peux commencer. Voyons voir. Je ne sais pas quelle est la lentille couleur. Jetons un coup d'œil. Vous voyez, d'accord, j'ai cette icône ici. Ce qu'ils veulent, c'est que lorsque je clique sur cette icône, sa couleur devrait changer. Maintenant. J'ai cette couleur arrière-plan et cette couleur d'arrière-plan sera l'état rouge. Bon, donc au tout début, l'état est rouge. Mais je veux que lorsque je clique sur ce bouton, cet état devrait être changé. Donc, lorsque je clique sur ce bouton, définissez l'état, couleur est égale à la couleur Amber. Je vous montre simplement des exemples différents pour que vous soyez plus aise avec les données des jeux de données pour comprendre ce qu'elles font. Maintenant, je clique dessus, vois un changement de couleur en Ambre. Il s'agit donc de l'utilisation de la date définie, et c'est ainsi qu'un widget avec état fonctionne. Il suffit de modifier ces données et de reconstruire l'écran Statut avec de nouvelles données d'endettement, comme cela. Dans la vidéo suivante, nous discuterons donc de quelques-uns des concepts restants de ce module. Et après cela, nous sommes heureux d'aborder les nouveaux concepts plus plats. Merci. 18. Qu'est-ce que la fonction initState(): Donc maintenant, nous avons déjà travaillé sur un widget avec état et comment changer l'état à l'aide de l' instruction SET et get est une autre méthode qui est très importante dans un widget avec état, appelé état d'initialisation. Qu'y a-t-il dans chaque état ? C'est une fonction qui est déjà morte dans chaque widget d' état que nous n'avons qu'à écrire dans. Voyez ici, je peux obtenir cette aide. Donc, si je clique sur Entrée, il y a cette fonction dans son état et ce qu'elle fait lorsque cet écran, notre van, ce widget avec état est en cours de construction pour la toute première chose. C'est ce qu'on appelle. Cela signifie donc qu'avant cette fonction de facture, avant l'interface utilisateur, cela dans son état sera appelé. Donc, si vous voulez voir ce que je dis, imprimons. C'est le cerveau. Ici. État d'initialisation et fonction Bell. Imprimons la fonction Build. Redémarrons maintenant l'application. Dans la console de débogage. Vous verrez d'abord que l'état d'initialisation a été appelé, et deuxièmement, cette fonction de facturation a été appelée. C'est donc très puissant et très utile lorsque nous construisons une application réelle. Vous pensez peut-être, d'accord, mais à quoi sert cet état d'initialisation ? Ce que nous faisons habituellement, c'est que nous attribuons une certaine valeur. Nous attribuons une certaine valeur à nos variables, variables d' instance, vous pouvez dire à ces données, supposons qu' il s'agisse, par exemple, nom de chaîne et d'une variable. Maintenant, ces données arrivent. Supposons qu'à partir de l' écran précédent, utilisez son nom. Ici. Je vais juste dire ce nom .UserID, les deux. Jeff Bezos. Maintenant, en état d'initialisation, j'aimerais attribuer cette valeur. Il s'agit des données qui proviennent de l'écran précédent vers cet écran. Nous écrivons simplement ce nom de point est égal au nom d'utilisateur du point de widget. Et puis dans le texte, mais j'aimerais montrer ce nom d'utilisateur. Voyons voir, est-ce que ça marche ou non ? Voir. Ce que nous avons fait, c'est que les données provenaient l'écran précédent à l' écran, par exemple. Et ici, vous attribuez cette valeur à une variable vide, qui était nulle auparavant. Mais avant de créer l'écran, cette valeur a été attribuée à cette variable en utilisant l'état d'initialisation. Depuis, parce que c'est la première fonction qui est appelée lorsque ce widget a été construit. Il y en a, on peut dire quand ce budget s'est construit. Maintenant, supposons, j'espère que vous vous souvenez de l'état conservateur précédent. Si je clique dessus , cette fonction de facture sera à nouveau appelée. Mais la fonction d'état d'initialisation n' est appelée qu'une seule fois. Voyez donc, la fonction de facturation est de nouveau appelée car la page est en cours d'actualisation. Mais ce truc d'initialisation, von, nous ne pouvons pas l'appeler à nouveau, c'est déjà tout à fait cela sur Lee enroulé une fois ADH que vous devez supprimer cet écran ou aller à la différence peut totalement différent deux pages puis revenez sur cette page. C'est la livrée « on ». Ici, nous attribuons simplement cette valeur du widget parent à ce widget. Ces choses que vous pouvez voir. Il y a beaucoup de choses comme les flux, textes et le contrôle. La valeur des cotisations est donc les éléments que nous voulons initialiser seront utilisés ou VK peut l' initialiser à l'état d'initialisation. Donc, en ce moment, vous pensez peut-être à ce que je dis, mais plus tard, lorsque nous utilisons base de données Firebase ou que nous devons initialiser quelque chose. C'est supposons que certaines requêtes HTTP. Ces choses, nous pouvons le faire dans l'état initial. Cela signifie que tout juste mort est initialisé cette chose dès que cette page est en cours de construction. J'espère donc que vous avez compris le concept de budgets avec état et comment les pages sont construites. Cet état initial est très important. Mais pour l'instant, si vous avez compris, à moins que le concept soit également, c'est suffisant. Nous pouvons passer à d' autres sujets. Et Q 19. Comprendre le cycle de vie Widget: Dans la dernière vidéo, V, puis comment l' état d'initialisation fonctionne Vogue. De même, nous avons soit des fonctions, soit d'autres choses. Tout widget avec état, appelé cycle de vie du budget complet de l'état. Donc DRF, peu de fonctions que nous pouvons utiliser dans un widget avec état. Le premier est l'état d'initialisation, dont nous avons déjà discuté. agit de la première méthode appelée lors de la création du widget. Il est appelé une seule fois. Il est généralement utilisé pour initialiser des propriétés qui reposent sur ces widgets qui font partie de cette arborescence. modificateurs modifient les flux en indice. Tout autre objet susceptible de modifier la date de ce widget. Nous en avons donc discuté. Ensuite, il y a les dépendances de changement profond. Cette méthode est appelée immédiatement après dans chaque état. Et lorsque la dépendance de l' objet de l'état de mort change via un widget hérité. Vous pouvez donc simplement voir que cela a changé les dépendances. Je le ferai simplement, je vais simplement écrire des imprimés. Est-ce que les dépendances ont changé. Je vais redémarrer l'application. Et ici, vous verrez le premier dans son état sera là. Ensuite, ils changent les dépendances, puis double fonction. Cette méthode est rarement nécessaire ou utilisée. quais du flottement suggèrent également qu'il pourrait être utile si vous avez besoin de faire des appels à distance. Mais lorsque n widget hérité est mis à jour, ce concept n'est pas si important. J'ai construit beaucoup d' années et ce n'est pas important. Troisièmement, c'est la fonction cloche. Cette méthode est appelée chaque fois que nous avons fait cela reconstruit, elle est obligatoire et doit renvoyer un widget. Il s'agit donc de la fonction cloche. Nous l'avons déjà fait, nous savons déjà qu'il sera appelé à cette 30 place le premier dans son état. Deuxièmement, modifiez les dépendances. Et troisièmement, la fonction des jours a mis à jour la région. Il s'agit également d'une fonction donnée par le widget avec état. C'est ce qu'on appelle les changements glaciaux des parents et doit être reconstruit discrètement. C'est ce widget. Ce que je veux dire, c'est que supposons ici que ces données proviennent de ce parent glacial, elles proviennent de l'écran précédent. Et voici une mise à jour. Cette chose est appelée si ces points, supposons que le nom ne soit pas égal à 0, nom d'utilisateur de point rigide. Ou désolé, vous pouvez simplement dire ce widget point nom d'utilisateur, marque. Ont-ils changé ? Nous ne pouvons donc pas le montrer maintenant, mais il faut comprendre le concept. Supposons un cas typique où un parent transmet variable aux enfants via le constructeur, ce que nous avons déjà fait. Le parent transmet certaines données via le constructeur. Et si cela, si les données du pad et des widgets changent , cette fonction se souviendra également et montrera les modifications effectuées. Donc, pour la cause qui fonctionnera après cela, donc pas besoin de lire l'état défini par vous-même. Cette fonction n'est pas non plus très utilisée. Mais lorsque nous apprenons des widgets avec état, vous devriez au moins le savoir. Ces termes existent également. État de 50. Nous savons déjà qu'il s' agit d'un roi de l'État. Et après cela, la fonction de facturation est à nouveau appelée et l'interface utilisateur est construite. Ce n'est pas nouveau. La sixième est désactivée. Cette fonction est appelée lorsque l'objet est retiré de l'arborescence. C'est encore une fois rarement utilisé. Cette méthode existe essentiellement : les objets de données de coût peuvent être supprimés de 1 à un autre et peuvent être supprimés temporairement. Je vais juste vous montrer que cela existe également désactivé comme ça. Lorsque vous venez d'imprimer, désactivez. Et une finale et la dernière est éliminée. C'est très important. Cette méthode est appelée lorsque cet objet, c' est-à-dire lorsque ce widget avec état est supprimé définitivement de l' arborescence. Ici, nous devrions libérer les sources d'énergie retenues par l'objet, comme arrêter n'importe quelle mission. Un exemple est que Wendy's my TED est appelé vile en utilisant le positionnement du poussoir du navigateur. La prochaine session seulement nous parlerons de navigation. Il s'agit donc d'une page à une autre. Si nous y allons, alors la page précédente devrait être éliminée correctement. Il ne devrait y avoir aucune fuite de mémoire. Donc, dans une application réelle, il est très important d'utiliser ces mentor Dispose. Ici, nous arrêterons certaines animations, nos appels de base de données ou autres, ce qui n'est pas nécessaire ultérieurement. Donc, ces widgets laïques, libres et avec état de la vie adulte d'abord est l'état d'initialisation, abandonnant les dépendances. La troisième est la fonction de construction. Plus de 40, si nous le faisons, si leur widget parent modifie leurs variables ici. Alors a mis à jour vd, cet appel, nous comparons cela aux valeurs. Et puis le dernier est la désactivation, ce qui n'est pas non plus très utile, mais cette publication est beaucoup utilisée. Beaucoup. Vous devez donc vous assurer que vous connaissez tous ces termes et lorsque nous les utilisons plus tard, vous n'êtes pas confus sur ce que c'est ou est-ce quelque chose de nouveau ? Parce qu'au moins ce concept que nous connaissons plus tard, nous apprendrons à l'utiliser. Merci. 20. Concept de pile: Dans ce module, nous allons commencer un nouveau sujet qui est la navigation. La navigation est un élément clé de l' expérience utilisateur pour n'importe quelle application mobile. Parce que les utilisateurs navigueront constamment constamment entre différents écrans. Il est impossible que vous construisiez une application à part entière et vous n'ayez qu'un seul écran dedans. Si vous avez vu si vous voyez un site de commerce électronique, DNR, commandez ma commande, mon panier, puis la page d'accueil, puis la page d'offre. Il y a beaucoup d' écrans de dette. Nous devons savoir comment naviguer correctement. Maintenant, papa est malade concept de flottement de navigation, qui est pile. Si vous venez d'un langage de programmation R, Si vous avez terminé votre diplôme, alors définitivement, vous savez ce qu'est une pile ? Il suffit de pousser et de dégager des éléments. Vous pouvez donc simplement voir ce diagramme et le comprendre. Supposons que ce n'est pas une pile vide. Ensuite, un écran lorsque l'application s'ouvre, puis l'écran d'accueil est poussé vers la pile. Ensuite, à partir de l'écran d'accueil, si nous accédons à l'écran contextuel, c'est-à-dire si nous passons simplement aux contextes propres et avons la possibilité de revenir à l'écran d'accueil. Ensuite, cet écran contextuel va au-delà école à domicile dans ce cas comme dans la pile uniquement. C'est-à-dire qu'il est au-dessus l' un à l'autre. Vous pouvez donc simplement dire qu'il suit la règle du dernier entré premier sorti, c' est-à-dire le lifo et non le premier entré, premier sorti. Donc, si nous affichons l' écran des contextes et revenons à nouveau sur l'écran d'accueil, ce contact vert sera supprimé de la pile. Et puis encore une fois la pile d'indust. L'écran d'accueil sera présent uniquement, ce qui sera visible par l'utilisateur final. Il s'agit donc de la 2D, c'est le concept derrière la navigation en Floride. Vous devez comprendre parce que dans votre esprit, vous devriez visualiser comment les pages ou le fonctionnement de votre code. Commençons alors. Si vous connaissez le concept, commençons par une navigation de base. Faites ressortir cet éditeur de texte. Et ces pages que je ne veux pas, je vais simplement créer une nouvelle page. Et le nom est le premier point d'écran. Ensuite, j'importerai du matériel. Il sera alors apatride. Je ne veux pas modifier les données. Ce sera le premier écran. Il s'agira d'un échafaudage dans le bar de l'AB. Voyons le texte du titre du premier écran. Maintenant, il suffit d'attribuer ce premier écran en point de domaine. Actualisez maintenant votre application et voyons. Le premier roi est mort. Dans la prochaine vidéo, nous découvrirons le concept de Bush et Bob. Voici comment envoyer cette pile, un écran à l'intérieur de la pile et comment la supprimer. Et revenez à nouveau à l'écran précédent. 21. Méthode poussoir et pop: Continuons à travailler sur la partie navigation. Donc, si nous avons ce premier écran dans le corps, avons un widget central. Et puis enfant du bouton surélevé. Et dx sera égal au deuxième écran. OK ? Bon, nous avons ce bouton. Maintenant. Nous devons également créer un deuxième écran. Je vais donc créer un nouveau deuxième écran de fichier, mais Dart. Encore une fois, je dois faire ce matériel d'importation. Ayez ensuite un widget sans état appelé secondes screen. Nous, comme c'est un écran, donc c'est vraiment un échafaudage. Dans cette partie, nous aurons un titre. C'est très répétitif, je sais, mais il faut le pratiquer. Il faut s'y habituer tellement que vous en savez tout. OK ? Nous avons ce deuxième écran, d'accord ? Maintenant, nous devons naviguer vers, vous pensez peut-être, d'accord, mais comment naviguer ? Pour naviguer, il existe une méthode appelée Push and Push Placement. C'est-à-dire que d'abord, c'est pousser. C'est-à-dire que nous allons simplement pousser l' écran suivant au-dessus de l'écran. C'est-à-dire que nous allons pousser le deuxième écran à l'intérieur de la pile. Mais la première peau va oser la pile. Ce que je veux dire, c'est que nous devons utiliser le push, mais la syntaxe dont vous devez vous souvenir est abord le point de navigation, puis l'ère CD, tant d'options. Remplacement Push, Pop, Push Nous allons donc utiliser Push. Ensuite, vous verrez qu'il accepte deux choses. Le premier est un contexte et le second est un itinéraire. Cet itinéraire, nous devons m'envoyer widget de route de la page TDL comme celui-ci. Voyez, c'est un peu différent, mais c'est un code que vous devez simplement apprendre ou simplement mémoriser par cœur, c'est tout. Maintenant, ce Builder est une fonction comme celle-ci, qui sera ici contextuelle. Et puis cette fonction revient. Ainsi, le nom d'écran atteint dans notre cas est le deuxième écran. Il s'agit donc de ce code nécessaire pour naviguer d' un écran à un autre. En dehors de ce deuxième écran, tout ce que vous devez simplement vous souvenir, c'est la syntaxe. Et la poussée par point du navigateur prend deux paramètres. L'un est contextuel et le second est l'itinéraire de la page matérielle. page Material it out accepte un paramètre Builder, qui est une fonction qui renvoie ce nom d'écran. C'est un widget tenseur d'identité. Vous pouvez simplement dire : Voyons voir, est-ce que ça marche ? Et rappelez-vous simplement que nous utilisons ici et je vais juste écrire la méthode push car il y a une différence entre le remplacement push et push. Je cliquerai simplement sur aller au deuxième écran et voir le deuxième écran est là. C'est donc la première fois que nous utilisons plusieurs écrans d' un écran à l'autre. Et maintenant, vous pouvez voir ici ce bouton fléché. Imaginez donc qu'à cause de cette poussée, nous sommes sur le point de revenir à l'écran précédent. Et si vous pouvez visualiser une pile, cela signifie qu'au-dessus du premier écran, deuxième écran était assis. Et puis on vient de le retirer. Et vous pensez peut-être, d'accord, j'ai compris ce qu'est la poussée, mais qu'est-ce que le remplacement de poussée ? remplacement de poussée efface donc cette pile. Cela signifie que nous ne pouvons pas revenir à cet écran précédent. Une fois que nous accédons à la deuxième date écran, il n'y a pas de flèche arrière. Tous les écrans précédents seront supprimés. C'est donc le navigateur. Remplacement Push. Tout simplement. Après cela, tout sera identique du contexte à l'itinéraire de la page matérielle et tout. Seule la différence sera la syntaxe de remplacement poussée. Maintenant, encore une fois, sortez l'émulateur et essayez-le vous-même. Lorsque je clique sur Aller au deuxième écran, voyez qu'il n'y a pas de bouton flèche. Nous ne pouvons pas revenir d'ici. Vous pouvez simplement le comprendre avec un exemple de Facebook. Tout d'abord, cet écran de connexion apparaît lorsque nous saisissons un nom d'utilisateur et un mot de passe. Après cela, l'utilisateur est, et si c'est correct, l'utilisateur est dirigé vers son écran de profil. Et depuis l'écran de profil de dette, il ne peut pas revenir à l'écran de connexion avant et à moins de cliquer sur le bouton de déconnexion. Il s'agit donc d'un très bon exemple typique de quand utiliser push et quand utiliser le remplacement par poussée. Maintenant, nous avons compris et nous avons appris à pousser des pages. Mais il existe un autre concept de popping pages. que nous allons faire ici dans ce deuxième écran. Juste dans leur corps. Une fois encore. Créez le centre droit, puis l'enfant. Puis bouton surélevé. Voici que j'ai fait quelque chose de mal. Dans le bouton surélevé. viens de voir quand l' enfant vous le fera, j'écrirai ici et j'y retournerai. Maintenant, nous allons comprendre le concept de pop, qui signifie simplement supprimer cette page de l' écran et moins dans les taxes navigateur dot push. Maintenant, voici simplement pop simple et il accepte le contexte d'étape. C'est ça. Rien de plus. Et pour faire apparaître, rappelez-vous simplement ici qu'il est poussé, pas de remplacement poussé, sinon votre application se bloquera. Vous allez simplement sortir directement de votre application. OK ? Maintenant, si je clique sur Aller au deuxième écran, voyez que nous avons ce bouton Retourner et quand je clique dessus, je reviendrai à nouveau, reviendrai au premier écran. Maintenant, vous pensez peut-être que ce routage fait aussi la même chose. Il appelle également, par défaut, la fonction Pop de navigateur. Les deux font la même chose, mais ici nous écrivons délibérément le code pour revenir en arrière. C'est ça. Et ce point pop de navigateur supprime cette page la plus haute de la pile. Il peut donc y avoir moins de 23 pages, mais elle ne supprime que cette première page. C'est ça. Et si vous voulez partir de cette deuxième page, vous pouvez également revenir en arrière. Bien, deux pages différentes. Je vais juste naviguer dans l'école, mais je vais pousser. Ensuite, ici, l' itinéraire de la page matérielle, puis simplement les contextes. J'aimerais maintenant accéder à à cette page de contact. Supposons la page de contact ici. OK ? Il s'agit également d'une poussée. Rappelez-vous maintenant ce qui se passe sur la balise d'index laitier. Il ne s'agit que d'abord d'obtenir un widget, en ce moment. Ensuite, quand je clique sur aller au deuxième écran, technologie s'additionne très en dessous de la dette est le premier écran au-dessus, puis le deuxième écran. Si j'y vais, désolé, j'ai juste oublié de changer de nom. Si je vais à l'écran de contact, voyez maintenant les contextes canne sont là et maintenant dans le répertoire de balises dest là et maintenant dans le répertoire de balises dest écrans un au-dessus et en dessous. Donc, quand je reviendrai ici, le deuxième écran viendra et l'écran des contextes sortira de la pile. Et maintenant, si je reviens ici, alors ce premier écran est là. Mais supposons qu'à partir de ce deuxième écran, j'utiliserai le remplacement push. Maintenant, que va-t-il se passer ? C'est très intéressant à voir depuis le premier écran, lorsque je passe au deuxième écran, nous avons deux écrans dans la pile. Mais si je clique sur Aller au contact et qu'il utilise le remplacement push, il supprimera tous les écrans. Il s'agit du deuxième écran ainsi que du premier écran. Maintenant, si je vais à Contact, voyez, il est en train d'être supprimé. Maintenant, j'ai utilisé le remplacement push ici. C'est pourquoi nous ne devrions pas pouvoir l'utiliser. Vous devez le répéter, parfois simplement un peu que je viens, c'est très bien. Mais vous devez comprendre que ce remplacement push supprime toute la pile, toutes les visites de cette pile. Cela peut se produire en raison d' une mise en cache normale ou quelque chose comme ça. Mais jusqu'à ce que vous n'ayez pas assez de familiarité, vous avez compris ce concept par cœur. C'est ce qui compte. Dans les prochaines vidéos, nous discuterons de la navigation, mode en profondeur et de l'eau, du mode en profondeur et de l'eau, des autres fonctions plutôt que de simplement pousser pop et de toutes les autres choses, qui seront discutées dans un tandis que. 22. Comprendre la route nommé: Jusqu'à présent, nous avons appris à naviguer à l'aide de la méthode push. Mais il existe une autre façon de naviguer consiste à utiliser des itinéraires nommés. Supposons maintenant que si vous devez naviguer vers le même écran dans de nombreuses parties de votre application, l'approche précédente peut entraîner une duplication de code. La solution consiste à définir un nom, un itinéraire et à utiliser ce nom pour la navigation où vous le souhaitez. Et la syntaxe est également prête, simple, pas comme avant, nous devons utiliser itinéraire de la page matérielle, puis constructeur et beaucoup de choses plus tôt, c' était beaucoup plus de code de chaudière, codage de plaque de chaudière et tout. Mais pour le moment, la syntaxe est très facile. Ainsi, les étapes sont. abord, nous devons créer deux écrans, ce que nous avons déjà fait, d'accord ? Et le second est défini les itinéraires en fournissant des propriétés supplémentaires dans le widget ADL. Nous devons donc maintenant accéder à notre page principale de points. Ici. Nous devons utiliser les propriétés des routes ici comme celle-ci, puis des accolades bouclées. C'est donc aussi une propriété des itinéraires de laboratoire de matériaux, qui vous aideront certainement dans votre navigation et votre code propre. Vous devez donc d'abord déterminer la bonne chaîne de tâches. C'est ce qu'il faut appeler. C'est le nom de l'itinéraire. Mais ici, je viens de donner une barre oblique, ce qui signifie la page d'accueil. Et c'est une fonction comme avant. Et ici, je vais envoyer l'écran d'accueil. Et ainsi, le deuxième itinéraire vous permet d'avoir un contact. Vous pouvez avoir ce contact. Et là encore, cette fonction et ces contextes s'affichent. Lorsque nous utilisons des itinéraires, nous ne devrions pas utiliser la propriété domiciliaire. Nous devrions utiliser la route initiale. Et ici, quelle est la route initiale c'est cette barre oblique inverse. Je dois donc commenter cette maison, puis redémarrer notre application. Supposons que l'itinéraire initial soit l'écran d'accueil ou non. L'itinéraire initial définit l'itinéraire par lequel l'application doit commencer. Donc, par le nom seul, vous comprendrez. Cela prend un peu de temps dans mon système. Oui. Mais c'est fini. Disons que l' école initiale à domicile est maintenant là. Et je vais juste envoyer le premier écran 2. Voyons voir. Maintenant, comment naviguer vers le deuxième écran en utilisant ce nom, qui est navigué dans la couche de propriétés Push name. Nous, nous utilisons le remplacement des points push and push du navigateur. Mais maintenant, nous pouvons utiliser le remplacement Pushed Nim et Pushed Nim. Allons au premier écran. Ici. Voyez que nous avons notre méthode push, que je commenterai et j' aurai nommé mon 10. Et la syntaxe est très simple. Push de point du navigateur nommé, puis contextes et nom de leur itinéraire. Et leur nom sera un contact oblique. Je vais l'envoyer pour aller à Contact. Supposons. Vous pouvez donc voir que la syntaxe est très simple. C'est le nom du navigateur Dot Push. Ici, nous n'avons pas besoin d'utiliser une page de matériel, un itinéraire et tout. Nous pouvons simplement écrire le nom de l'itinéraire et cela nous aidera à naviguer. Allons à Contact et voyons les pages de contact ici. De même, nous avons poussé. Nom de remplacement Push. Il fait le même travail que le remplacement poussé sur les différences de leader. Ici, nous utilisons un nom de sécheresse. Et il suffit de cliquer et de voir qu'il n'y a pas de bouton de retour. Nous ne pouvons pas revenir ici aussi pour revenir en arrière. Ou si vous l'avez fait, si vous voulez créer un bouton , nous pouvons simplement utiliser navigateur dot pop, comme auparavant. La seule différence est que nous utilisons des itinéraires de noms pour nous vers la Navy pour la navigation. Bush est nommé. Et de même dans la réunion, mais que vous pouvez écrire autant de noms que vous voulez. Supposons alors la deuxième page. Contexte. Et la deuxième page. Secondes. Bien. D'accord ? Et nous allons juste dire que c'est le deuxième écran. D'accord ? C'est donc la façon d'utiliser les itinéraires. Le fait est que le seul inconvénient ici est que lorsque nous naviguons, frais doivent se souvenir correctement de ce nom. Supposons qu'on l'écrive. Supposons que le point de contact S soit des contextes, alors il affiche une erreur. Et définitivement, c'est très difficile pour nous de nous souvenir de l'orthographe. Cette barre oblique inverse est correcte, chaque fois loin devient une petite solution plus facile. Et c'est l'utilisation d'un modificateur statique pour appeler les routes de dénomination. Cela signifie que si nous avons utilisé un nom, si vous commencez une méthode pour naviguer d' un endroit à un autre dans le concept de dénomination, nous devons nous souvenir la chaîne que nous avons fournie à son nom. Ce n'est pas forcément toujours de la dette. Nous nous souvenons du nom lorsqu'il y a plusieurs écrans dans une application. Nous créons donc un type de données de chaîne avec le modificateur statique, sorte que nous puissions l' attribuer directement, l' appelant via sa classe, ce qui signifie simplement que nous utilisons une variable tactique . dans notre état moins rigide et lui donner un nom comme cette maison, nous allons simplement écrire de l'statique. ficelle. Id est égal à la maison comme ça. D'accord ? Et puis dans le fichier main.js, nous pouvons simplement écrire pour la clé principale. Nous pouvons écrire 0 identifiant de point d'écran. Et cela aura un contexte d'écran d'accueil. Simple. Il devient donc beaucoup plus propre et plus agréable. Et vous le feriez certainement, vous pouvez vous souvenir de ce nom de classe, du moins sur cet écran d'accueil. C'est beaucoup plus facile à retenir que la corde. De même, si vous allez au deuxième écran, nous pouvons simplement écrire, prendre l'ID de chaîne est égal à. Et puis je peux écrire un deuxième écran comme ça et aller au point principal. Ici, je n'ai qu'à écrire un deuxième écran. Et comme c'est une variable statique, nous pouvons donc l'appeler directement sans créer d'objet. C'est ainsi que ça se passe. Comme vous pouvez le voir ci-dessus, nous avons utilisé un modificateur statique, qui type de données de chaîne à l'écran et lui attribue une variable de chaîne. La prochaine chose, c' est que nous avons notre Dame. Ensuite, ces ID de chaîne, c'est-à-dire les variables statiques des routes. Il est maintenant temps de l'appeler, car nous pouvons y accéder directement facilement et naviguer d' une page à une autre en mémorisant ce ClassName. Et maintenant, nous n'avons plus besoin de nous souvenir de cette corde. Et je vais encore et encore, ce que je veux dire par là. Encore une fois dans ce contexte, comme avant. ID de chaîne statique X est égal à contact. Ensuite, il suffit d' écrire l'ID de point de contact. Et si vous pouvez changer cela aussi. Maintenant, lorsque je passe au premier écran ici, je n'ai pas à écrire cette chaîne comme ce contact. Je peux simplement écrire contact et esthétique. Donc, méthode tactique, je peux simplement appeler l'ID comme ça. Voyez la différence. C'est une façon très claire d'écrire notre code et de gérer notre code. Je peux simplement dire illégal de contacter comme ça. Et tu vois, encore une fois, ça marche. n'y a pas d'erreur. Si nous utilisons cette approche. C'est à vous de choisir celui que vous préférez. Si vous regardez beaucoup de vidéos et de tutoriels, vous pouvez également rencontrer cette méthode, car c'est une préférence personnelle. Quoi que vous vouliez, vous pouvez le faire, Il n'est pas toujours nécessaire d'utiliser cette tactique, mais je vais certainement vous suggérer parce que lorsque vous avez beaucoup de routes, il est impossible pour vous de écrivez correctement chaque chaîne. C'est ça. Dans la vidéo suivante, nous en apprendrons plus sur la façon de transmettre des données entre deux écrans et de les afficher dans l'interface utilisateur. 23. Passer des données via les constructeurs: Jusqu'à présent, nous avons compris comment naviguer d'un écran à l' autre en utilisant une méthode normale et en utilisant une méthode nommée. Maintenant, c'est l'heure. Nous comprenons comment transmettre certaines données tout en naviguant définitivement dans une application. Et il y aura des scénarios. Ensuite, nous devons transmettre une donnée de la première vers le deuxième écran. Supposons également qu'il y une situation comme dans le deuxième écran, nous avons besoin du nom d'utilisateur de cet utilisateur, c'est le cas net. Nous ne voulons plus avoir une base de données qui appelle le deuxième écran, car elle prendra beaucoup de temps et prendra beaucoup de ressources. Il est préférable que si nous avons déjà les données dans le premier écran, nous transmettions les données au deuxième écran à ce constructeur. Comme nous le savons déjà, il existe deux types de constructeurs. Constructeur paramétré, constructeur de noms. Donc, pour accepter les données, nous devons d' abord créer une variable d'instance dans l'écran sur lequel nous naviguons. C'est un deuxième écran que vous pouvez voir et créer un constructeur dans cet esprit, qui accepte et attribue la valeur à la variable d' instance. Ce que je veux dire par là, c'est qu'on y va. Supposons que nous ayons cette crème contextuelle. Je vais simplement prendre ce deuxième écran. Ici. Tout d'abord, j'aurai une variable d'instance de nom de chaîne. Et puis je dois déclarer. J'ai mentionné un constructeur qui exceptera cette valeur et l'attribuera à Bouddha, nommé à cette variable. Mais définitivement, nous n'avons fait que ce constructeur. Je vais simplement supprimer celui-ci et créer un nouveau comme avant. Et il suffit d'écrire ce nom de point. OK ? Cette section est terminée. Maintenant dans le principal. Jack définitivement. Ici. Il est demandé que nous devions envoyer de la valeur. C'est donc mieux lorsque nous utilisons, car les fournisseurs utilisent des itinéraires nommés maintenant, ce n'est pas pour envoyer de valeur. Nous en discuterons également. Mais pour l'instant, je vais simplement commenter ce deuxième écran. Et maintenant, dans le premier écran, je vais utiliser la méthode push, pas la poussée nommée mon tour. Et vous pouvez voir dans cette méthode push, le deuxième écran en ajoute parce qu'il dit qu'il doit y avoir un argument inséré sur le deuxième écran qui accepte un argument. Je vais donc simplement l'envoyer parce qu' il s'agit d'un argument positionnel non d'un constructeur nommé, c'est une partitionnelle qui est la 0e position. Je vais simplement dire nom, nom, enfants. Maintenant, dans le deuxième écran, en état d'initialisation, je suis désolé, c'est une région apatride. Nous avons donc ce bouton pour contacter. Ici. Je vais simplement imprimer la valeur, qui est le nom. Et je vais l'écrire. Bon, voyons maintenant, est-ce que ça marche ? Sommes-nous en mesure d' envoyer des données d'un écran à un autre ? Découvrons-le. Apportez votre émulateur. Maintenant, allez au contact pour que ce soit bon pendant quelques secondes. J'espère que vous avez compris. Alors, quand je pars, nous avons maintenant ce bouton imprimé. Et quand je clique sur ce bouton, voir Bill Gates sur l'écran d'impression, nous pouvons voir cette valeur Bill Gates, qui a été envoyée depuis le premier écran. Donc, enfin, v sachez comment naviguer avec le paramètre de données. Mais maintenant, ce n'était qu'un argument positionnel. Même chose que lorsque nous transmettons des données à un constructeur de noms. Que ce n'est pas une chose très difficile , car nous l'avons encore refait. Tout simplement ce que vous devez faire. Allez sur le deuxième écran et faites-le simplement dans le constructeur de nom. Et vous pouvez donner requis car ce n'est pas un élément nul dans une valeur libérale. Maintenant, dans le premier écran, vous n'aurez plus à faire. C'est un paramètre de nom que de devoir écrire le nom qui est le support tel que nous l'avons mentionné ici. Et maintenant, je vais le nommer Elon Musk. Maintenant encore, vérifiez s'il fonctionne également avec le constructeur de noms. Lorsque je passe au deuxième écran et que je clique sur Imprimer, voir Elon Musk. C'était donc cette différence et depuis le début des sessions de points, vous devez savoir que la différence entre les paramètres du constructeur partitionnel et les paramètres nom a été mise en évidence à ce sujet encore et encore parce que c'est un concept très central. Maintenant, cette chose est morte. Au tout début, je supprime cette route nommée car elle affichait des ajouts. Tout simplement parce que si vous avez un itinéraire de nom et que vous souhaitez transmettre ces données, nous pouvons également envoyer des paramètres val1 naviguant, mais nous ajoutons simplement un argument à une carte en appuyant sur l'écran suivant. Vous pouvez voir ici avec l'exemple du navigateur point push contextes nommés, ID de point de contact. Ensuite, il s'agit d'un nouveau paramètre appelé arguments et il accepte la carte. Ici, la clé est nom et une valeur que j'ai donnée a une chaîne. Mais vous pouvez également avoir différents objets ou modèles personnalisés à l'avenir. Mais pour comprendre ce concept, vous devez voir comment cela se passe en faisant sortir votre éditeur. Maintenant, dans le premier écran, j'ai rempli Go and check in domain dot, dot. OK ? Et comme nous utilisons des routes nommées, je dois supprimer ce constructeur. Autrement dit, nous ne pouvons pas accepter de valeur comme celle-ci. Pour cela, quelles ont été les étapes ? L'étape 1 était ? Ici, vous passez simplement à la troisième position qui correspond au contexte le plus rapide. deuxième est le nom de l'écran. C'est l'ID de point de contact. Je vais contacter, mais j'aimerais passer au deuxième écran, donc je vais fermer le deuxième écran. Ici, nous pouvons filtrer. Si vous voyez le rouge, c'est ce paramètre d'argument appelé arguments. Et ici, vous pouvez simplement écrire le nom comme clé et valeur. Comme vous pouvez le constater, Mark Zuckerberg. Et je dis juste ici, supposons que j'envoie deux valeurs, fondateur, Facebook, d'accord ? Nous envoyons donc maintenant leur valeur, mais dans ce deuxième écran, nous devons l'accepter. Récupérez-le. Et pour récupérer les données. C'est le code dont vous devez vous souvenir qui est modélisé itinéraire. Beaucoup de contexte, de paramètres de points, d'arguments de points aussi. Souvenez-vous simplement de cela. Je vais tout d'abord vérifier si c'est nul. C'est-à-dire si la valeur est donnée ou non. Neck, ce n'est pas égal à null. Et ici, cela montrera un peu de rouge, de rose, car il ne peut pas y avoir accès inconditionnellement. Parce que cela peut évidemment être nul aussi. Donc, soit nous devons utiliser l'opérateur comme ça, ce qui signifie qu'il est blessé. Nous savons r, nous pouvons la VR, lui permettant de vérifier. Ce concept est récemment ajouté dans la non-sécurité. Donc ici tout d'abord, nous vérifions si ce n'est pas nul, puis oui, sauf le stocker dans une variable. Même chose. Copiez et collez. Et comme une carte. Vous devez donc écrire la carte dans l' ordre en tant que carte, sinon il s'agira d'un objet. C'est un objet, ce que nous disons Non, c'est une carte ici. Et puis écrivez simplement des arguments. La première clé était le nom, puis l'impression des arguments. Et la deuxième clé était la fondatrice. Nous allons vérifier encore une fois. Maintenant, depuis le premier nom d'écran et le bailleur de fonds, pouvons-nous l'imprimer ? Dès que nous passons au deuxième écran ? Allez sur le deuxième écran et découvrez Mark Zuckerberg et Facebook. C'est donc le V ofs qui transmet des données au nom drop. Notre plus tôt, nous avons appris à transmettre les données à un mode de navigation normal, qui est normal à travers la construction. Et la deuxième méthode consiste à utiliser un itinéraire de nom. Ici, nous devons nous assurer que nous nous souvenons des contextes de points de route du modèle. C'est un moyen d'extraire les valeurs de navigation vinyle. Par conséquent, la dernière chose qui ne passe pas la valeur est que nous pouvons également renvoyer une valeur lorsque vous revenez en arrière. Ainsi, du premier au deuxième écran, nous allons apprendre à transmettre des données. Mais il peut y avoir des scénarios où, à partir du deuxième écran, vous devez obtenir une sorte de conformation. Une sorte de succès, peut vendre le statut et ce qui entraînera ce changement dans ce premier écran. Pour cela, nous devons modifier la fonction post dans le premier écran pour nous assurer qu'elle attend la valeur en utilisant wait et transmet la valeur dans la fonction pop de ce deuxième écran. Ce que je veux dire par là, c'est que dans le premier écran, supposons que en poussant, le moment je n' envoie aucune donnée. Nous devons attendre. Donc, moi, le statut Boo est égal à attendre. Ce concept asynchrone et attend définitivement que nous apprendrons lors de la prochaine session. En ce moment. Vous vous souvenez juste ici que nous attendons cette valeur, cette fonction, que cette action soit terminée. Et ensuite, sur la piste, la valeur sera stockée dans cet état booléen. Et ici, je vais juste dire le statut de l'impression. Et maintenant, à partir du deuxième écran. Pendant que nous revenons en arrière, nous apprécions. Ici, je vais simplement écrire un contexte de Bob à points. Et puis ici, nous avons juste coupé ma relation vraie. C'est ça. Si simple que nous sortons de l'écran, nous devons envoyer cette vraie valeur. Maintenant, lorsque je passe au deuxième écran et que je clique sur, revenez en arrière avec la valeur c, true. Ceci est donc imprimé dès la première semaine car nous devons attendre. Il attendait que nous revenions du deuxième écran à l'écran. Et après cela, seul ce code a été exécuté comme asynchrone et l'attente est un concept très important. C'est ce qu'on appelle la programmation asynchrone. Et certainement dans la session ultérieure, nous allons approfondir cela car sans ce concept, vous ne serez pas en mesure de créer une application complète. Cette partie de navigation est donc terminée. J'espère que vous vous êtes amusé et que tous vos doutes étaient clairs. Essayez de créer de plus en plus d'écrans et de le pratiquer, car vous devez certainement vous en souvenir par cœur. Merci. On se voit lors de la prochaine session. 24. Widget de navigation avec tiroir: Dans cette session, nous parlerons du widget chalut, vous pouvez également dire qu'il envoie une barre de navigation latérale. Donc, si vous avez utilisé une application telle qu'Amazon, je suppose que la plupart de l' application comporte ces trois lignes ou sur l'icône de hamburger en haut. Lorsque nous cliquons dessus, barre latérale est livrée avec beaucoup d'options pour naviguer. Donc, en Floride, c'est un moyen très facile de le mettre en œuvre. Dans les applications qui utilisent la conception de matériaux, il existe deux options principales pour la navigation. Tout d'abord, les robinets. Autrement dit, si vous voyez l' exemple de ce que CEP, les onglets en haut, les chats appellent ces étapes. Et l'autre option est celle des tiroirs. Lorsque l'espace est insuffisant pour prendre en charge les robinets, pour offrir une alternative pratique, nous ne pouvons utiliser un tiroir qu' à l'intérieur d'un widget d'échafaudage. Vous devez donc vous en souvenir. Essayons ça. Allons au premier écran. Échafaudage Indus. Nous avons ce tiroir. OK. Il s'agit d'une syntaxe de l' écriture dans notre widget. Voyons s'il se passe quelque chose sur le premier écran. Voyez que cette icône de hamburger est arrivée. Ces trois lignes. Quand je clique dessus, nous avons ceci, cette navigation latérale apparaît. Mais comme nous n'avons rien à l'intérieur, il est vide. Mais j'espère que vous avez compris que nous n'avons qu'un seul code, nous avons pu le montrer dans l'interface utilisateur. Maintenant, à l'intérieur, il accepte un enfant. Je peux certainement, il y aura beaucoup d'autres laiteries, aura beaucoup de fuites d'opérations de navigation. Donc, là-dedans, nous allons utiliser supposons que la colonne ListView ne soit pas colonne. Et je vais vous montrer pourquoi nous n'avons pas choisi la colonne aussi. Mais pour l'instant, rappelez-vous simplement, sauf qu'à l'intérieur, il n'y a qu'une vue de liste. Et dans ListView, V peut avoir différentes options. Tout d'abord, je vais simplement vous montrer le style de liste avec une seule option de navigation. Dans ce Titan. J'aurai le texte du deuxième écran. Et sur la touche, je ne ferai rien pour l'instant, mais je vais juste enregistrer et vous montrer notre première option de navigation qui va au deuxième écran que vous pouvez voir sont juste des exemples Accueil Contactez-nous À propos de nous catégories, Quoi que vous vouliez, c'est à vous de décider. Donc, si vous vous en souvenez, notre en-tête aussi, si vous vous souvenez de Gmail Lab, il y a dans l'en-tête des détails des comptes tels que le profit d'un nom d'utilisateur pour booster. Vous pouvez le faire en utilisant un compte d'utilisateur, un compte utilisateur, dessinez notre en-tête. Ensuite, j'ai simplement mentionné ces choses. Le nom du compte doit être Elon Musk, le compte, e-mail peut être Tesla, et qu'il s'agit de .com. Il est très rare que vous n'utilisiez jamais la ressemblance d'un compte Gmail. Le troisième, nous pouvons l'avoir. Donc, photo de compte courant, j'utiliserai un avatar circulaire. Et à l'intérieur, vous pouvez avoir une image réseau, mais j'utiliserai simplement une icône. Voyons quelle est la sortie. Mais si vous avez une application Gmail avec vous en ce moment, il suffit d'ajouter Gmail et de montrer. Voyez cette navigation latérale comme fin. Vous pouvez comparer et voir. Nous avons également cette image de profil, ce nom d'utilisateur et cet e-mail utilisateur avec ce magnifique arrière-plan. Vous pouvez également changer d'autres choses. Mais pour l'instant, il vaut mieux rester simple. Parce que le flottement est très vaste et il y aura beaucoup d'arguments de propriétés à donner. Si vous voulez voir, je vais juste aller ici et dire Couleur de la flèche, touche marge sur les détails pressés. Ce sont d'autres options. L'IA dirigée me donnera une icône à regarder. Maintenant, ça ressemble à ça. Supposons que c'est la maison. Je vais copier et donner un autre deck comme il suffit d'écrire. Voir. Donc, avec cette navigation latérale, c'est vraiment beau. Je vais juste sauter une autre page d'accueil. Eh bien, chez vous et écrivez qui ici. Vous pouvez voir ce tiroir. Maintenant, il a l'air très professionnel avec principalement à cause de cet en-tête. C'est toujours génial. Et comme je l'ai dit, il y a aussi quelque chose appelé en-tête de tiroir, que vous pouvez essayer vous-même si vous le souhaitez. Et maintenant supposons qu'il ne s'agisse pas de ListView mais de la colonne, disons qu'il y ait quelque chose de changement. Dites non, rien n'a changé. Mais n'oubliez pas que si vous avez beaucoup de données qui sont encore là et qu'elles ne seront pas défilantes si vous utilisez une colonne. Donc, listez-le que nous l'utilisons lorsque vous avez beaucoup d'autres options . La colonne fonctionne très bien. Également. Allons maintenant naviguer. Vers l'écran d'accueil. Je me rapporte, je navigue, pousse. Dan sur la route. Nous aurons un constructeur de pages. Contexte. Le nom est l'écran d'accueil. OK. Allons vérifier. Avons-nous accès à l'écran d'accueil ? Vous voyez, nous sommes sur l'écran d'accueil. Maintenant. Vous devez prêter attention et comprendre ce qui se passe lorsque nous cliquons sur le bouton Retour en arrière. Lorsque nous cliquons sur le bouton Retourner, ce dessin est toujours ouvert, mais il n'a pas l'air bien. Il devrait être fermé comme ça. Bien loin, avant de passer par, il faut sauter. Nous devons écrire, naviguer vers le haut pour fermer le tiroir, puis passer au deuxième écran. Démarrez votre application. Maintenant, quand je vais à la maison, nous naviguons vers cet écran d'accueil, mais pas dans ce temps si je clique sur le bouton Précédent, il arrive correctement à l' écran d'accueil et non pas ce dessin ajouté parce que nous avons déjà fermé avec le navigateur Dot Pop. donc vous souvenir de cette chose car lorsque nous avons une application complète, vous ne voulez rien qui ne soit pas placé dans l'utilisateur. L'utilisateur s'agace ou quoi que ce soit, il faut l'éviter. Alors assurez-vous de prendre note de ces choses, car disposez-les plus tard au bout d'un mois, vous pourriez l'oublier. C'est ça. Tout est loin en bas et dessinez une partie. cette prochaine vidéo, nous parlerons de la navigation en bas. Merci. 25. Barre de navigation inférieure: Aujourd'hui, nous parlerons de la barre de navigation inférieure. Je le laisse si nous avons discuté de ce qu'est un tiroir et de la façon de le mettre en œuvre. Il s'agit donc d'une autre navigation très souvent. Et ce widget est utilisé dans la plupart des applications. Parce qu'imaginez que c'est l'écran et que dans cette zone qui n'est pas un côté inférieur, il y a certaines options qui sont des mosaïques, c' est-à-dire le contact à domicile ou les chats ou autre. Si nous cliquons dessus, ainsi le nettoyage sera modifié. C'est donc un widget très cool, qui a été donné par le framework Florida. Et nous pouvons facilement l'ajouter à l'échafaudage. Comme dans ce tiroir aussi. Il y a un paramètre dans l'échafaudage. Essayons par nous-mêmes. Et si vous voyez la syntaxe dans cet échafaudage, il y a cette barre de navigation inférieure, qui accepte une barre de navigation inférieure, rigide, qui comporte une paire. Le premier paramètre est l'indice actuel. Autrement dit, quel écran est VR à ce moment-là, à ce moment-là. Et le second est celui des objets. Quels sont ces éléments qui sont, c'est l'icône ou cela peut sauver ce que nous, ce que nous sommes sur le point de naviguer. , est-ce que les chats à domicile sont ce que nous voulons mentionner dans l'interface utilisateur ? Et le troisième est sur le robinet. C'est ce qui devrait se produire si quelqu'un appuie sur cette option de navigation. Habituellement, nous devons changer cet écran. Et ici, dans la section Notes, vous pouvez voir qu'il devrait y avoir plus d'un élément de la barre de navigation inférieure pour que cela fonctionne. Évidemment, si les autres éléments multiples ne font que pécher la navigation. Pour une option, pourquoi quelqu'un utilise une barre de navigation inférieure ? Cela ne sert à rien. Ici, sur l'image, vous pouvez voir de quoi je parle. C'est ce que nous sommes sur le point de construire. Sortez votre code VS. Et maintenant, OK, nous ne l'avons pas fait. C'est l'erreur due à la chose booléenne. Rien de plus. Puisque vous avez déjà mentionné que nous avons besoin d'une valeur booléenne. Commentaire, grillage. Et ainsi, l'échafaudage utilisera la barre de navigation inférieure. Et le nom d'un widget est la navigation en bas, mais il contient maintenant des éléments. Index actuel pour l' instant, nous allons simplement dire 0 éléments. Je vais avoir une barre de négation. Je ne sais pas comment donner une icône. Je devrais l'être. Nous utiliserons étiquetés car l'idéal est d'être déprécié et que l'étiquette accepte la chaîne. Tout droit à la maison. De même, les jours et collez deux fois, disons que vous pouvez et finira ici. Et quand supposons que vous puissiez faire un cauchemar, je garderai les choses simples. Et nous allons juste dire, d'accord. Et la prochaine est là-dessus. Ce qui donne, qui est une fonction qui nous donne un index. Je vais simplement imprimer l'index pour l'instant et voyons ce qui a été fait. Voir les utilisations des contacts à domicile. C'est tellement beau. Lorsque je clique sur Contact, l'index est 1. Lorsque je clique sur Utilisateurs, l'index est deux. Lorsque je clique sur OK. Whoa, l'indice est 0. C'est donc de ça que je parle. Avec cet indice. Nous allons maintenant faire les modifications afin que chaque fois que quelqu'un clique sur contact, il devrait aller sur la page de contact. Ou vous pouvez dire ici que la page de contact sera créée. Non, nous ne naviguons pas directement, mais ici seulement sur cet écran, seules les pages Alda que nous verrons. Maintenant, ce que nous devons faire. Nous avons une deuxième rate. Nous avons un écran plein écran. Votre écran. Vous allez simplement à l'écran et en haut, moins ont un entier égal à 0. Le deuxième devrait être une liste de pages. Ici. Que ne devrait-il pas arriver ? Nous devrions écrire toutes les pages dont nous avons besoin. Donc, il faut d'abord supposer que l'écran est un contact. Et le troisième est celui qui est mon état plein écran. Mon état en plein écran. D'accord. Nous avons toutes les pages ici. Maintenant, finissez simplement corps. Ici, dans le corps. Je vais tout supprimer et écrire des pages. Alors l'indice est au tout début, c'est toujours le cas. Mais quand quelqu'un clique sur quoi que ce soit, ça devrait changer. C'est l'état, l' état devrait changer. Et pour cela, nous devons en faire une vision complète de l'État. Maintenant, c'est un widget avec état. Quand quelqu'un appuie sur cette navigation particulière, dit un état de l'index 2, cet index que nous obtenons le d 0, 1, 2, 3. Alors, vous pensez peut-être, pourquoi ? Quel est le besoin ? Je vais vous expliquer encore une fois. Nous avons une liste de pages, un poste dans l'école à domicile, puis un contexte de position propre et pour positionner mon écran dynamique. Et nous avons une variable appelée index, qui commence par 0. Ainsi, au tout début, l' écran d'accueil sera toujours affiché lorsque quelqu'un démarre notre application. Parce que dans ce corps, nous avons ces pages et l'index est 0. Maintenant, chaque fois que quelqu'un clique, il faut appuyer sur n'importe lequel de ces éléments de la barre de navigation inférieure. Qu'il s'agisse d'un contact faible ou autre, son indice va en prendre un. Et cet écran s'affichera. Sortez l'émulateur et voyez que nous avons ce contact. Nous avons cette maison, et nous avons ces utilisateurs. Alors, quelle école à domicile ? C'est la maison de Sibelius. Changez l'écran et l'écran comme ceci. Maintenant, l'écran d'accueil est correctement. Et les utilisateurs, nous avons toute la liste. Maintenant, je ne veux pas 2 de cette partie d'application. Donc, ce que je peux faire soit je peux retirer la barre AB de l'écran, c'est le premier écran. Apportons à nouveau notre application. Disons que c'est bien mieux. Maintenant, quand je change au bar, ça change. Mais ça, c'est très joli. De plus, vous pensez peut-être pourquoi cette couleur ne change pas, car nous n'avons pas mentionné cet indice ici. Nous venons de lire 0. Mais ici, nous devons écrire cet index variable. Et puis réessayez. Maintenant, cette chose bleue, couleur bleue sera affichée sur tout ce que nous cliquons, Voyez maintenant le contact est bleu. Maintenant, lorsque nous cliquons sur les utilisateurs, cela est mis en surbrillance. Il a l'air très bien. Nous avons maintenant une interface utilisateur très basique, au moins. Nous avons appris comment fonctionne ce dessin, comment fonctionne la navigation inférieure, comment naviguer d' un écran à un autre. Dans ce module, nous avons donc beaucoup appris. Dans le prochain module, nous aborderons d'autres concepts de Flutter Framework. D'ici là, entraînez-vous simplement et assurez-vous de comprendre tout le code par votre cœur. Merci. 26. Plonger profondément dans le widget TextField: Dans ce module, nous parlerons de la vierge TextFile. V va entrer très profondément dans ce widget car c'est le seul widget que nous utiliserons intensivement pour gérer les entrées des utilisateurs. Dans n'importe quelle application. Il faut le faire. Nous devons prendre quelques commentaires, soit le nom d'utilisateur, le mot de passe, ce qu'ils aiment, ce qu'ils n'aiment pas, quel que soit l'âge. textfield est donc une région très importante. Qu'est-ce qu'un champ de texte ? Je pense que nous en avons déjà discuté. remplissage de textes en Floride est le widget le plus couramment utilisé qui permet aux utilisateurs de collecter des entrées depuis le clavier dans une application. Il s'agit donc d'un extrait de code qui est la syntaxe de la façon d' afficher un champ de texte. Il a certaines propriétés comme toujours, décoration, bordure et bien d'autres. Donc, pour commencer. Et ce que j'aimerais faire, c'est que j'aimerais supprimer les écrans précédents car je ne veux pas beaucoup d' écrans à l'heure actuelle. Si vous ne le voulez pas, vous pouvez simplement les laisser tels quels. Mais comme c'est un nouveau module, je retirerais tout simplement. Nous avons ce dossier principal. Je vais créer un nouveau fichier hors page, point, point. Comme toujours. Je vais juste créer cette date moins rigide de la page d'accueil. Et nous aurons cet écran d'accueil. Commençons par cet échafaudage. Utilisez l'entrée. Et dans la partie aura un assistant de colonne v dont l'alignement de cellule principal existe. L'alignement sera au centre. Et les enfants. Maintenant, dans ces enfants, j'aurai ce champ de texte. Car avec cette propriété de déclaration, nous pouvons donner des décorations telles que ce qu'il faut faire, ce que représente ce TextFile. Avec ce texte de niveau. Vous devez écrire son nom. Et bordure. Je veux décrire la frontière. Rechargeons notre application et sauvegardons la sortie. Pour vérifier cette sortie. C'est un écran basique. Nous avons rempli le texte en bas. Également. J'aimerais envelopper cette colonne avec un widget de rembourrage afin que nous ayons un peu d'espacement tout autour et que cela semble un peu décent maintenant. De plus, si vous le souhaitez, vous pouvez envoyer deux de l'APA. Assurez-vous de vous souvenir de ces propriétés en vous entraînant. C'est pourquoi je vous suggère d'écrire des écrans à chaque fois par vous-même, afin qu'à la fin du cours, vous apprendrez tout ce code. Souvenez-vous donc de tous ces codes par cœur, et vous n'avez pas à vérifier encore et encore. Nous avons donc maintenant ces textes remplis de dommages. Mais nous devrions savoir comment récupérer la valeur de ce texte. Maintenant, si j'écris, il devrait certainement y avoir code pour récupérer la valeur du champ de texte, dont nous parlerons dans la prochaine vidéo. Merci. 27. Ajouter un contrôleur de texte: Aujourd'hui, nous allons apprendre comment récupérer la valeur d'un champ de texte. Nous avons déjà ce texte. Mais au moins, nous devrions savoir comment obtenir w, quel que soit le type d'utilisateur. Pour cela, nous utiliserons la méthode du contrôleur. Quelles sont les étapes ? La première étape consiste à créer un contrôleur d'édition de texte comme celui-ci. Ici, vous pouvez voir que nous avons un type d'édition de texte qui peut collecter. Ensuite, le contrôleur signifie que c'est le nom de la variable, qui est égal au contrôleur d' édition de texte. Maintenant, attachez ce contrôleur d'édition texte au champ de texte. Dans ce champ de texte, la zone est définitivement une propriété appelée contrôleur, dont la valeur doit être un nom de contrôleur sombre. Maintenant, la troisième consiste à récupérer la valeur du champ de texte à l' aide de la méthode de texte à points fournie par le contrôleur d' édition de texte. Vous pouvez donc voir ici que cela produira W, c'est-à-dire que lorsque nous écrirons le nom de ce contrôleur d' édition de texte, puis point txt, il affichera la valeur de chaîne. J'espère donc que vous avez compris les étapes de l'utilisation d' une foulée d'un kilomètre par nous-mêmes. Donc ici, tout d'abord, je vais définir ce contrôleur d' édition de texte et le nommer comme contrôleur, qui équivaut à contrôleur d' édition de texte. D'accord ? La première étape est faite, c' est-à-dire ce contrôleur txt et fin créé. Deuxièmement, ce film sombre de Controller 28 textes. Nous avons ce champ de texte ici. Voyons voir s'il y a une propriété appelée contrôleur ? Ici ? Il s'agit du contrôleur de nom de propriété qui accepte une valeur de contrôleur d'édition de texte. Et notre apprentissage s' appelle les contrôler. D'accord ? Maintenant, cette troisième étape est la valeur du champ de texte en utilisant le point txt. Maintenant, nous allons d'abord en dessous du texte pour quand nous devrions avoir un bouton surélevé et laisser une date. Et chez cet enfant, je vais simplement écrire des imprimés. Et surélevé. J'imprime. Quel est le nom du contrôleur ? Contrôleur de noms et point txt. D'accord. Recommençons par le nom. Je veux dire, c'est vrai. Jeff Bezos. Et il suffit de cliquer sur Imprimer et de voir dans la console de débogage, vous pouvez mettre tout ce que j'ai dans le champ de texte. Également. Si vous souhaitez l'afficher à l'écran. Dix, nous pouvons simplement faire de cette page d'accueil un widget avec état. Et ce contrôleur de noms. Nous pouvons l'avoir quelque part ici. Au-dessus de ce texte, il suffit d'écrire le nom du contrôleur de points style x et d'avoir une taille de police de la police, de la police, du poids, du gras et des lays, point. Qu'est-ce qui est bon. Et de même, comme le OK. Et maintenant, nous avons juste ces tests. C'est ça. Essayons ça. Cela fonctionne-t-il ou non ? Maintenant, si j'écris Elon Musk et que je clique sur Print C, nous pouvons produire ce que nous avons écrit dans l'interface utilisateur cette fois et non dans la console de débogage car nous utilisons l'état défini. C'est juste que je veux juste que vous pratiquiez cela encore et encore et compreniez à cause de cet état d'incrédulité et Chen a été appelé à nouveau. Et maintenant, ce texte a cette valeur d'Elon Musk. Une autre façon de récupérer la valeur est que nous pouvons laisser une variable appelée chaîne, name est égale à mt. Supposons. Et dans ce champ de texte, nous pouvons simplement écrire sur les modifications. Et ici, nous avons la valeur. Et cette valeur, ceci, quel est le nom ? String est le nom doit être appelé pris pendant que vous, c'est tout. Et nous pouvons également envoyer des tests. Nous pouvons juste définir cet état. Et ici, le texte doit être simplement une variable de nom. Il s'agit d'une autre façon de récupérer la valeur du champ de texte lors de la modification. Mais la plupart du temps, les gens utilisent le contrôleur d'édition de texte au lieu de cela inchangé. Mais ce n'est pas comme si vous ne pouvez pas l'utiliser. Je vais simplement écrire mon nom comme qui était. Il y a très bien. Personne ne me vient à l'esprit qui présente simplement Bill Gates. Mais vous voyez, lorsque je tape, il met à jour l'interface utilisateur car sur la chaîne, c'est comme chaque fois que nous cliquons sur un clavier, un alphabet ou chaque fois qu'il est modifié, tout l'écran sera reconstruit. C'est ça. Voici donc les deux façons de récupérer de la valeur. La plupart du temps, le contrôleur d'édition de texte sera inchangé et nos autres capteurs d'option, tels que sur le pays d'édition, complétés le moment soumis. Ce sont également d'autres moyens d'obtenir W. Si vous voulez en savoir plus, vous pouvez également effectuer une recherche. Mais je vous ai appris le plus, le plus, utiliser le plus d'application ou la meilleure façon de récupérer la valeur du champ de texte. Merci. 28. Valider l'entrée utilisateur: Au cours de cette session, nous parlerons façon de valider les commentaires d'un utilisateur. Mais avant cela, vous devez comprendre un nouveau widget appelé widget de formulaire. implication d'un formulaire vierge dans votre application facilite simplement la validation d' une réinitialisation et l'enregistrement de plusieurs champs de saisie à la fois. Et n'oubliez pas que nous utilisons le champ de formulaire de texte du widget à l'intérieur du formulaire plutôt que des textes. Nous sommes donc là, nous utilisons du texte testament. Mais puisque nous utiliserons complètement la forme à partir de maintenant. Nous devons donc utiliser ce formulaire de texte rempli avec lui. Donc, ce que nous devons faire, nous allons tout simplement d'abord supprimer ce nom et OnChange. Ensuite, pour que le widget de formulaire fonctionne il suffit d'envelopper cette colonne avec le budget. D'accord ? Cette partie est terminée maintenant. Et ce champ de texte doit lire le formulaire de texte rempli. Cela est également fait. La prochaine partie est maintenant la validation des formulaires. Donc, si vous créez une application, est-ce que si vous recevez des commentaires de l'utilisateur, il est très nécessaire que vous validiez les entrées ? Parce que supposons que vous ayez un mot de passe qui doit comporter au moins huit caractères et que l'utilisateur ne tape que quatre caractères, alors nous ne devrions pas lui permettre qu' un numéro de téléphone soit d' au moins 10 chiffres. Il ne peut pas simplement sélectionner neuf chiffres et donner un faux numéro à notre application. Donc, pour nous assurer que ces adders ne se sont jamais produits avec nous, nous aurons des règles de validation de formulaires très strictes. Donc, pour valider une ferme en flottement, nous devons mettre en œuvre principalement trois étapes. La première étape est utilisée comme widget de formulaire. Nous prenons la clé mondiale. Quelle est donc cette clé mondiale ? Rappelez-vous simplement que c'est une sorte d'état que nous allons combiner ou vous pouvez dire que nous allons donner à la ferme afin que nous sachions plus tard quel est le statut de l'entreprise les validations fonctionnent. correctement ou pas pour cela. C'est juste une syntaxe dont nous devons nous souvenir. Ce n'est pas très compliqué. Je vais juste lui donner le nom de variable de clé étrangère et le définir sur bleu volumineux. Et puis ici, l'état de la forme. Il s'agit de la syntaxe qui consiste à attribuer une clé d' état globale et à la copier. Et dans le champ de la ferme, vous aurez cette propriété appelée clé et collez-la ici. De cette façon, vous pouvez vous assurer que Lou volumineux et votre téléphone sont connectés. La première étape est maintenant terminée. Deuxièmement, l'utilisation de textes de n'a pas réussi à donner à l'entrée remplie de la propriété validator. Il y a donc cette propriété millilitre que nous devons utiliser. Bon, nous allons le faire. Et la troisième étape est créée par 10 pour valider le champ de batterie et afficher l'erreur de validation. D'accord, nous allons d'abord faire l'étape 2, laquelle une règle de validité est attribuée au formulaire de texte. Pour l'instant, nous devons utiliser la fonction validateur dans ce texte amusant pour valider les propriétés d'entrée si l'utilisateur donne la mauvaise entrée. La fonction validateur renvoie une chaîne contenant un message d'erreur. Sinon, la validité de la fonction renvoie null. Allons dans le champ du formulaire de texte. Ici. J'aurai simplement cette propriété de validateur, qui est une bonne valeur Shen Dao, quelle que soit la saisie. Ici, je vais simplement vérifier si la file d'attente est vide. Vous pouvez également dire si la valeur est égale à. Maintenant, comme ça. Vous pouvez maintenant voir la chaîne vide comme celle-ci. Ensuite, j'ai gagné. le champ tournant est obligatoire, sinon, renvoie null. Alors, d'accord, et ensuite l'étape suivante de la loi tactile était de créer le bouton que nous avons déjà fait, qui le valide. Formulaire rempli. Voici donc le code dont vous vous souvenez, mais il est temps d'utiliser la clé étrangère. Je vais simplement écrire Qi dot state dot valider. La date actuelle validate par point est égale à true. Vous pouvez dire : Oui, je vais simplement écrire, imprimer. Soumettez 10 sexes pour Li k est mort. Tout d'abord, Stefan. Et je ne soumettrai pas d'impression. Il a l'air professionnel. Dans une chaîne vide. Si je clique sur Soumettre, voir Phil est obligatoire. C'est donc la validation dont je parlais. C'est très important car, lorsque vous disposez d'un formulaire de connexion ou d'inscription, vous devez montrer à l' utilisateur ces messages d'erreur sous forme de commentaires car l'utilisateur ne veut pas simplement rester sur son écran et ne faites rien. Et si j'écris flirté puis que j'imprime Submit, vous pouvez voir des entreprises que nous avons faites avec succès. Donc oui, c'est ainsi que vous validez le champ de formulaire. Vous pouvez également avoir plusieurs champs de formulaire. Je vais simplement vous montrer un formulaire de plus. suffit d'écrire simplement le nom mot de passe et le mot de passe ou est-ce une commande acquise ? Non, je vais juste lui donner une longueur. Longueur du point de valeur inférieure à trois. Si la longueur du point de valeur est inférieure à 3 et que nous obtenons mot de passe devrait être supérieur à trois. Réalisateurs. Maintenant, j'ai un nouveau formulaire x gratuit, mais cette clé étrangère, cette police suffit à valider à la fois ce champ de texte et aussi pour le deuxième champ de texte, nous devons créer un autre contrôleur d'édition de texte, qui sera nommé contrôleur de mot de passe. Je vais simplement le copier et le coller ici. Maintenant, si j'écris le nom flirté, mais que le mot de passe je ne donne que 12 caractères, alors voir le mot de passe doit comporter plus de trois caractères. Maintenant, si j'ai quatre caractères et que je clique sur Envoyer, le formulaire a été envoyé avec succès. Mais c'est ainsi que vous validez plusieurs champs à la fois à l'aide de la clé de formulaire. Et ce n'est pas le cas, nous utilisons ce widget pour valider les champs de formulaire ou vous pouvez dire des champs de texte. Maintenant, un autre concept que vous devriez connaître RE, qui pourrait vous être utile est de sauver une entreprise. Lors de la création d'une application, nous souhaitons probablement enregistrer les données du formulaire pour faire quelque chose avec cela. Dans cet ensemble, nous allons simplement créer des règles d'enregistrement pour d'autres champs. Et quand nous appellerons l'Ancef mon père, il exécutera ces trois règles. Ce que je veux dire par là, c'est dans ce champ de texte, en dehors du validateur, que nous avons perdu sur sauvegardé. Et je vais simplement imprimer ici. Je vais simplement imprimer un nom. Le champ est enregistré. Et dans leur validité qui est isolée sur sauvegardé et imprimé. Le champ Mot de passe est enregistré. Et pour nous assurer que ce code ou cette fonction est exécuté, nous écrivons simplement une clé étrangère, point courant état point save. C'est ça. Vous en aurez peut-être besoin quelque part. C'est à vous de choisir. Mais au moins, vous devez savoir que ces concepts sont également là. Quand nous entrons dans l' application et de couleur grise, je vais 2345. Et cliquez sur Soumettre. Voir nymphal le même mot de passe pour enregistrer les listes, puis les formulaires soumis avec succès. Donc ici, nous venons d'imprimer le début de la valeur, mais il peut être utilisé pour attribuer la valeur deux variables, r et faire un appel réseau sur ce qu'ils étaient SET, fait état ou ce que vous voulez, c'est à vous de choisir. Mais chaque propriété ou chaque méthode est utilisée à une certaine fin. Et maintenant, c'est à un développeur ce qu'il veut et ce qu'il ne veut pas. Mais j'espère que vous avez compris comment valider un champ de formulaire et vous assurer que l'utilisateur ne saisit pas ce qu'il veut. Au cours de la prochaine session, nous parlerons davantage ce champ de texte et de ses propriétés. Mais d'ici là, j'espère que vous apprécierez. 29. Décoration et autres propriétés: Jusqu'à présent, nous avons appris comment utiliser les fonctionnalités des champs de texte, comment valider, comment enregistrer et quoi que ce soit. Mais maintenant, nous allons le faire paraître bien. Ainsi, pour la décoration, les textes réutiliseront la propriété de déclaration, qui prend une décoration d'entrée comme valeur. Essayons ça. Nous avons donc ce champ de texte hors nom. Ici. Nous avons déjà cette propriété de déclaration qui accepte la décoration d'entrée sa valeur. Donc maintenant, tout d'abord, il s'agit du texte étiqueté, que nous avons utilisé pour donner des informations à l'utilisateur. Maintenant, je vais devoir supprimer ça. Et le second est le texte de l'indice. Il s'agit donc d'une solution. Je vais donc juste écrire votre nom. Bon, voyons voir. Vous pouvez voir tout d'abord utiliser les propriétés d'indice et de niveau pour donner des informations à l'utilisateur. Maintenant, quand je clique sur le nom, vous pouvez voir qu'il y a cette chose supplémentaire. C'est vrai, votre nom complet. Donc, quand nous écrivons quelque chose, il est supprimé. Et quand il est vide, il est de nouveau affiché. Deuxièmement, vous pouvez ajouter des icônes en utilisant je peux préfixer, je peux ajouter un suffixe, je peux ajouter des propriétés de la décoration d'entrée. Ce que je veux dire par là, c'est dans la déclaration d'entrée, tout d'abord, je vais vous montrer. Je peux le faire. Je peux, je peux commencer. Maintenant. D'accord. Jetez un coup d'œil. voyez, vous avez cette icône ici. Maintenant, quand je dis le préfixe d'une canette, c'est la même chose sur Linden Lu qui est bordée, s'étend. Il vient à l'intérieur de la frontière. Lorsque nous écrivons un préfixe et un suffixe, je peux le faire. Nous avons cette icône sur le côté droit. C'est donc la seule différence. Rien de plus. Mais il y en a définitivement, cette icône lui donne beaucoup d'efficacité et d'apparence, j'aime bien ce préfixe, donc je vais le laisser avec ce préfixe que je peux. D'accord. Le suivant. Vous pouvez également donner de la poudre pour l'ajout productif, supprimer à ce sujet avec un champ de texte. Donc en ce moment, si nous n' écrivons pas ou ne donnons aucune belle propriété, alors en bas se trouvent le troc vers le bas est déjà jours par défaut, vous pouvez également supprimer cela. Pour supprimer cela, nous devons simplement écrire des entrées, des hamburgers et des sauvegardes. Et voyez que c'est en dessous de la frontière. Mais si vous êtes comme moi, c'est que j'aime toute la frontière. Notre paramètre d'entrée de plan est donc la valeur que nous devons lui attribuer afin qu'il ait une bordure de tous les côtés de celui-ci. Et c'est très joli. Et aussi, je voudrais donner un peu d' espacement entre les textes, remplir un formulaire de texte adapté à ce que je serai appelé psi squawks. C'est juste des cadeaux et, euh, donnez-lui une hauteur de 20. Il y a donc cet espacement entre les deux textes, les champs de ferme. Maintenant, la troisième déclaration que nous pouvons utiliser est d'utiliser des textes d'aide. Si vous ne voulez pas d'étiquette, mais que vous souhaitez que l'utilisateur affiche un message persistant. Ce que je veux dire par là, c'est que dans ce formulaire de texte de mot de passe rempli, j'aurai simplement le texte d'aide et le mot de passe. Patron, plus de trois. D'accord. D'accord. Vous avez vu des textes étiquetés, vous lui avez vu des textes. Voyons maintenant quels sont les textes d'aide. Et voyez ici, c'est toujours là. Si je clique sur le mot de passe, il apparaîtra également ici, il ne sera pas supprimé. C'est donc une bonne chose de s' assurer que l'utilisateur ne fait aucune erreur parce qu'il ne sait peut-être pas que votre application, sauf le mot de passe sur légalement puis trois caractères dans ce cas détenaient. La propriété Text est très pratique. Maintenant. Ensuite, vous pouvez également modifier les propriétés du clavier pour TextField. C'est-à-dire que les types sont les textes d'entrée, type d'entrée, le texte, c'est-à-dire le clavier normal, puis le type d'entrée de texte, le numéro de point adresse e-mail numérique, le clavier normal, nous, nous tendons au signe de taux, date, heure, puis multiligne. Par exemple, j'aurai un nom, supposons alors un nom. Et rappelez-vous que ce type de clavier est des propriétés en dehors de la déclaration d'entrée ici. Et il y a un type de clavier, texte, un numéro de point de type entrée, et c'est tout. Et je dirai, et quand je clique sur Nom maintenant, ce clavier numérique apparaît. Cela est donc utilisé lorsque vous demandez de l' âge ou que vous pouvez enregistrer principalement un numéro de téléphone. Pour cela, vous devez utiliser cette technique de clavier. Maintenant, quelle est la signification de ce texte obscurcissant pour masquer texte dans si TextField définit la propriété skirt text sur true, nous l'utilisons principalement dans un champ de mot de passe. Donc définitivement, vous savez, quand l'utilisateur est et pendant son mot de passe, nous ne voulons pas qu'il soit dans les alphabets normaux. Nous voulons le cacher. Pour cela, il suffit d'aller dans le champ du formulaire de texte en dehors de la déclaration d'entrée, n'est-ce pas ? textes obscurcis et je viens de dessiner. Et sauvegardez-le. Maintenant, quand vous allez dans le bus rempli de liquide et que vous tapez f, l, vous les urgences. Vous pouvez donc voir que le mot de passe est caché, il ne fait que des points et non pas l'alphabet approprié. C'est donc une bonne pratique car l'utilisateur remplit également ce que vous êtes, que cette application est sûre à utiliser. Maintenant, la propriété suivante ou le champ de texte de l'entité suivante contrôle le maximum de caractères, Codex Wilkin les contrôle, les numéros de caractères de Mac, un terme à l'intérieur. Donc, si vous le savez intuitivement , est-ce que c'est notre limite ? De la même façon ? Nous pouvons avoir cette limite. Supposons que dans le champ Nom, nous puissions simplement écrire une longueur maximale de 15, c'est-à-dire plus que cela. Le nom de la personne sera très clair. Je vais donc dire ici que c'est un alphabet numérique. Mais depuis que vous avez mangé 15, si j'essaie de le franchir, non. Plus que ça, je ne peux pas taper. J'espère donc que vous avez compris les propriétés ou la déclaration de ce champ de texte. La même déclaration peut être utilisée dans champ de formulaire texte lorsque nous utilisons également un widget de formulaire. Donc, j'ai écrit que vous voulez savoir comment travailler avec des fichiers texte. Dans la vidéo suivante, nous allons découvrir quelques nouveaux widgets tels que les alertes, boîtes de dialogue et les snack-bars. Donc d'ici là, continuez à vous entraîner. 30. Widget de dialogue Alerte: Dans cette session, nous parlerons la nouvelle version appelée la boîte de dialogue d'alerte. Une boîte de dialogue d'alerte est donc une fonctionnalité utile qui définit l'utilisateur avec informations importantes pour prendre décision de fournir la possibilité de choisir une action spécifique. Donc, en termes simples, si vous voulez donner quelque chose comme une alerte contextuelle, l'utilisateur doit sélectionner oui ou non conforme à ces 10, nous pouvons utiliser une boîte de dialogue d'alerte. Quelles sont les principales propriétés de la boîte ? Ce sont des actions. Il s'agit de l'ensemble des actions affichées en bas de la boîte de dialogue. Généralement, les boutons, que j'ai déjà esquissés sont Canson, je suis d'accord Ce genre de boutons resserrent ensuite que j'ai adoré que cette boîte de dialogue s'affiche dans une grande police et le haut de la boîte de dialogue dans des mots simples, supposons, êtes-vous sûr ou un avertissement sont importants ? Ce type de mots-clés, puis de contenu. Cela donne une description du message sur le titre que vous aurez fourni. Donc, cela peut être simplement comme, êtes-vous sûr de vouloir désactiver votre compte, puis à partir des actions que vous pouvez avoir une estimation, messagerie instantanée ou non, c'est juste un scénario que je dis. Ensuite, simplement la couleur d'arrière-plan ou l'allégement. Par conséquent, pour afficher une alerte, vous devez appeler la fonction show dialogue, qui contient le contexte et la fonction générateur d'éléments. Vous pouvez donc voir ici que la syntaxe montre le dialogue, puis les contextes, les contextes réels des accepteurs et leur facture. Il existe une fonction qui renvoie une boîte de dialogue d'alerte. Essayons par nous-mêmes. Dans la dernière vidéo, nous l'avons fait jusqu'ici. La validation des fournisseurs est désormais vraie et le formulaire est enregistré. Ensuite, nous pouvons afficher un dialogue comme afficher la boîte de dialogue. Et ensuite, dans ce contexte, il s'agira de contexte. Mais le constructeur, cher Will we fonctionne, qui renvoie un dialogue d'alerte. OK ? Donc, dans la boîte de dialogue d'alerte, cette propriété titre, je vais utiliser comme 10 Q. Supposons. Ensuite, dans ce contenu, j'écrirai ce texte à partir du texte soumis avec succès. Soumis avec succès. Ensuite, dans ces actions, c' est-à-dire de l'eau, les boutons que je voudrais fournir sont une sorte d'action qu'un utilisateur prendra à partir de cette boîte de dialogue d'alerte. Je n'aurai pas de SMS, désolé. J'aurais un bouton surélevé qui écrira du texte. Et tout simplement K. Et après l'utilisation, cliquez dessus, d'accord, je veux que ce dialogue disparaisse, ça apparaisse. Habituellement, ce que vous pouvez faire est comme cela. Vous pouvez ensuite naviguer vers un autre écran. Ou si vous avez un bouton Annuler, alors cette fonction de point-pop de navigateur que vous devez utiliser pour que l'utilisateur de nouveau, cela supprime cette boîte de dialogue de l'écran et revienne à l'écran précédent. Voyons le nom. Je vais écrire flirt et mot de passe 123456. Ensuite, soumettez-vous et voyez ceci. Je parlais de ce genre de pop-up avec ce titre. Vous avez 10 Q et définissez le contenu ici. Et lorsque je clique sur ce bouton OK, voyez que cette boîte de dialogue ou cette boîte d'alerte disparaît. Et en plus des actions, sont les propriétés qu'il accepte. Il y a allégement, sa couleur de fond. Si vous écrivez des couleurs d'arrière-plan, accentuez, puis ajoutez un remplissage autour de ce contenu. Et voyez, vous pouvez donner un empilement intitulé en ajoutant un hibou dans cette forme, vous pouvez avoir une bordure rectangulaire arrondie ou n'importe quoi du genre. Vous pouvez donc avoir une bordure ronde puis Googler, un rayon de bordure. refroidisseur de configuration à rayon de bordure recevra 10. Revoyons à nouveau ce que cette couleur et cette forme d' arrière-plan apportent à notre boîte de dialogue d'alerte. Connaissant alors le nom, je laisserai flotter à nouveau, mot de passe 123456. Maintenant, lorsque je clique sur Soumettre, voyez que la couleur est rouge et que les bordures sont très belles ici parce qu'elles sont entourées. Vous pouvez donc dire qu'il peut s' agir d'une alerte indiquant que quelque chose a mal tourné ou chose du genre. C'est à vous de décider. Et si vous cliquez ailleurs ailleurs, la boîte de dialogue d'alerte disparaît également. Ce n'est donc pas toujours nécessaire. Nous pouvons, si nous le voulons, nous pouvons également nous assurer que cela ne se produise pas. Mais je suppose qu'il y a une autre propriété pour cela. Si vous voulez en apprendre davantage à ce sujet, vous pouvez simplement explorer vous-même. Mais une base, nous avons maintenant appris comment utiliser un dialogue d' alerte de base dans notre application flotter. Dans la prochaine session ou dans la prochaine vidéo, nous parlerons également d'un nouveau widget, le snack-bar. Merci. 31. Afficher Snackbar: Au cours de la session précédente, nous avons parlé de dialogue. Dans cette session, nous parlerons donc nous parlerons d'un nouveau widget appelé widget snack-bar. Le widget Snack Bar est utilisé pour afficher un message court. Il est généralement affiché en bas de l'écran. Et aussi, un satané message s' affiche pendant une très courte période de temps. Et l'heure spécifique du fournisseur a et du fournisseur est terminée, elle disparaîtra de l'écran. Donc, lorsque nous utilisons le snack-bar, cet utilisateur n'a pas à agir dessus. Plutôt pas d'interrompre son application juste mais quand nous utilisions la boîte de dialogue d'alerte, cela nous donne une pop up hip up. Ainsi, cet utilisateur, quel que soit l'écran sur lequel il travaillait, sera interrompu. Mais la collation, mais elle est très légère et elle vient et va. Elle est envoyée. Cela ne rend pas l' expérience mal à l'aise, prête, désagréable pour l'utilisateur. Il s'agit donc de la syntaxe. C'est un snack-bar basique, puis du contenu. Ici, le contenu accepte une vierge comme valeur, qui est généralement des textes visités. Maintenant, comment afficher un snack-bar ? Pour afficher la barre de collation v, vous devez utiliser ce code qui est échafaudage messenger point hors contexte. Et après cela, nous pourrons montrer un snack-bar. Essayons ça. Maintenant. Je commenterais tout d'abord cette boîte de dialogue. Et ici, je vais nous montrer snack-bar avec simplement échafaudage, messenger dot off contexte point C. Ici vous avez show snack bar. Et à l'intérieur, il suffit d'écrire une barre de nég. Et dans ce contenu, vous pouvez écrire un formulaire soumis avec succès. Bon, essayons ça. Apportez votre émulateur. Vous nommez le mot de passe 123456. Maintenant, lorsque je clique sur Soumettre, voir le formulaire soumis avec succès, et après deux ou trois secondes, il disparaît. C'est donc un très bon retour pour l'utilisateur. S'il y a une erreur. Supposons que le champ de mot de passe ou que l'utilisateur existe déjà. Ce type de messages d'erreur sont donc des messages de succès peuvent être affichés à l'aide du snack-bar. Maintenant, en dehors du contenu. Ainsi, le snack-bar possède également d'autres propriétés. Comme de l'action. Autrement dit, supposons que vous puissiez également avoir quelque chose comme rejeter, annuler, bouton OK. Identique à la boîte de dialogue d'alerte. Puis la couleur de fond. Supposons que j'ajouterai des couleurs, des points-points, lire, pas de lire, car cela dit succès, puis je laisserai vert. Ensuite, il y a une marge, forme de rembourrage, une durée également. C'est le cas si vous voulez que la durée soit inférieure. Donc, ici, vous pouvez avoir quelques secondes et j'écrirai simplement 1 seconde. Maintenant, essayons de nouveau. Flirter. Puis 1, 2, 3, 4, 5, 6. Et soumettez-vous. Et le formulaire C a été soumis avec succès. Et maintenant, comme c' était un, Deuxièmement, il a disparu plus vite que le précédent. Auparavant, je suppose que c'était deux ou trois secondes, une seconde par défaut. Maintenant, c'est à vous de déterminer combien de durée vous voulez. Ou aussi si, supposons que s' il existe un éditeur, vous pouvez avoir la couleur d' arrière-plan rouge. C'est donc un très bon retour pour l'utilisateur. Il n'est pas confus pourquoi il n'est pas capable de se connecter ou quelque chose comme ça. Souvenez-vous simplement de ce cou, mais c'est très important pour le widget. Et je suppose que par rapport à une boîte d'alerte, laissez dialoguer v utilisera plus fréquemment le snack-bar dans notre application plus tard. Donc, c'est tout. Pour ce module. Nous avons appris comment utiliser le texte va visiter comment récupérer sa valeur, comment valider, puis quelles sont les propriétés du champ de texte ? Et puis Andy et nous avons découvert ces deux nouveaux widgets, qui sont la boîte de dialogue d'alerte et le snack-bar. Dans le prochain module, nous allons commencer un nouveau sujet. Tilden. Continuez simplement à vous entraîner. 32. Comprendre les futurs: Bonjour, bienvenue dans le nouveau module où nous discuterons de la programmation synchrone. Donc, si vous êtes nouveau dans ce concept, vous pensez peut-être à ce qu'est un synchrone ? Si vous voyez de près ? Tout simplement d'une manière normale d'écrire des codes, les codes sont exécutés ligne par ligne. C'est de haut en bas. Et jusqu'à ce qu'une fonction complète l'exécution. La fonction suivante doit attendre. Il attendra donc que cette ligne de code soit exécutée et elle passera à la deuxième ligne. Mais dans la programmation asynchrone, nous avons mentionné les fonctions qui peuvent prendre du temps à s'exécuter et attendre la fin du terrain d' intégration sans arrêter l'exécution du prochain morceau de code. De cette façon, l'exécution parallèle du code est réalisée. Supposons simplement que vous téléchargiez un fichier sur la base de données, sur le serveur. Donc, jusqu'à ce que le fichier soit volumineux et l'exécution peut prendre un certain temps. Ainsi, dans les flacons que phi est en cours de téléchargement, vous pouvez également naviguer ou faire d'autres choses dans l'application. Vous n'avez donc pas besoin d' attendre qu'il atteigne 100 %. Il s'agit donc d'un très bel exemple, d'autres exemples différents. Alors, quand nous le ferons pratiquement. Alors, à ce moment-là, vos doutes ou vos concepts seront plus clairs et vous le comprendrez correctement. C'est ça. Donc, lorsque nous parlons de programmation asynchrone dans ces deux termes qui nous viennent à l'esprit, notre avenir et nos flux. Voici donc les deux types de programmes synchrone. Vous pouvez le dire. Nous en discuterons un par un. Tout d'abord, nous allons discuter de ce qui est un avenir. Donc, si votre chaise est simplement son nom. La dette est que les données arriveront à l'avenir. Imaginez que nous demandions des données à partir de la base de données et que le résultat soit renvoyé au bout de quelques secondes. Donc définitivement lieu. Démarrez votre application Instagram ou Facebook. Il faut une ou deux secondes pour rafraîchir votre flux. Donc, le temps mort, vous pourriez être capable de faire quelque chose, mais vous ne l'êtes peut-être pas. C'est à eux de décider, mais c'est un exemple d'avenir. C'est-à-dire que les données seront intégrées dans un avenir proche. Et c'est une garantie que quelque chose viendra de la fin. Soit c'est une donnée, soit une valeur nulle. S'il n'y a pas de données, suffit de se souvenir de ce concept. C'est ça. Donc, maintenant, nous comprenons ce que notre avenir est le moment. Nous saurons comment définir l'avenir. Si vous, Chad est défini exactement comme un fonctionnement qui, mais nous utilisons juste l'avenir comme préfixe, préfixe. Vous pouvez voir ce type de renvoi de type de données. Si vous souhaitez conserver le type de retour de la fonction, vous pouvez écrire ce futur puis taper I que cette fonction renvoie une sorte de chaîne, booléenne ou nulle. C'est-à-dire qu'il ne retourne rien, mais il fera quelque chose. Cela dit, maintenant, nous savons comment, quel est notre avenir, comment définir une caractéristique. Maintenant, c'est l'heure. Nous savons également comment utiliser l'avenir dans notre programme. Il existe deux façons d' exécuter un futur l'aide de Dan catch et d'async. Donc, les événements futurs que je demande généralement sur le réseau sont des opérations d'entrée-sortie, c'est-à-dire à partir de votre propre appareil. Il sauvegardera quelque chose ou il va récupérer quelque chose. Mais ici, nous allons simuler notre fausse demande de réseau en utilisant Future dot différé, ce qui nous aidera à comprendre le concept sans appeler une API réelle pour le moment. Parce que dans le prochain module, nous travaillerons avec des données réelles, qui proviendront d'une API dédiée. À ce moment-là également, nous utiliserons les contrats à terme. Mais dans le but de comprendre le concept, nous allons simplement simuler ou simuler un scénario de mort dans notre application. Ce point futur retardé prend deux arguments à l'intérieur. Donc, pour l'exécuter, nous devons passer deux arguments. première est la durée, qui spécifiera le temps nécessaire à l'exécution. Et le deuxième argument est une fonction qui doit être exécutée une fois cette durée terminée, est terminée. Maintenant, assez avec la partie théorique, vous pensez peut-être, accord, j'ai compris quelque chose, mais il y aura beaucoup de doutes. Pour éclaircir ces choses. Faites ressortir votre éditeur de texte. Dans le fichier feuille, je vais créer un nouveau fichier de dot-point d'écran futur. Ici. Comme toujours, le matériel d'importation a une visite avec état du futur écran. Ensuite, il suffit d'échafauder la partie d'application. Alors, je vais juste donner l'avenir. D'accord. Maintenant dans le corps, diriger le service et la télévision, puis l'enfant ayant un bouton surélevé. Et dans ce texte, vous pouvez simplement dire : Cliquez ici. C'est ça. Maintenant, allez à la moyenne et faites ce futur écran votre écran par défaut , fichier principal par défaut. D'accord. Oui, nous avons cette page. Maintenant, ce que nous allons faire, c'est que nous allons créer une fonction qui sera un avenir. Il suffit de créer un vide futur. Il ne retournera rien pour l'instant. Donnez-lui ensuite le nom de Obtenir des données et de l'IA. Ensuite, ce que nous pouvons faire, c'est utiliser Future dot retardé compte. Reportez-vous à la section Méthode retardée des points futurs pour simuler un appel réseau. Maintenant, vous entendez que les données devraient apparaître au bout de trois secondes. Et qu'est-ce qui aurait dû être ici ? Que devrait-on faire ? Ce qu'il faut faire, c' est qu'il faut imprimer. C'est un flottement. Développeur. Car ici, le premier argument était la durée et le second argument ou comme une fonction qui doit être exécutée après le retard de ce point Future. dynamite se fait le deuxième district. Et la prochaine ligne de code que nous allons écrire ici est une ligne de code aléatoire. Imaginez, rappelez-vous simplement cette chose. Et comme c'est un avenir, il devrait être synchrone. Il faut y écrire un évier. C'est une chose dont il faut se rappeler tout le temps que ce flottement doit savoir que cette fonction est une fonction asynchrone. C'est ça. Maintenant, copiez ceci, obtenez des données, appuyez sur Exécuter. Maintenant. Maintenant, il suffit de sauvegarder aussi si vous le souhaitez. Vous pouvez avoir, encore une fois, deux avenirs juste par souci de compréhension et vous donnera une seconde fin en dessous de 12 secondes. Si vous avez envie, vous pouvez simplement mettre en pause la vidéo et essayer comprendre ce code encore et encore. Oh, d'accord. Maintenant, si nous voyons notre code de haut en bas ici, l'ID utilisateur devrait passer en premier. Alors, c'est un développement flotté, c'est les données de l'utilisateur. Et puis cette ligne de code aléatoire est la dernière ligne. Mais lorsque nous cliquons sur le bouton, voyez la première chose qui est exécutée ou imprimée était une ligne de code aléatoire. Alors ça, hé, c'est inondé le développeur. Et enfin, l'ID utilisateur. Vous pouvez donc voir ce futur. Qu'est-ce qu'un avenir ? Autrement dit, cela prendra un certain temps de congé de deux ou trois secondes. Mais après cela, la valeur, nous obtiendrons la valeur ou le code sera exécuté. Mais ça ne s'arrête pas. C'est donc ce qu'il n'a pas attendu trois secondes pour s'exécuter. Il est simplement allé directement imprimer une ligne de code aléatoire. Et il vient d'exécuter cette ligne de code. Cela nous exécute donc de manière synchrone, mais il y a un problème. d'autres termes, le nom d'utilisateur ne doit être récupéré qu'après l'ID utilisateur. Cela signifie que nous devrions attendre l'exécution d'une fonction. Imaginez simplement s'il s' agit de votre application Instagram, alors lorsque l'application appelle la base de données pour obtenir les informations de l'utilisateur, agit de l'ID utilisateur. Après cela, seul l'écran d'accueil doit apparaître avec ces détails. Sans les détails, il devrait attendre et non, et ne devrait pas passer à la ligne suivante. À cette fin. Nous utilisons ce Dan Catch. Donc, utiliser cette capture signifie qu'après cette durée, ces contrats à terme sont terminés, alors seulement la deuxième ligne de code ne fait que la deuxième chose. Il suffit donc d'attendre et d'essayer de comprendre. Dot Dan est attaché à la toute fin de la fonction. Donc ici, avant ce point-virgule, je cliquerai simplement sur point, puis je verrai qu'il y a quelques choses et nous utiliserons le point point-point. Donc, ce que cela signifie, c' est que le futur devrait être exécuté et cela prendra trois secondes. Après trois secondes lorsque ce sprint est terminé. Ensuite, sur le Likoud, à cette ligne de code, c'est tout. Et puis l'attrape et gagne. Si lors de l'exécution de cette fonction, si quelque chose, une erreur ou quelque chose a mal tourné, alors ceux-ci devraient, pour l'instant, imprimer les points qui ont été ajoutés. Mais généralement, nous donnons un commentaire à l'utilisateur à l'aide d' un snack-bar ou d'une boîte d'alerte. Donc, si vous vous souvenez de la sortie précédente, il s'agissait d'une ligne de code aléatoire au début, puis déteste la Floride puis l'ID utilisateur. Mais maintenant, nous voulons un identifiant utilisateur. Cette ligne de code aléatoire s'exécutera en premier car c'est un avenir et cela prendra un certain temps. Donc oui, ça ne va pas attendre et aller directement. Mais vous pouvez voir dans cette sortie que l'ID utilisateur, nous avons l'ID utilisateur et ensuite seulement nous avons les détails des utilisateurs. Nous avons donc mené avec succès, écrit une future fonction au théâtre et appris à peser ou à utiliser l'erreur de capture tout en travaillant avec l'avenir. J'espère que vous avez compris le concept. Si vous avez des doutes, je vous suggérerai de faire preuve de patience et de Vig. Parce que dans les deux ou trois prochains modules, la fin des trois modèles, vous aurez certainement tous vos doutes clairs car ce n'est qu' un exemple très fictif. Mais lorsque nous construisons une application réelle, vous allez flétrir. Ok, pour cette raison, pendant que nous le sommes, pendant que vous apprenez que ces choses le sont, c'est le scénario d'utilisation pour 10. Donc, c'est tout. Au cours de la prochaine session, nous en parlerons. Nous parlerons de cet évier et nous attendrons. Parce que l'utilisation de Dan Cage et l'utilisation de l' asynchrone et de l'attente font la même chose, mais ils sont loin. L'écriture de code est différente. C'est ça. J'espère que vous vous entraînez et que vous vous entraînez beaucoup. On se voit dans la vidéo suivante. 33. Concept d'attente Async: Donc, dans cette session, nous parlerons de mot clé asynchrone attente tout en utilisant un futur. Au cours de cette session précédente, nous avons appris à les utiliser, et cela fonctionne définitivement bien. Mais il existe également une syntaxe alternative que beaucoup peuvent être beaucoup plus lisibles et aussi pour éviter plusieurs chaînes de cage de dengue, nous utilisons un mot-clé de synchronisation. Ensuite, notre nom de fonction, et ajoutez un mot-clé d'attente avant tout ce qui nécessite un certain temps pour l'exécuter. Par exemple, notre demande GET ou ce futur a été retardé. Maintenant, tout ce qui attend après cela s'exécutera lorsque la valeur aura été renvoyée. Ce que je veux dire par là, c'est que vous pouvez voir la syntaxe. Nous avons ce nom futur et futur. Ensuite, cette fonction a ce mot-clé, ce qui signifie simplement que cette variable d'impression ne fonctionnera que si ce rendement financier futur de cette valeur ou non. Essayons donc. abord, vous voulez, vous pouvez le faire avec le même exemple si nous le voulons. Maintenant, j'ai cette fonction à l'extérieur de dix heures et je vais l'enlever. Maintenant. Supposons que cette fonction renvoie un ID de 1 et que V ait cet identifiant stocké dans une variable appelée ID utilisateur. Mais maintenant, mais maintenant ce truc est V1, cet ID utilisateur, et mettez-le ici. D'accord ? Donc, si nous le faisons maintenant, définitivement, cela montrera des ajouts ou quelque chose comme null. Si, hay, sa future instance utilisateur est un futur qui signifie que la valeur n'a pas été stockée dans cette variable d'ID utilisateur. Nous devrions attendre. Et voici le poids du mot-clé, ce qui signifie simplement cette fonction. Une fois cette fonction exécutée , le code leader ira sur cette ligne. Maintenant, ce que vous verrez, c'est que lorsque je clique sur ce bouton, ce code de ligne aléatoire n'est pas exécuté. D'abord. Ceci est exécuté. Ensuite, parce que c'est synchronisé, nous n'avons pas dit d'attendre ici. Et maintenant, cela a cette valeur de 1. Mais ce concept est très, très, très important car lorsque nous construisons avec Firebase et des bases de données, l'avenir sera utilisé tout le temps que je suis. C'est pourquoi il faut le comprendre. Cette fonction d'attente attend clairement le mot-clé que je dirai. Maintenant, vous allez dire non, je veux aussi attendre cela. Et enfin, les guillemets doivent être exécutés. Il suffit donc d'écrire une fonction de poids. Avant cette fonction. Et maintenant, vous verrez le changement de sortie. Premièrement, ID utilisateur, deuxièmement, c'est flottant. Et puis une ligne de code aléatoire. Parce que nous avons notre candidature à Whittier. ici là, ne passez pas à la ligne suivante. Il s'agit donc d'un concept très important. S'il vous plaît, essayez de le pratiquer à nouveau chez un enfant. Maintenant, vous vous demandez peut-être ce qui se passera s'il y a une erreur. Pour cela, nous utilisons ce bloc try catch pour détecter toute erreur réseau. Et vers ces choses ici, c'est tout. Et dans la prise si vous le souhaitez, vous pouvez simplement amener dirigé. Parce qu'auparavant, nous l'avions et l'attrapons. Mais maintenant, lorsque nous utilisons async wait, nous devrions également utiliser ce bloc try catch. Et sink ne signifie pas seulement que vous devez créer ce type de fonction informatique distincte. Maintenant, supposons que nous ayons cette impression. Deuxième fonction. Supposons. Que va-t-il se passer maintenant ? Lorsque je clique ici, voir que la deuxième fonction est exécutée en premier. Et puis cela suscite le doute parce que Flutter sait que c'est un avenir. Donc, il n'a pas attendu ici et est allé à cette ligne de code. Dans ce scénario. Encore une fois, si vous dites non, je veux que les données soient exécutées d'abord, puis sur lèvre, imprimez cette deuxième ligne de code de fonction. Encore une fois, vous devez utiliser un évier ici et un poids ici. Examinez maintenant votre sortie. Et nous avons pu l'utiliser, c'est aussi une fonction, et c'était aussi une fonction. Vous devez donc comprendre que vous n'avez besoin que d'une fonction pour que nous puissions travailler. Maintenant, cette ligne est exécutée en premier et voyez, elle a été exécutée à ce dernier moment. J'espère donc que vous avez bien compris le concept d'asynchrone, attente et d'avenir. Parce que ce concept est si important que nous doutons de ce concept, vous ne seriez pas en mesure de travailler sur d'autres applications. Et ne comprenez pas, ne soyez pas submergé par ça. Parce que je sais que c'est un concept très nouveau si vous êtes nouveau dans cette boîte de programmation. Et si vous n'avez pas tout compris, c'est très bien. Parce qu'en tant que débutant, je comprends que vous aurez un certain doute. Vous devrez vous entraîner beaucoup, mais finalement vous l'obtiendrez. C'est tout pour aujourd'hui. J'espère que vous apprécierez nos séances photo. Et aussi lorsque vous ne regardez pas nos vidéos, je vous fais simplement confiance que vous pratiquez vous-même. Et Q. 34. Quels sont les flux: Bonjour. Au cours de cette session, nous parlerons de flux. Nous avons déjà discuté de ce qui est un avenir, mais maintenant c'est le nœud Time V, le deuxième type de programmation synchrone que ces flux diffusent. Donc, lorsque nous utilisons des flux, nous avons beaucoup de valeurs qui nous sont récupérées et honnêtement, et au lieu d'ajouter une connexion une fois, comme à l'avenir, nous pouvons la rendre ouverte et prête à recevoir de nouvelles données pour entrer. simplement, tout changement se produit ou toute nouvelle donnée est insérée, elle se reflétera à la fin. L'avenir n'a qu'une seule réponse, mais le flux peut contenir un certain nombre de réponses. Donc simplement, je voudrais dire que lorsque nous utilisons un avenir, si quelque chose change déjà connu notifier ou un nouveau message apparaît, un utilisateur doit actualiser cette page ou cette application. Mais lorsque vous utilisez des flux, c'est en temps réel. Autrement dit, tout changement de données, leur base de données sera directement reflétée dans les dettes de votre application. C'est. Vous n'avez pas besoin d'avoir, vous n'avez pas à penser à autre chose. C'est là la différence fondamentale. Dans le prochain module, nous parlerons plus pratiquement des flux parce que nous utiliserons Firebase. Ici, nous allons encore simuler notre faux événement qui renvoie un nouveau message toutes les quelques secondes, juste pour vous faire comprendre ce concept. Il y a donc quatre étapes à suivre. Création de flux, ajout de données à un flux, écoute d'un flux, puis fermeture d'une chaîne. Faisons-le pratiquement. Sortez votre éditeur de texte et créez un nouveau fichier appelé stream. Capture d'écran sombre. Encore une fois, le strict minimum dont nous avons besoin, n'est-ce pas ? C'est très bien. Je vais utiliser le moins rigide car l'interface utilisateur n'a pas été modifiée. Stream, écran, dense, échafaudage, Dann die flux de texte Dann die Daten. Maintenant, ce que nous allons faire c'est simplement créer un flux. Et pour créer ce flux, nous devons prévoir un contrôleur de flux, qui sera utilisé pour contrôler ce flux. Stream. Le contrôleur de flux est dû à cette étape. Et cela est automatiquement importé car nous utilisons des flux et impairs. La deuxième étape consiste à ajouter des données au flux. Pour cela simplement, créez une fonction appelée flux de données. Et ici, vous pouvez avoir une boucle for de int I est égal à 0, je moins de 4, je plus, plus. Et puis le contrôleur de flux Dot ajoute. Vous avez eu le message. Et ensuite, je vais attendre deux secondes ici. Ensuite, seule la boucle FOR s' exécutera à nouveau. Il y a quelques secondes, c'est tout. Rien d'autre. Maintenant, dans le corps. Allons avoir un soulagement, mais c'est fait. À qui l'éclat ? Lorsque nous cliquons pour diffuser. Ensuite, dans l'ensemble, définissez-le par défaut. Écran et reconstruisez simplement ou la statistique. Reportez-vous à la section. Vous avez ce flux. Et nous allons juste le rendre centré. D'accord. Maintenant, dans ce flux de données, je semblerai, s'il vous plaît , commencez à écouter. Do, c'est l'arbre. Cela signifie que l'écoute signifie que de nouvelles données arrivent. Chacun doit être imprimé. Je vais simplement imprimer des données. Et les données de chaîne que j' attribuerai à cette fonction. Je sais qu'il y a beaucoup de choses à comprendre ici, mais vous pouvez simplement voir des marches de poussière. Tout d'abord, nous créons un nouveau flux. Le deuxième était l'ajout de données au flux. Fatigué était en train d'écouter le flux, qui signifie simplement quoi ? Cela signifie simplement, que nous avons commencé à connecter que c'est vrai, c'est essentiellement comme une rivière. C'est à ce moment que vous en commencez un. Si, si le point de départ de la tâche n'est pas fermé , ces données ou l'eau commenceront à couler continuellement jusqu'à ce que vous le bloquiez, c'est aussi simple que cela. Bon, cliquons sur ce bouton. Vous avez reçu le message. Vous avez reçu le message C3, 4, quatre fois qu'il est imprimé parce que nous avons ces quatre. Et si vous pensez non. Je vais donc écrire ici au bout de deux secondes et il va simplement imprimer, lire. Kay ? Essayons encore une fois. Désolé, c' est parce que c'était un flux. Vous devez donc le redémarrer. Parce qu'il a déjà commencé à écouter. Vous ne pouvez pas le faire encore et encore. vois que vous avez reçu le message. Lire. Il faut lire un message, il faut le taux de messages. Ici, les données nous circulent continuellement. J'ai besoin que le changement ait été dévié sans que nous changions, redémarre l'application. Ceci est fait le sens du flux. C'est ça. Vous pensez peut-être, que se passe-t-il si je sais que les données sont entrées ? Donc, si d'autres données sont saisies ultérieurement, elles seront également imprimées. Ce que je dis, c'est qu' on a un bouton d' action flottant. Karité. Je vais simplement écrire, ajouter un article sur site. Je vais simplement dans ce contrôleur de flux, nous ajouterons que vous avez une nouvelle défécation de nœud. D'accord. Voyons maintenant. Ici, je n'ai écrit aucune impression ou quoi que ce soit, mais comme il est à l' écoute, j'ai déjà écrit ce code et l'exécute. Comme si je clique dessus, il a commencé à écouter. Maintenant, une fois que tout est terminé, si je clique sur Ajouter, voyez que vous avez une nouvelle notification. Nous n'avons donc pas besoin d'écouter à nouveau car la connexion était déjà ouverte et en avait besoin, qui circule à l'intérieur de ce flux sera sortie. En termes simples, imaginez que vous avez vos messages sur la barre de notification ici. Si quelqu'un détecte votre nouvelle notification, notre message, ce nombre augmentera de 123. C'est donc le concept de retenue. En termes simples, quelle est la différence entre le futur et le flux ? Futures s' exécute une fois qu'un état la base de données et l' introduit dans cette connexion terminée. Si quelque chose change dans la base de données, l'utilisateur doit actualiser cette page ou doit redémarrer son application , seule une nouvelle demande future sera envoyée. Mais dans le cas du freestream, quand il va demander les données, il ajoute une connexion. Quoi, et dans ce cas, si cette valeur ou si quelque chose change dans la base de données, elle passe directement de la base de données à l'application. Sans rafraîchissement de l'utilisateur ni quoi que ce soit. Il se mettra à jour automatiquement ici. J'espère que vous avez les bases claires. Et aussi avec l'exemple réel que nous ferons dans les prochains modules. Mais jusque-là, profitez des bases de la théorie que nous apprenons. Merci. 35. Widget FutureBuilder et StreamBuilder: Bienvenue de retour. Dans cette session, nous parlerons d'un nouveau widget appelé Future Builder. Et il s'agit essentiellement d'une visite avec des aides pour faire face à l'avenir. Un avenir quand cela supprime une partie du code que nous devons écrire lorsque nous récupérons quelque chose de ce réseau, c' est-à-dire de la base de données ou du serveur. Supposons que vous souhaitiez récupérer des données de la base de données au lancement de l'application et afficher un spinner de chargement jusqu'à ce que plus tard vienne, dans ce cas, l' avenir sera très pratique. Ce n'est pas comme des lectures mortes. futur ne pourra pas effectuer la tâche, mais cela prendra beaucoup de temps est un peu plus de code. Vous devez faire un état défini et tout. Mais pourquoi faire toutes ces choses alors que nous avons ce rejet génial avec nous ? Il est donc renvoyé comme n'importe quel autre widget. Il accepte deux paramètres. L'un est futur et le second est un constructeur. Et le constructeur prend également une fonction qui a deux paramètres. L'un est les contextes, qui est par défaut, et le second est instantané, qui n'est qu'un nom de variable. Mais c'est très important car il contient les données renvoyées par la fonction d'entité. Vous pouvez donc voir ici la syntaxe, simplement futur constructeur. Ensuite, le futur est la fonction qui revient à l'avenir. Et ce constructeur, il renvoie un widget à l'intérieur, mais c'est une fonction. Faisons-le pratiquement pour que vous le compreniez mieux. Allez sur le futur écran. Et ce que nous pouvons faire c'est que nous pouvons réintégrer cette fonction. Je viens de le faire pour des tests. Ayons une fonction future appelée obtenir le nom d'utilisateur. Et ce sera la même chose parce que c'est l'avenir. Définissons maintenant une variable. Chaîne finale. User est incroyablement similaire à Future dot d laid. Nous allons avoir une durée de deux secondes. Et puis j'ai une fonction qui renvoie essentiellement la valeur de Bill Gates. Tessa Violet, la variable utilisateur, puis nous retournons cet utilisateur. C'est maintenant un futur qui renvoie une valeur de chaîne. Maintenant, cet avenir est revenu. Nous devons le montrer dans notre corps, allons tout enlever et avoir un avenir. Avec nous. Une erreur de faute de frappe. Ce futur constructeur, qui est le premier paramètre est futur, que nous devrions attribuer à ce nom d'utilisateur get. Et deuxièmement. Et le second est constructeur, qui est une fonction et il accepte le contact non l'exposition nous donne un contexte et un instantané. Et il a le type de données de l'instantané de synchronisation. Donc 10. J'espère que vous l' avez compris. D'abord. Nous avons écrit ce futur widget Builder. Nous l'affectons à une vidéo future. Maintenant, les choses importantes, le CMS, qui est le rôle de cet instantané. Tout d'abord, nous devons vérifier si le point d'instantané contient des données. Si c'est plus grand que, c'est très bien. D'ici là, nous montrerons quelque chose comme un indicateur de chargement. Les événements peuvent-ils simplement apprendre l'indicateur de progrès. Cela va donc s'exécuter jusqu'à ce moment-là. C'est ce 2 secondes, la première à la deuxième. Donc, jusqu'à ce moment-là, nous devons absolument montrer quelque chose à l'écran. Et nous utiliserons ce widget appelé indicateur de progression circulaire. Supposons maintenant que nous ayons des données, alors nous reviendrons simplement. Chez cet enfant, nous aurons un widget texte. Nous allons générer des données ponctuelles, qui se trouvent à l'intérieur de l'instantané. Données instantanées. C'est ça. Essayons tout seul. Nous commençons désolés, je veux dire, nous devons attribuer ce futur écran. Voyez ce chargement et indiquez qu' il y a eu deux secondes. Ensuite, nous avons la valeur Km, qui est renvoyée par la fonction future. J'espère donc que vous avez compris le futur constructeur. Plus important encore, vous devez enquêter dans la capture instantanée car est cette chose que nous utiliserons pour manipuler nos widgets. C'est le fichier FASTA qui affiche un indicateur de chargement , puis affiche un affichage ou on met ces données. C'est ça. Donc oui, vous pouvez revoir le code ici. Ensuite, nous avons fait un StringBuilder. Stringbuilder fonctionne de la même manière qu' un futur constructeur. Seule la différence. Il écoute continuellement ce changement et met à jour l'interface utilisateur en conséquence sans avoir à actualiser ou à reconstruire notre écran. Maintenant, StringBuilder prend également deux paramètres, c'est-à-dire trim et un constructeur. Maintenant, construisez également qui prend une fonction qui a deux paramètres, contextes identiques à ceux par défaut. Et l'instantané n'est qu'une variable contenant les données. Essayons encore une fois. Accédez à l'écran du flux. Plus tôt que nous créons, nous avons créé un avenir fictif. Maintenant, nous allons créer un flux fictif, stream. Mon flux. Il ne le verra pas, cela sera considéré comme un truc car comme il s'agit d'une chaîne à l'avenir, nous avons ce mot-clé de synchronisation, mot clé qui le fera, qui est attribué si c'est un avenir. Mais quand il s'agit d'un flux, nous devons écrire un astéroïde d'évier. C'est ça. Maintenant, voici simplement, je vais simplement avoir cette fonction de boucle où je lirai ce que j'ai égal à 0. J'ai moins de 10 ans, et plus. Et je ne rentrerai pas. Je vais laisser ce que j'apprécie. Et je laisserai le futur point D lipide ici pour que les valeurs prennent un peu de temps. Notre fonction est écrite correctement. C'est simplement ce c'est dire que je devrais aller de un à neuf et que notre valeur devrait être insérée dans le flux est liée, c' est-à-dire 1, 2, 3 pour simplement flotter à travers la chaîne. C'est ça. Encore une fois, nous aurons le générateur de flux. Le premier paramètre est un flux, c'est-à-dire mon flux. Deuxièmement, il s'agit d'un constructeur qui aura un contexte, qui aura un contexte. Et en instantané. Comme d'habitude, nous devons toujours vérifier si l'instantané contient des données. Si ce n'est pas le cas, je retournerai tout d'abord un indicateur circulaire de progression. Et si c'est un danger, s'il y avait des données, alors au centre, nous avons eu un enfant. Et le texte a dit des données de point instantané point toString. C'est ça. Comme c'est un entier, j'ai fait deux chaînes ici. Et sur la page d'accueil. Maintenant, écran de flux droit. Redémarrez et vérifiez la sortie. C 12. Troisièmement, nous ne faisons rien. Nous n'actualiserons pas la page. Mais comme il est dit flux, les valeurs des données sont mises à jour en temps réel. Enfin, j'espère que vous êtes un concept de flux et que les futurs sont clairs. Au moins, vous connaissez le concept, c'est tout. Je ne dis pas que vous devriez tout savoir, ce que nous avons écrit ici et tout, car c'est peut-être un peu compliqué pour vous en ce moment. Mais croyez-moi, lorsque nous utiliserons un PS et une Firebase, tous vos doutes seront résolus. C'est tout pour ce module. Dans le prochain module, nous allons implémenter de véritables API dans notre application. Et toutes ces données proviendront du serveur. Merci. On se retrouve dans le module suivant.