Desenvolvimento de aplicativos para iniciantes absolutos | Rahul Agarwal | Skillshare
Suchen

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Desenvolvimento de aplicativos para iniciantes absolutos

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      INTRODUÇÃO DO CURSO

      0:45

    • 2.

      Como criar um novo projeto e entender a estrutura de arquivos

      12:10

    • 3.

      O que são Widgets

      5:58

    • 4.

      Como trabalhar com recursos e arquivo Pubspec

      7:00

    • 5.

      Widget de texto e andaime

      14:39

    • 6.

      Botão de ação central

      8:38

    • 7.

      Como alterar cor e estilo

      6:17

    • 8.

      O que são Widget sem Estado

      7:17

    • 9.

      Ativo e imagem de rede

      7:32

    • 10.

      Widget de ícone e botão

      12:02

    • 11.

      Widget de contêiner

      9:39

    • 12.

      Widget TextField

      6:50

    • 13.

      Coluna e fileira

      8:03

    • 14.

      ListTile e ListView

      8:59

    • 15.

      O que é um Estado

      6:33

    • 16.

      O método setState()

      6:38

    • 17.

      Widget em ação

      11:08

    • 18.

      O que é função initState()

      6:30

    • 19.

      Como entender o ciclo de vida do Widget

      7:41

    • 20.

      Conceito de pilha por trás de navegação

      4:49

    • 21.

      Método Push e Pop

      12:54

    • 22.

      Como entender rota

      12:38

    • 23.

      Como passar dados por construtores

      17:03

    • 24.

      Widget de navegação em gaveta

      10:53

    • 25.

      Barra de navegação

      14:18

    • 26.

      Mergulho profundo no Widget TextField

      5:38

    • 27.

      Como adicionar um controlador de texto

      8:44

    • 28.

      Validando a entrada do usuário

      13:15

    • 29.

      Decoração e outras propriedades

      10:09

    • 30.

      Widget de diálogo alerta

      8:03

    • 31.

      Como exibir Snackbar

      6:10

    • 32.

      Como entender futuros

      17:05

    • 33.

      Conceito de espera

      8:19

    • 34.

      O que são fluxos

      12:40

    • 35.

      FutureBuilder e Widget do StreamBuilder

      12:12

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

216

Estudantes

2

Projetos

Über diesen Kurs

Se você seguir o mundo da tecnologia, talvez tenha ouvido falar do Flutter e da sua crescente popularidade dia a dia. Há muitos trabalhos em torno desta nova estrutura, mas o fornecimento de desenvolvedores qualificados é menor. Então, é tempo de aprimorarmos nossa habilidade e aproveitarmos essas oportunidades o mais rápido possível. Você vai aprender os conceitos básicos até os conceitos avançados neste curso, que é suficiente para você começar a se candidatar para seu trabalho de sonho

O Flutter é gratuito e o Kit de desenvolvimento de software de código aberto usado para desenvolver aplicativos de alto desempenho em plataforma cruzada com uma única base de código. Agora, obviamente, vamos precisar de um banco de dados no futuro. O verdadeiro benefício de escolher Flutter com o Firebase como backend é que ele oferece um pacote completo de gerenciamento de aplicativos. Desde armazenamento em nuvem até banco de dados em tempo real, hospedagem em serviços de autenticação, o Firebase vai fornecer tudo em um só lugar e atender perfeitamente às necessidades das iniciativas.

O que você vai aprender neste curso?

  • Flutter em conceitos dept.

· O que são widgets

· Widgets Stateless vs Stateful

· Explorar vários Widgets

· O que é um Estado

· Como gerenciar Estado

· Conceitos de navegação

· Como lidar com entrada de usuário

· Programação assíncrona

       

Conheça seu professor

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Professor

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

Visualizar o perfil completo

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung in den Kurs: Wenn Sie noch nicht in der Anwendungsentwicklung sind und nach einem Job suchen, um einen angemessenen Geldbetrag zu verdienen, werden Sie es nicht bereuen, an diesem Kurs teilzunehmen. Wie jeder weiß, ist Florida eine Trendtechnologie und hat die Art und Weise, wie wir Anwendungen erstellen, verändert. Es ist ein plattformübergreifendes Tool zum Erstellen von Apps für Android iOS Webdeckstopp mit nur einer Codebasis. In diesem Kurs lernen wir alles von Grund auf neu. Es ist für absolute Anfänger. Wir werden über Widgets verstehen, wie man Statusnavigationskonzepte verwaltet, Benutzereingaben behandelt und die Rest-API integriert. All diese Konzepte reichen aus , um Ihnen als Entwickler Vertrauen zu geben. Hast du also für deinen Traumjob geblutet? Ohne mehr zu verschwenden als das Objektiv wird gestartet. 2. Ein neues Projekt erstellen und Dateistruktur verstehen: Jetzt ist es an der Zeit, dass wir unser allererstes Florida-Projekt erstellen. Um sicherzustellen, dass Flutter ordnungsgemäß installiert wird, können wir einfach einen Befehl wie Flutter Version verwenden. Öffnen Sie zuerst Ihre Eingabeaufforderung wählen Sie einfach diesen Befehl aus und drücken Sie die Eingabet Wenn Sie keine Version sehen können, haben Sie sie korrekt installiert. Und wenn es auch neuere Versionen gibt, dann können Sie auch sehen wie eine neue Version von Florida verfügbar ist. Aber im Moment werden wir später mit Flutter 2.2 arbeiten , wenn nötig, und mehrdeutig, wir werden ein Upgrade durchführen, aber es nicht wissen. Crf-Daten sind ordnungsgemäß in Ihrem System installiert. Jetzt gibt es zwei Möglichkeiten, das Florida-Projekt direkt an meine Kinder zu erstellen . Zuerst wird Android Studio verwendet. Wenn Sie Android Studio-Los verwenden, können Sie einfach Android Studio anhängen und die erforderlichen Erweiterungen weit flattern, da es in Android Studio ein Erweiterungstool geben wird als gut. Sie müssen einfach die Data Tools herunterladen oder installieren. Aber ich bevorzuge keine angereicherte Studie, weil es zuallererst sehr, es ist, dass es viele Ihrer PCD-Quellen verwendet. Es macht es langsamer, ich denke, weil ich ein Modus eines VS-Code-Benutzers bin oder texturell sterbe, bevorzuge ich uns Code. Das ist also Wave. Wir werden VS-Code verwenden. Stellen Sie sicher, dass Sie es in Ihrem System installieren. Es ist sehr einfach. Du kannst es einfach runterholen. Um nun zuerst ein Projekt zu erarbeiten, gehen Sie in den Ordner, in dem Sie Ihr erstes Projekt haben möchten. Dann füge einfach eine gemeinsame Eingabeaufforderung und schreibe einfach, Flutter, create. Dies ist der Code. Oder Sie können sagen, warten Sie, bis Sie ein neues Projekt erstellen. Und nach dem Erstellen wird jeder Name, den Sie angeben ein Projektname sein, der Ihr App-Name ist. Sie können offensichtlich sagen, dass Sie es später ändern können. Es ist kein Problem. Wir werden einfach ein Flattern-Tutorial machen. Tutorial, okay, klicken Sie auf Enter. Es wird also einfach dein aufgestelltes Projekt heruntergeladen und erstellt. Wenn du siehst, dass alles erledigt ist, dann ist es das. Du hast es richtig gemacht. In, Inside Definitiv Projekt. Möglicherweise sehen Sie viele Dateien, die wir nur jetzt besprechen werden. Aber vorher hängen wir einfach Yard VS-Code an, gehen zur Datei und hängen einfach an. Und hier musst du dein Projekt einfach so anhängen. Sie sehen also Ordner und Dateien, die vorhanden waren. Sie haben erfolgreich VS Code verwendet. Jetzt. Was wir jetzt tun werden, werden wir mehr über diese beiden Ordnerstruktur sehen. Es gibt verschiedene Ordner. Das ist Android, iOS Live, Test von Spec Dot YAML als Web, Lord of Thing Ordner und Dateien. Wir müssen uns nur daran erinnern, dass im Android-Ordner gelöschte Android-Dateien gespeichert werden. Wir ändern es nicht sehr. Wir werden es nur für einige Dinge verwenden wie das Symbol Ihrer Anwendung, Android-Gerät, wie heißt die Anwendung? Sind nur sehr wenige Dinge spezifisch für Android sind Plugins, aber nicht den ganzen Kurs. Gleich mit dem iOS gefalteten iOS-Ordner haben alle Dateien , die zum Erstellen einer iOS-Anwendung verwendet werden. Aber wir werden nur diese Änderungen vornehmen, kleine, kleine Änderungen, die Knoten erworben haben, nicht dunklen Farbcode. Jetzt, da dieses Blatt fällt, das ist die Hauptsache, dies ist der Ordner, in dem wir ihn immer wieder benutzen werden. Hier werden wir die meiste Zeit arbeiten. Standardmäßig enthält es Main.Jack. Dies ist der Einstiegspunkt der Fotoanwendung, wie ich bereits in diesem Datenabschnitt gesehen habe. Und dieser Hauptpunkt, Punkt oder die Hauptfunktion, ist der Einstiegspunkt. Wenn du gehst und auf sie klickst. Diese Hauptfunktion hier, speichern. Und auf jeden Fall wird es auch andere Zitate geben. Und Sie könnten derzeit überwältigt werden. Also sieh dir diesen Code nicht an. Denken Sie einfach an diese Hauptfunktion. Danach. Es gibt einen Test, testen Sie dies, wo Sie den Unit-Testcode für die Anwendung ablegen . Wenn Sie bereit sind Ihre Anwendung produktionsbereit ist, müssen Sie sie viel Zeit testen. Testen ist ein ganz anderes Thema, das wir nicht behandeln werden, denn bevor Sie zum Test gehen, müssen Sie über eine sehr saubere, strukturierte Flattern-Anwendung verfügen. Und dann ist die nächste und sehr wichtige Datei Pub Spec Dot YAML-Datei. Diese Datei definiert die Versions - und Build-Nummer Ihrer App. Wenn Sie sehen, sehen wir diese Version nur und diese wird verwendet, wenn Sie Ihre Anwendung an einem beliebigen Ort, an einem Torr oder einem iOS Store veröffentlichen . Zuerst wird dies und dann diese Abhängigkeiten verwendet . Und Sie fragen sich vielleicht, was sind Abhängigkeiten? Wir werden es auch im nächsten Video sehen und verstehen. Weil Abhängigkeiten bedeuten, dass Ihre Anwendung definitiv von Software oder Bibliothek oder Plugins von Drittanbietern abhängt. Dies ist auch sehr wichtig. Es sollte ein separates Video zu besprechen haben. Aber denken Sie daran, dass ich andere Ordner und Dateien übersprungen habe , weil wir sie meistens nicht wirklich berühren müssen. Wir müssen nur an Leap, Pub Spec Dot YAML und wenig weiter im Android- und iOS-Ordner arbeiten Pub Spec Dot YAML und wenig . Jetzt haben Sie Ihre Flatter-Applikation in Betrieb. Es ist Zeit, es auf einem Gerät auszuführen. Für das Gerät hängen Sie einfach Android Studio an, da Sie einen Emulator haben sollten. Wenn Sie den Emulator nicht haben, können Sie auch Ihr physisches Android-Gerät verwenden. Sie müssen nur sicherstellen, dass Sie den Debugging-Modus in den Einstellungen Ihres Android-Geräts aktiviert haben . Hier. Ja, klicke auf, konfiguriere es. Hier habe ich ein Gerät. Sie können auch Ihr virtuelles Gerät erstellen. Es ist sehr einfach, aber ich habe diese große Zelle drei APH wäre 8 sein. Ich lasse es einfach laufen. Es kann ein bisschen dauern. Sehen Sie, Ihr Emulator ist hier, es heißt Android-Gerät. Jetzt müssen Sie einfach tun, wenn Ihr VS-Code zum Hauptpunktpunkt geht. Und klicken Sie in ihrem Lauf einfach auf Debuggen starten. Und jetzt musst du eine Weile warten, denn zum ersten Mal wird es einige Zeit dauern, aber du kannst bleiben. Es startet unseren Hauptpunkt auf diesem Emulat, dass der Debug-Modus. Das ist also gut. Das funktioniert. Ich möchte nur sagen, dass überflutet ein sehr großartiges Werkzeug ist. Es ist, als wäre es sehr einfach zu verstehen und einfach zu arbeiten. Sie haben auch verstanden, dass die grundlegenden Konzepte in jeder Programmiersprache dieselben sind wie in der dunklen Sprache. Denken Sie daran, dass Ihr System möglicherweise verzögert ist, wenn Sie Android Studio verwenden . Sind, kann es hängen, weil es in Ihrem RAM verwendet wird. Sie können also keine andere Sache verwenden oder tun , während Sie an einem Android-Emulator arbeiten , da Ihr System dadurch sehr hart funktioniert. Und Sie möchten nicht abstürzen, weil Sie das System aktualisieren konnte damit nicht umgehen. Ja. Es zeigt Build-Ausgänge flattern, APK, App Debug Dot APK. Ich hoffe, Sie wissen , dass APKs Erweiterung oft Android-Geräteanwendung. Jetzt okay. Siehst du, du wirst diese Bildschirmbreiten wie Flutter Demo-Homepage haben. Und in ihrem Mittelohr wird es sein, du hast den Knopf so oft gedrückt und ein Knopf ist da. Wenn ich darauf klicke, siehe 1, 2, 3, 4, 5, es nimmt zu. Also haben wir endlich unsere Fluttern-Anwendung in unserem Emulator laufen. Im nächsten Video werden wir mehr über die Konzepte wie Widgets und andere Dinge sprechen. Vorerst. Ich hoffe, du hast es genossen. 3. Was sind Widgets: Heute werden wir über Widgets sprechen. Wenn wir in flirted arbeiten. Sie werden diesem Wort viel Zeit begegnen, weil ich im Rahmen des Aufwands geschrieben habe Antrag ist ein Budget. Von einem einfachen Text zwei Schaltflächen bis hin zu Bildschirmlayouts. Ich gebe dir einfach ein Beispiel. Wenn Sie kommen, wenn Sie Erfahrung mit der Webentwicklung haben, werden Sie verstehen, dass es Navbar, Textfeld, div, Tabellen in Bootstrap oder in HTML gibt. Im Flattern. All das, was andere UI-Elemente als Widgets bezeichnet werden. Das war's. Es ist also kein sehr schwieriges Konzept. Ich sage nicht, dass Widgets es sind, es sei denn, Sie schreiben auf Leader, aber aus Grund des grundlegenden Verständnisses müssen Sie daran denken, müssen Sie daran denken dass es sich um ein Widget handelt, wenn Sie etwas auf diesem Bildschirm sehen . Das war's. Jetzt hat jedes Widget Eigenschaften oder Sie können Argumente sagen , die wir übergeben müssen. Wenn Sie sich also an das Konzept der benannten Argumente aus dem früheren Dark-Programm erinnern das Konzept der benannten Argumente , zweifeln Sie Tutorials, haben wir es bereits getan. die gleiche Weise. Das hätte ich getan. Widget ist auch eine Funktion, die Sie speichern können da es auf der Rückseite des Flutter-Kerncodes wie ein benanntes Argument erwähnt wird. Ich gebe dir nur ein Beispiel. Hier. Definitiv diesen Code, den du nicht anfassen solltest. Du wirst einfach sehen, wovon ich rede. Dieses Zentrum ist ein Widget. Also ist es Eigentum akzeptiert ist 11. Eigentum heißt Kind. Stell dir mal vor. Ja, ich bin nur, ich schreibe es nur hier. Wir haben ein Function Callcenter. Und hier könnte es etwas als benanntes Argument akzeptieren. Angenommen, String-Name. Hier ist es dasselbe, aber es ist starre Eigenschaft, die Kind genannt wird. diesem Grund nennen wir dieses zentrierte Widget untergeordnete Eigenschaft neu indizieren. Wir senden erneut ein anderes Widget, diese Spalte. In den kommenden Videos werden wir tief in alle budgetstabilen Mittenspaltentexte eintauchen , was auch immer sie sind, Widgets, die wir jedes und alles verstehen werden. Aber im Moment möchte ich nur einen grundlegenden Überblick geben. Zumindest solltest du wissen was das Wort Widget bedeutet . Jetzt können Sie strahlen, das hören, und diese Eigenschaft wird meistens das Widget als Wert akzeptiert, wie ich Ihnen gesagt habe, wie ich Ihnen gezeigt habe, dass in dieser untergeordneten Eigenschaft, Es akzeptiert eine Spalte was ist wieder Abhijit. Und das Letzte ist, dass jedes Widget mit seinem Namen beginnt , gefolgt von Klammern. Also nochmal werde ich Schläger und nehme an, das ist ein starrer Text, dann Klammer. Und in sich selbst haben Sie andere Eigenschaften. Angenommen, ein Kind wie dieses und das, wieder ausgenommen, schätzt es, aber in einem Text ist es kein Kind, ich denke, es ist anders, aber ich gebe Ihnen nur ein grundlegendes Beispiel. Jetzt. Sieh dir dieses Bild an. Dies ist ein Weg, dies ist eine Anwendung, die mit Flutter erstellt wurde. Wenn Sie also diesen Button von Verde sehen können, sind dieses Bild oder dieser Pfeil, all das, unsere Budgets. Dieser Text ist wieder ein Widget. Dieser Navigationsbalken ist wieder durchschnittlich. Ein Beispiel. Es ist eine sehr einfache Anwendung für die Lieferung von Lebensmitteln, aber sie sieht so gut aus, weil sie mit Flutter gebaut wurde. Diese Kategorien sind also auch ein Widget namens row, da es von links nach rechts und horizontal ist. Dann in diesem kreisförmigen Ding oder was auch immer, oder das Suchsymbol ist auch ein Widget. Dasselbe ist dieses Beispiel. Diese Suchleiste ist wieder ein Widget. Diese Navigationsschaltfläche ist wieder ein Widget. Dieses Bild ist wieder ein Widget. Was das Widget gibt es das Bild. Das war's. Sie werden es im späteren Video sehen. Ich möchte Ihnen nur zeigen, dass alles, was Sie gerade auf dem Bildschirm sehen, alle unterschiedlich sind, verschiedene Widgets. Das war's. Wir tun es nicht, wenn du überwältigt bist, dann ist es auch okay, weil es in Ordnung ist. Du hast unsere Arbeit nicht gemacht, so etwas gemacht, aber es ist sehr einfach. Okay, bis jetzt reicht das mit dem Thema Widgets. Danke. 4. Arbeiten mit Assets und Pubspec Datei: In der heutigen Sitzung werden wir uns mit einem sehr grundlegenden Thema der Vermögenswerte befassen . Vielleicht fragen Sie sich, was sind Vermögenswerte? Stellen Sie sich vor, Sie haben eine Anwendung, und auf jeden Fall werden Sie in dieser Anwendung einige Bilder haben, einige verschiedene Bilder. Sie sind das Logo eines Unternehmens, sind einige verschiedene Schriftdateien, sind einige Animationen, was auch immer Sie sehen, Sie haben einige verschiedene Dateien für Ihre Anwendung. Zu dieser Zeit. Du musst sicherstellen, dass du es getan hast. Sie haben für Ihr Flutter-Projekt mitgeteilt , dass dies die Vermögenswerte sind , die ich in meine Bewerbung aufnehmen möchte. Das war's. Bisher müssen Sie in Ihren Filterprojektordner gehen. Sie werden hier verschiedene Ordner sehen. Sie müssen nur einen neuen Asset-Ordner erstellen. Oder was meinst du damit, dass du geben willst? Normalerweise gebe ich IT-Assets , weil es für mich bequem ist. In den Assets, welche Assets Sie möchten, wenn Sie nur möchten, können Sie auch alle Ihre Dateien hier ablegen , die wahlweise. Aber ich bevorzuge es. Auch hier können Sie einen Ordner mit Bildern erstellen, wenn Sie möchten. Entschuldigung. Wenn du willst. Wenn Sie möchten, können Sie auch verschiedene Ordner haben, z. B. Auf diese Weise haben Sie Ihre ältere Ordnerstruktur richtig. Jetzt in den Bildern, kopiere einfach jedes gewünschte Bild und füge es einfach ein. Ich habe das, wenn wir das Bild sehen wollten . Was Sie tun müssen, ist, dass Sie Ihren Ordner richtig hier haben. Aber jetzt ist es soweit. Wir implementieren unsere Wir sagen unserem Florida-Projekt, Dies ist der Assets-Ordner. Dafür. Du musst zu dieser KML-Datei gehen. Denken Sie daran, dass diese YAML-Datei für Pub Spec Dot sehr sensibel ist, in Ordnung, denn wenn Sie einen zusätzlichen Tab oder zusätzlichen Speicherplatz haben oder was auch immer, stürzt Ihre gesamte Anwendung ab. Denken Sie also daran und seien Sie sehr vorsichtig. Fass nichts an. Denk einfach daran hier. Dennoch können Sie diese Vermögens-Sache sehen , die im Kommentar enthalten ist. Gehen Sie also einfach zu einem und vor einem und stapeln Sie einfach zwei Mal den Abstand zurück. Das war's. Und wieder hier, zwei Mal Rücktaste. Nicht mehr als das, denn wenn Sie ein Knie sehen, denken Sie daran, rückgängig zu machen und es erneut zu versuchen. Jetzt werden diese Assets dieser Assets-Code nur dort gemacht, um diese Ordnernamen zu erwähnen. Hier. Ich schreibe es einfach von Anfang an. Es ist wie Vermögenswerte und dann Bilder, und dann leg, das war's. Das bedeutet einfach diesen Assets-Ordner. In diesem Ordner ist gerade ein Bilderordner hochgeladen. Ich werde meine Florida-Debug-Sitzung beenden. Seit Sie einen Wechsel gemacht haben Coach Scharniere. Und einfach, wenn Sie Schriften hier einschließen möchten, Sie die Schriftart müssen Sie die Schriftart nur rückgängig machen und den Speicherort Ihrer Schriftdatei erwähnen. Im Moment haben wir es nicht mit Schriftarten zu tun, weil es nicht das Wichtigste in Ihrer Anwendung für Anfänger ist. Jetzt mehr über diese Pub-Spezifikationsdatei. Denken Sie daran, das erste Wichtigste ist diese Version. Und im Moment werden wir es nicht benutzen. Sie verwenden es nur, wenn Sie Ihre Anwendung in einem Android - oder App Store, Apple App Store, veröffentlichen Ihre Anwendung in einem Android . Zweitens ist der Ordner „ Abhängigkeiten“. Jetzt fragst du mich vielleicht, was ist diese Abhängigkeit? Wenn Sie ein externes Paket haben, unser Plugin in Year Flood Anwendung zu implementieren, verwenden wir diese Abhängigkeiten Sache. Und wenn ich Ihnen ein externes Paket erzähle , haben Sie dafür eine Website namens Pub Deaf. Sie können einfach sehen, dass ein Paketmanager für die Flutter-Anwendung ist. Hier bekommst du viele Pakete und alles. Siehe Parser-Teil, Google-Anmeldenummernauswahl und ich nehme teil. Dies wird Ihnen also helfen, die Anwendung sehr schnell zu erstellen, und Sie müssen sie definitiv verwenden. Also gehe ich einfach auf die Suche. Angenommen, HTTP. Dann haben Sie diese STDP-Bibliothek. Geh einfach. Und ihre Abhängigkeiten müssen Sie es einfach so kopieren und unten und speichern. Aber im Moment machen wir es nicht, weil das davon abhängt. Dann verwenden wir derzeit eine Untereinheit, die wir derzeit verwenden, zumindest zeigen, was diese Assets und Pub Spec Dot YAML-Datei ist . Und was sind externe Abhängigkeiten , die Sie später ausgiebig verwenden werden , wenn wir eine Zwischendatenanwendung erstellen. Ich hoffe, Sie haben die Konzepte verstanden. Danke. 5. Text und Gerüst: Jetzt ist es an der Zeit in dieser Sitzung, wir werden direkt auf das Konzept der Flattern eingehen. Das heißt, wir müssen uns die Hände schmutzig machen, indem wir selbst Code schreiben. Bringen Sie Ihren VS-Code heraus und gehen Sie einfach zu Main.Jack. Was Sie tun müssen, ist, dass Sie einfach den ganzen Code außer der Hauptfunktion entfernen müssen einfach den ganzen Code außer der Hauptfunktion entfernen . Genau so entfernen wir einfach den gesamten Code. Und in der Datei main.js, die der Einstiegspunkt ist, musst du einfach meine App und meine materielle App schreiben und dann meine erste App titeln. Und dann nach Hause. Das war's. Also haben wir das Materialpaket ganz oben importiert , weil wir sie verwenden werden Material Design Rich, entwickelt von Google, dem Materialdesign von Android. Für iOS haben Sie ein Cupertino-Paket, das Sie auch verwenden können, aber es funktioniert nur auf Mac-System. Werden Sie sagen, dass Sie ein iOS-Gerät benötigen , damit es gut aussieht? Aber die meiste Zeit verwenden Sie das Materialdesign und verwenden einfach ein paar iOS. Buttons sind auch Elemente , wenn Sie in Zukunft möchten. Und Sie können auch sehen, dass wir Schulden im Materialdesign umsetzen. Warum verwenden wir hier die Metadaten-App. Und die materielle App ist eine Jungfrau. Wie gesagt, es sind der Name und dann Klammern, die zwei Eigenschaften akzeptieren. Das ist der schnellste Titel und der zweite ist ganz. Titel ist der Name Ihrer Anwendung, der in diesem Text angezeigt wird, aber es ist Austragungsort. Gehen Sie aus Ihrer Bewerbung heraus , wenn sich Ihre Bewerbung im Hintergrund befindet. Aber und dieses Zuhause ist das Hauptlayout, das für den Benutzer sichtbar sein wird. KV hat also unsere erste Flutter-Anwendung. Sie haben bisher verstanden, dass die Hauptfunktion der Einstiegspunkt ist. Danach fragst du mich vielleicht, was ist diese Run-Up-Ran-App? Ist das die Schuld? Was Sie sagen werden, es ist die Standardansicht des Flatterns beim Ausführen unserer Anwendung. Man muss sich also nur daran erinnern, weil es vordefiniert ist. Vordefiniert können wir das nicht oder wir können es nicht ändern. Aber wir können mehr über Widgets wissen, was das Kernkonzept ist. Zunächst werden wir also über dieses Text-Widget sprechen. In jeder Anwendung. Auf jeden Fall müssen Sie etwas ausgeben , das der Benutzer lesen kann. Ich dass es sein Benutzername oder was sind einfache Basisdaten. Dazu müssen Sie auch zuerst wissen, welches Widget Sie verwenden müssen, um auf dem Bildschirm zu drucken. Früher haben wir einfach Druck in diesen dunklen Code geschrieben. Denn zu dieser Zeit haben wir gerade in dieser Debug-Konsole gedruckt , was nichts war. Es war nur noch weiter, dass Entwickler Bequemlichkeit haben. Aber jetzt werden wir etwas schreiben , das dem Benutzer angezeigt wird , der eine Anwendung ist. Text ist also dieses Widget als Toluolname und dann Klammern. Und in diesem ist es außer dem ersten als String, was ein Positionsargument ist. Man muss sich auswendig an diese dunklen Konzepte erinnern , um sicherzustellen, dass man nicht verwirrt wird. Fragen Sie was ist das, warum dieser Parameter so gesendet wird und nicht als benanntes Argument? Ich komme auch zum Namensargument zurück. Aber jetzt müssten Sie einfach nur speichern, dann Ihren Emulator aufrufen und Ihre Anwendung ausführen. Und Sie können auch sehen , dass Testdatei ihr gehört , weil wir die Gerichte entfernt haben. Wenn Sie möchten, können Sie diesen starren Test einfach entfernen. Vorerst. Weil wir es nicht brauchen. Führen Sie jetzt einfach Ihre Anwendung aus. Du musst es wieder tun, es kann eine Weile dauern. In der letzten Sitzung haben wir auch verstanden, wie Vermögenswerte importiert werden. Deshalb müssen wir Debugging-Sitzung dieses Mal verkaufen müssen. Wenn wir grundlegende Änderungen in der App vornehmen, müssen wir das Debuggen beenden und es dann neu starten , damit dies weiß, welche Änderungen der Druck vorgenommen hat. Ich möchte nur, dass ihr euch vertraut macht. Gewöhnen Sie sich an dieses Widget-Konzept des Schreibens, das Vorname, dann Klammern, dann innerhalb der Klammern I ist , dann wird es ein Namensparameter wie dieser Titel oder Name auf einem nationalen Parameter wie dieses Textfeld. Auch hier wird es ein bisschen dauern, bis du warten musst. Es dauert ein bisschen länger. Es sind zumindest unsere Debug-APKs gebaut. Es ist ein sehr zeitaufwändiger Prozess. Aber damit etwas Gutes passiert, müssen wir warten. Ignoriere einfach, was sie in der Debug-Konsole angezeigt wurden. müssen wir uns keine Sorgen machen. Aber sehen Sie, jetzt wird die Ausgabe hier sein. Und wir haben eine sehr häßlich aussehende erste Predator-Anwendung. Aber sehen Sie nur, dass wir erfolgreich Texte auf dem App-Bildschirm ausgegeben haben. Das heißt, wenn Sie diese Anwendung bitte an alle Benutzer veröffentlicht haben , werden diese Anwendung bei jedem Anhängen diesen Text meiner ersten Flutter-Anwendung sehen. Nun denkst du vielleicht, das sieht sehr hässlich aus. Dieser Text bleibt an der Spitze und dass diese Weiß ihn schön machen, wir werden unsere nächste Region verwenden. Das ist Gerüst-Widget. Was ist ein Gerüst? Um die Farbe der gesamten Anwendung zu ändern oder die AB-Leistenschaltflächen zu verwenden , ist alles wie Navigieren, unteres Blatt oder irgendetwas. Wir verwenden dieses Gerüst-Widget. Es gibt Ihrer Bewerbung ein gutes Aussehen . Es hat alle notwendigen Elemente. Jetzt gehen wir einfach zu unserem Code. Einfach im Haus entfernen und schreiben Sie Gerüste. Dies ist auch ein Widget, das akzeptiert und nicht weiß, welche Eigenschaften akzeptiert werden. Du kannst einfach steuern und Raum und siehst es hier zuerst mein Labor stützen. Dies sind alle Eigenschaften, die es akzeptiert. Zuerst wirst du es tun, du kannst APA wählen. Dieser Teil ist wieder außer einem App-Widget. Die Seite, die das Bart-Widget hat. Klicken Sie erneut auf Typ Control plus Space. Hier werden viele Immobilien geben , die wir von zwei brauchten. Dann akzeptiert dieser Titel den Text, flatterte Steine. Und jetzt startest du neu. 21 kann einfach S kontrollieren und jetzt diese Änderung sehen. Siehst du, es sieht sehr schön aus als zuvor. Nur weil wir ein Gerüst-Widget benutzt haben. Das hier, was auch immer Sie sehen, ist diese AB-Leiste oder dieses weiße Ding ist wegen dieser Kappe für das Widget drinnen. Jetzt ist dieser weiße Teil der Körper, in dem Sie alles ausgeben, was Sie dem Benutzer in den ersten Eigenschaften des Gerüsts zeigen möchten . Dann folgen Sie einfach diesem Komma-Steuerelement und dem Raum und dem rechten Körper. Im Körper haben Sie einen weiteren Text, der uns die Anwendung klären lässt. Und wieder kontrolliere S. Also denkst du vielleicht, dass nichts gezeigt wird. Und dieser Grund liegt daran , dass diese Farbe dieses Textes und der Farbregisterkarte Hintergrund zwei sind. Um nun die Hintergrundfarbe zu ändern, würde ich einfach jedes Licht ins Gerüst gehen . Hintergrundfarbe. Du musst nicht verstehen, was ich gerade mache. Hintergrund, schätze ich. Mal sehen, ob ich die Anwendung neu gestartet habe. Es zeigt meine erste Ebenenabscheidung , weil es keine Farbe hatte. In den kommenden Videos werden wir verstehen, wie man Farben so ändert. Ich habe es jetzt getan, nur um dir die Leistung des Körpers zu zeigen. Dieses rote Ding ist also Stub Body Ihrer Anwendung. Sie müssen sich nur noch daran erinnern , dass APA und Körper Eigentum des Gerüst-Widgets sind. Apa hat Titel als Eigenschaft, die jetzt Text-Widget weit akzeptiert, da Titel berechtigt ist, können Sie jedes Widget haben , das wir einzeln besprechen werden. Wenn wir eine andere Eigenschaft der AB-Leiste sehen möchten, können Sie einfach unter Titel gehen und rechts, zentrieren Sie sich. Und dann stimmt es. Dies ist eine Eigenschaft, die selbst besagt, dass sie diesen Titel zentrieren wird. Dieser Titel der App-Leiste. Wir gehen in den Mittelpunkt Ihrer Bewerbung. Ich hoffe also, dass Sie gerne gelernt haben , weil Sie in der Lage sind , eine grundlegende Buchstabenanwendung zu erstellen. Zumindest hast du gerade etwas auf dem Bildschirm, was sehr cool ist. Im nächsten Video werden wir mehr über Widgets für Erwachsene erfahren, denn wie ich immer wieder sagte, sich bei Flattern alles um Budgets. Danke. 6. Mitten und Floating: Wir werden also weiterhin andere Haushalte erforschen. Da Flint nicht wusste, ob Sie eine sehr einfach aussehende Anwendung haben, verwendet es nicht nur eine UA mit etwas Text darin. Das nächste Widget, über das wir sprechen werden , ist, dass der Besuch des Zentrums sehr einfach ist und tut, was sein Name sagt. Es zentriert jeden starren. Wenn wir also den Text im Körper zentrieren möchten, können wir diesen Text in einen Zentrumsbesuch umwickeln. Sie können das also sehen, meine flache Replikation befindet sich ganz oben links. Wenn Sie es in die Mitte des Körpers haben wollen, dass die Mitte des Bildschirms. Wir müssen es einfach einpacken. Und was meinst du, was meinst du mit „rapt“? Wenn du gehst, kannst du einfach dieses materielle Ding darin sehen , dann ist es Gerüst. Dieser App-Teil ist Wrap unters Gerüst. Dieser Text ist in die AB-Leiste eingeschlossen. Wenn ich es jetzt verwenden möchte, Textcenter Budget, können Sie einfach gehen. Ein Schritt besteht darin, die Pflege einfach zu kopieren oder zu schneiden. Dann zentriert Chai starr. Das ist starr. Dann gehen wir rein, wir haben ein Kindereigentum und wir haben uns einfach verdreht. Dies wird also von einem anderen Widget umwickelt, das zentriert ist. Und als Kasse unsere App. Siehst du, wir haben diesen Text in der Mitte des Bildschirms. Denk dran, ich habe dir gesagt, dass dies ein erster Weg war und der zweite war, dass ich es einfach rückgängig machen werde. Der zweite Weg ist einfach Cu, klicke auf diese Glühbirne. Denk so Fixes. Und hier kannst du ein Widget erstellen und einfach nur ein Zentrum. Dies ist auch eine andere Möglichkeit, dasselbe zu tun. Denn wenn wir eine größere Anwendung haben, ist es unmöglich, dass wir ständig einfach ausschneiden und einfügen , da es viele Kommas gibt , sie sind keine Klammern, die an unserer Anwendung beteiligt sind. Jetzt. Denken Sie also daran, dass wir die Zeichenfolge nicht direkt in dieser Mitte drucken können, als würde ich sie einfach ausschneiden und sehen, dass Sie hier einfach direkt eine Zeichenfolge schreiben können . Nein, Sie müssen Kindereigentum in diesem Kind verwenden. Sie haben, und Sie müssen ein anderes Widget verwenden, nämlich das Text-Widget. Im Moment verwenden wir, aber da Child ein Datentyp von Widget ist, können Sie hier sehen, ob ich den Mauszeiger darüber fahre, bedeutet das, dass es jede Region akzeptiert. Das Gesetz, das wir nicht über andere Widgets erfahren haben. Deshalb verwende ich nur das grundlegende Text-Widget. Ich hoffe also, dass Sie das Center-Widget verstanden haben. Es ist ein sehr einfaches Widget. Das nächste Widget, über das wir sprechen werden , ist die schwebende Aktionsschaltfläche. Also gehe ich davon aus, dass du die WhatsApp-Anwendung bereits kennst. In deiner WhatsApp-Anwendung unten rechts siehst du ein Symbol auf unserer Schaltfläche. Das ist der schwebende Action-Button. So können wir die schwebende Aktionsschaltfläche durch die Eigenschaft mit dem gleichen Namen implementieren , der eine schwebende Aktionsschaltfläche zum Gerüstbesuch ist . Was ich damit meine. Du hast dein Gerüst. Wir haben es hier gemacht. Als erstes Objekt haben wir ihm gerade eine Hintergrundfarbe gegeben , da wir es rot machen müssen. Zweite Unterkunft war die AB-Bar. Drittes Eigentum war Leiche. Jetzt haben wir dieses Komma drin. Wenn ich ein C kontrolliere, gibt es so viele andere Eigenschaften, die ausgenommen sind. Aber wir werden den schwebenden Action-Button benutzen. Diese schwebende Aktionsschaltfläche akzeptiert also den Widget-Namen. Schaltfläche „Schwebende Aktion“. So. Sie können sehen, dass es jetzt eine schwebende Aktionsschaltfläche hat. Und es muss dies unterstützen, was obligatorisch ist. Zuerst dieses Kind, und das zweite ist gedrückt. Also Kind, wir werden nur eine einfache Textanzeige haben. Ich werde unsere Anwendung speichern neu starten , damit die Änderungen in der Benutzeroberfläche angezeigt werden. Auf der rechten Seite sehen Sie diese Schaltfläche „Hinzufügen“. Dies ist also eine schwebende Aktionsschaltfläche. Im Moment, wenn wir darauf klicken, glaubt es nicht, ob Sie es sehen möchten, Sie können einfach weitermachen, drücken und einfach schreiben, drucken, hallo und speichern. Wenn ich jetzt gehe und rechts klicke, wenn ich gehe und klicke auf unseren Button Hinzufügen. Im Debug kannst du sehen, dass es diesen Hallo-Print gibt , der ausdruckt. Aber die Hauptsache ist, dass Sie verstehen müssen , dass dies die Art ist , Code einer Flutter-Anwendung zu schreiben. Gear-Eigenschaften, es gibt Widgets innerhalb von Widgets. Auch hier Dateneigenschaften. Diese Eigenschaft wird wieder mit Ausnahme eines Widgets angezeigt. Und dann ist dies unkomprimiert wieder die Eigenschaft der schwebenden Aktionsschaltfläche. Sie müssen sich daran erinnern, wo es beginnt, wo es endet, welche Eigenschaft welche starr ist. Und wenn Sie immer noch Länder bekommen, möchte ich nur sagen, dass sie Ihnen , dass dies eine Funktion ist. Wir rufen eine Funktion der schwebenden Aktionsschaltfläche auf und senden dann zwei Argumente, die Menschen nennen. Das ist das erste außer dem Widget speichern. Und die zweite akzeptiert eine Funktion. Das ist wieder für jeden starren dämlichen ersten Buchstaben immer großgeschrieben. Sie können dies sehen f, dieses t, sein Zentrum, das Gerüst S. Also hat jedes Widget Großbuchstaben Phosphor, und jede Eigenschaft akzeptiert ein anderes Widget als Wert. Dies ist also ein eigenschaftliches Kind, es akzeptiert Text und alle diese Eigenschaften haben eine Statistik mit diesen kleinen Buchstaben a, B, a , einem Balken, einer schwebenden Aktionsschaltfläche. Dieses f, das ist die Eigenschaft, dieses f ist Kleinbuchstabe. Und in den meisten Widgets wird diese untergeordnete Eigenschaft. Und hier kann man Kind sehen, das ist auch Kind. Das Kindereigentum wird also üblich sein. Viele zweistellige Ziffern. Wenn Sie immer noch verwirrt sind, werde ich Sie nur bitten für einige Zeit innezuhalten und es einfach alleine zu machen und einige Fehler zu machen , damit Sie es richtig verstehen. Aber ich hoffe, dass dieses Video gelöscht wurde und Ihnen die Informationen von zwei oder mehr Widgets gegeben hat. erste ist der Besuch im Zentrum, und der zweite ist der schwebende Action-Button, dem wir in den kommenden Videos mehr Dinge besprechen werden. 7. Farbe und Styling ändern: Hey, willkommen zurück. In dieser Sitzung lernen wir , wie man die Farbe ändert und unseren Elementen Styling verleiht. Nun, um die Farbe von Elementen wie der AB bar v zu ändern , haben bestimmte Eigenschaften. Wie in einer App-Leiste gibt es eine Eigenschaft namens background-color. Jetzt haben wir es normalerweise freundlich und haben es mit anderen Immobilien zu tun. Wir hatten den Wert von string oder integer oder ein Widget. Aber jetzt ist ein anderer Fall etwas anders. Der Wert einer Farbe wird über die Tastatur beibehalten. Lassen Sie uns punkten und gefolgt vom Namen der Farbe. Jetzt machen wir es praktisch. Wir werden jetzt die Farbe unserer App-Leiste ändern, gehen und sehen jetzt andere Eigenschaften hier. Und einer von ihnen ist Hintergrundfarbe ist nur gerade Farben, dunkel, bernsteinfarben. Es ist eine der Farben. Prüfen Sie jetzt unsere Bewerbung. Dieses Blau, ändert es sich? Ja, es hat sich geändert. Jetzt ist es in gelber Farbe. Gelbliche Farbe. Sie können sich trennen, aber es ist definitiv ein anderer Farbton. Ich hoffe also, dass Sie verstanden haben, dass es sehr einfach ist, Unvorsichtiges zu geben. Diese Farben punkten und wenn dieses Widget eine Eigenschaft hat, die hier ist, seine Hintergrundfarbe, in anderen Grenzen, kann es anders sein. Um nun die Farbe der schwebenden Aktionsschaltfläche zu ändern , müssen wir erneut prüfen, ob es eine Eigenschaft gibt. Jetzt können Sie sehen, dass es eine Eigenschaft namens Hintergrundfarbe gibt, und wir schreiben nur Farben. Dot früher. Diese Farbe war blau. Ich mache es einfach grün. Mal sehen. Funktioniert es? Ich hoffe, ja. Ja, es hat sich geändert. Wenn Sie also eine reale Anwendung erstellen, haben Sie natürlich eine reale Anwendung erstellen, verschiedene Farbkombinationen für Ihre App. Es ist also notwendig, das zu verstehen, welche Farbe zu verwenden ist und wie der Farbcode implementiert wird. Als Nächstes, was wir haben, was wir tun werden, ist, wie wir dieses Textelement stylen. Ändern Sie also die Farbe, unsere Geschenke, das Styling zu einem Text. Wir müssen dem Text-Widget eine Eigenschaft des Stils geben. Jetzt können Sie einfach lesen, es eine Eigenschaft namens style gibt. Gehen wir zum Textelement. Dieses erste ist ein Positionsargument, das bei 0 liegt. Als Nächstes sehen wir uns hier. Ja, ein Stil text-ausrichten Textrichtung. Ich werde Style-Eigenschaft verwenden. Nun, wie ich bereits erwähnt habe, akzeptieren wir auch verschiedene Argumente. Aber dies denken Sie daran, dass die erste Eigenschaft Positionsvektor v den tatsächlichen Text erwähnt hat. Und andere Eigenschaften sind Nim-Argumente, wie eines von ihnen ist eng. Jetzt akzeptiert die Style-Eigenschaft ein anderes Widget als Wert, nämlich das Stil-Text-Schwanz-Widget. Also hier müssen wir nur Textstil schreiben. Und an diesem Wochenende erwähnen , dass sich die Eigenschaften ändern, die wir wollen. Zum Beispiel möchte ich diese Farbe ändern. Farben, dunkelblau. Mal sehen Mal sehen wir es hier. Ändert es sich? Ja. Außerdem möchte ich diesen roten Hintergrund entfernen. Es sieht nicht gut aus. Also ist es fertig. Okay. Jetzt ist die nächste Eigenschaft, die wir verwenden werden, Schriftgröße. Ändern wir nun unsere Schriftgröße auf 30. Sorry, Schriftgröße, es sollte Spaß machen. Sagt ja, es akzeptiert eine ganze Zahl, wir können den W-Wert sagen. Sehen Sie also, die Schriftgröße hat sich geändert. Die nächste Eigenschaft, die wir verwenden werden, ist ihr Schriftstil. Und es wird font-style, kursiv und normal geben. Also was ist das kursiv? Ich hoffe, du weißt , dass es nur eine geneigte Position gibt. Hier. Siehst du das? Und kein Staling, das wir benutzt haben, ist Font-Gewicht. Schrift mit Punkt-Umfrage. Es wird nur einen mutigen Blick darauf werfen. Sieh mal. So stylen wir also zu unserem Textelement. Ja, denken Sie daran, es gibt auch ihre Eigenschaften. Hier können Sie einfach Hintergrund, Hintergrund, Farbe, Dekoration, Schriftart, Familie, Höhe, Buchstabenabstand, Wortabstand, Schatten überprüfen. Wenn du willst, kannst du all diese benutzen. Aber es ist sehr US-Pazifik, ob wir es benutzen wollen oder nicht. In der Regel verwenden Sie jedoch in den meisten anderen Verpflichtungen farbige Schriftgröße und Schriftgewicht. Wenn Sie sicherstellen möchten, dass Text hervorgehoben ist, können Sie dies sagen. Also. Ich hoffe, Sie haben dieses Konzept verstanden , Farbe und Styling zu ändern. Das ist alles für diese Sitzung, wir werden in den kommenden Videos mehr über Widgets erfahren. 8. Was sind Stateless Widget: Hallo, diese Sitzung ist sehr wichtig weil wir darüber diskutieren werden, was Staatenlose sind. Bis jetzt haben wir Code nur in unserer Hauptfunktion geschrieben. Dies ist jedoch nicht der Fall , wenn wir der Verpflichtung glauben, wagen, wir müssen unseren Code definitiv in kleinere Teile aufteilen und sie dort verwenden, wo immer dies erforderlich ist. Wir können unser eigenes Widget erstellen, das mit den anderen darin enthaltenen Widgets fortgesetzt wird. Welche Arten von benutzerdefinierten Build-Widgets sind staatenlose und stateful Region? Im Moment müssen Sie sich nur auf den Zustand konzentrieren, der weniger starr ist. Auf jeden Fall werden wir uns in den späteren Videos um die andere Region sorgen . Hier können Sie also sehen, dass wir eine staatenlose Region schaffen können , indem wir unsere Klasse auf staatenlose Regionen ausdehnen unsere Klasse auf staatenlose Regionen und eine solche Mindestumsetzung für Bier haben. Dies ist also ein sehr grundlegender Code eines zustandslosen Widgets. Gehen wir in die gemeine Datei, lasst uns eine neue Datei namens Home Dot Dot haben. Jetzt können Sie einfach zuerst ein Materialpaket importieren müssen. Dann können Sie einen Klassenstartbildschirm haben, der die staatenlose Region C erweitert. Okay? Also hier ist es fertig. Jetzt müssen Sie einfach gehen und auf diese Glühbirne klicken. Sie können sehen, dass 11 Override fehlt. Wenn du darauf klickst, wird es dir dieses Ding geben. Also hier musst du einfach etwas zurückgeben. Ich bringe dieses Gerüst einfach hierher zurück. Sehen Sie sich also unseren ersten Bildschirm an, das heißt, der Startbildschirm ist geschrieben , der eine staatenlose Region ist. Also fragst du mich vielleicht: Okay, aber was bedeutet das Status-Widget genau? also einfach daran, dass Daten in einem zustandslosen Widget nicht geändert werden können , nachdem sie gerendert wurden. Angenommen, wir möchten, dass nach dem Klicken auf die Schaltfläche die Farbe des Textes geändert werden sollte. Dies ist bei staatenlosem Lesen nicht möglich , da diese Farbe, also das Grün, gerendert wird. Das ist, wenn wir unsere Anwendung anhängen , sie wird gerendert. In einem Staatenlosen ist es also nicht möglich, die Farbe zu ändern. Später. Es ist, als hätten wir nicht auf User geklickt und etwas Harvard machen oder was auch immer es ist. Wenn der Benutzer damit interagiert, müssen Sie für solche Dinge ein stateful Widget haben. Aber Sie werden den Unterschied zwischen beiden langsam verstehen . Nun, hier, jeder Name, der heißt, dies ist ein staatenloses Widget. Es gibt einen Namen des Widgets und es muss die Funktion namens buildup vermeiden, die ein Widget als Rückgabetyp zurückgibt. Und dieses Widget bedeutet, dass dies Gerüst sein kann, das kann Container sein, das kann eine Schaltfläche sein, das kann ein Symbol sein. Es ist also nicht so, dass das zustandslose Widget immer ein vollständiger Bildschirm ist. Es kann auch eingestellt werden, aber es ist auch ein separater Teil der Codes. derzeit nicht nötig, so viel Stress zu nehmen. Du musst nur mit dem Flow gehen. Also mal sehen wir mal. Implementiert, Lassen Sie uns implementieren, datiert weniger Widget. Nun, dieses Konzept, also was Sie tun müssen, ist einfach darauf zu gehen und dieses Gerüst zu schneiden und es hier einzufügen. in diesen Häusern Können Sie in diesen Häusern einfach einen Home-Bildschirm schreiben müssen? Und oben musst du diesen Bildschirm so importieren. Wenn ich jetzt erneut starte, wirst du sehen, dass sich nichts geändert hat. Aber wir haben unseren Startbildschirm in einer separaten Datei, die weniger starr existierte. Und was ich mit Staatenlos meine, möchte ich es noch einmal erklären. Das ist diese Farbe des Textes, der blau ist, wird nicht geändert, wenn ich versuche, in dieser Anzeige darauf zu klicken. Dies ist also einfach die Bedeutung eines staatenlosen Widgets. Wenn ich nun diese Farbe dieses Bernsteins ändern möchte , um was nochmal sagen zu lassen? Grün, sagen wir blau. Siehst du, das ist, weißt du, und wenn du jetzt siehst funktioniert Control S Hot Reload einwandfrei. Und es lag nicht daran, dass wir alles in der Haupt-Nr.5 geschrieben haben . Nicht so starr. Aber jetzt, wenn wir auf Control S drücken, wird diese Bill Funktion erneut gerendert. Es heißt und wird wieder gerendert. Mein erstes Buchstaben-Projekt jeden Tag und klicke einfach auf Control S. See, es funktioniert einwandfrei. Deshalb funktioniert die Haube Hot Reload. Jetzt überlege ich Sie vielleicht, warum es nicht funktioniert, nur weil wir uns nicht im zustandslosen und stateful Widget getrennt haben. Denn zu dieser Zeit, wenn Lee das funktionieren wird, wird zurückgerufen und die Änderungen werden vorgenommen. Ich hoffe also, dass Sie das Konzept des staatenlosen, staatenlosen Widgets verstanden haben . Und wir sind in der Lage, Ihren Code von einer Datei zu mehreren Funden zu trennen . Mehr darüber werden wir auf jeden Fall erfahren, wann wir einige grundlegende Projekte aufbauen werden. Aber im Moment reicht so viel Wissen aus. 9. Asset und Network: Heute lernen wir, wie man ein Bild in unserer Anwendung anzeigt. Bis jetzt haben wir gerade Text angezeigt, aber die reale Anwendung wird definitiv Bilder enthalten. Jetzt gibt es zwei Arten von Bildern. Hauptsächlich. Das ist eines ist Netzwerkabbild und das andere ist ein festgelegtes Bild. Jetzt Netzwerkbild, wenn wir es für das Bild sündigen, bedeutet das, dass das Bild aus dem Internet kommt. Das heißt, wir hosten dieses Bild nicht oder speichern dieses Bild nicht in unserem Flutter-Code. Also haben wir, wir müssen URL des Bildes haben, um es zu zeigen. Bringen Sie zuerst Ihren Browser heraus und schreiben Sie einfach Googles Bild, das Sie als Flutter-Logo haben möchten. Dann habe ich so viele Bilder, ich habe so viele Bilder, ich wähle einfach dieses Bild aus und schreibe eine Kopierbildadresse. Jetzt können Sie sehen, dass diese Netzwerk-Image-Syntax image.network ist. Dann müssen wir die URL einfügen. Lass uns gehen. Jetzt in der Mitte entferne ich diesen Text und image.net und füge ihn einfach so hier ein. Mal sehen. Können wir das Bild zeigen oder es zeigt, ja, sehen Sie, dies ist das erste Mal, dass wir ein tatsächliches Bild in unserer Anwendung verwenden. Und es war so einfach. Im Moment entfernen wir diese geschichteten Texte starr, weil wir zwei Widgets nicht direkt innerhalb des untergeordneten Objekts übergeben können . Dieses Problem wird definitiv in den späteren Videos gelöst , in denen wir über das Widget diskutieren werden , dem wir mehrere anzeigen können, um mehrere Widgets in unserer Anwendung anzuzeigen. Jetzt gibt es auch einige Eigenschaften, wie hier können Sie die Höhe sehen. So Höhe können wir, wenn ich die Höhe sofort reduziere, sehr wenig, sehr klein geben wenn ich die Höhe sofort reduziere, . Wenn ich es ändere. Siehst du so. So arbeiten wir mit Netzwerk-Images. Jetzt ist die andere Sache ein Asset-Image zum Einfügen eines Images, das bereits in Ihrem System vorhanden ist. Normalerweise machen wir Sie also dazu, Bilder in das Stammverzeichnis wie dieses zu fallen Bilder in das Stammverzeichnis wie dieses haben wir Assets erstellt und gesagt, dass wir vorher ein Bildverzeichnis erstellt haben, weil es sehr saubere Ordnerstruktur ist. Jetzt fügen wir eine Datei so in tot ein. Ich habe diese Bild-6-Punkt-PNG-Datei. nächste Schritt besteht darin, CO2 Pub Spec Dot HTML zu geben und Assets zu entkommentieren, die uns bereits nicht gefallen haben. Weitere Informationen finden Sie in diesen Assets Abschnitt Wir haben uns nicht kommentiert. Es stellt sicher Einrückung befindet, sonst wird es hinzugefügt, was bedeutet. Und diese Datei ist sehr sensibel. Sie müssen also sicherstellen, dass Sie keine zusätzlichen Leerzeichen oder Tabs darin angeben. Es musste einfach so Säuren schreiben. Jetzt wird es wissen, dass in unseren Assets Bilder dort sind. Wir werden ältere Akten sein. Sie können auch Ihren Bildverzeichnisspeicherort mit oder ohne Image-Namen schreiben . Das heißt, wenn wir den Bildnamen nicht so erwähnen den Bildnamen nicht so dann sage ich, dass es richtig ist, weil Vince alle darin enthaltenen Bilder hochlädt. Bei der Auswahl, wie ein Asset-Image früher für das Netzwerk-Image eingefügt werden soll , haben wir dieses Netzwerk einfach erstaunt. Jetzt werden wir Bildpunktsatz, Bild, Punktsatz wie folgt machen. Dann sagen wir einfach Sets, dann Bilder. Wie lautet dann der Name der Datei? Emittieren Sie 6 Punkt PNG. 6-Punkt-PNG. Und jetzt mal sehen, funktioniert es? Sehen Sie, wir haben unsere Asset-Datei hochgeladen, dh unsere Flaggschiff-Anwendung, würde wissen, über welche Datei wir sprechen. Und das kommt nicht aus dem Internet. Jetzt können wir einige Eigenschaften als Seehöhe ändern, wir können so 100 C geben. Mit können wir uns auch ändern. Dies sind die anderen Eigenschaften , die Sie ändern können. Aber im Moment wollen wir das nicht. Normalerweise ist die Höhe in Ordnung. Wir nehmen an, 150 Jahre. Nun, es sieht gut aus. Daher ist es sehr wichtig, diesen Unterschied zwischen Asset, dem Netzwerk-Image, zu verstehen , da Sie in Ihrer realen Anwendung die ganze Zeit mit Bildern spielen werden. Alle Anwendungen haben eine Art Bild in ihnen. Entweder ist es ein saures Bild wie das Apps-Logo, Logo. Es wird sich nicht so leicht ändern. Also können wir es ihnen einfach in unserem Code schicken. Und die Verfügbarkeit, so etwas wie das Profilbild eines Benutzers. Es wird aus der Datenbank kommen, weil der Benutzer es ändern wird, was es häufig macht. Das ist der Unterschied. Das war's für heute. In den nächsten kommenden Videos werden wir über einige andere Widgets sprechen , die unsere Sitzung so fortsetzen. Danke. 10. Icon und Button Widget: Jetzt ist es an der Zeit, sich über andere Budgets zu informieren, wie zum Beispiel den Icon-Besuch. Florida ist mit unzähligen Symbolen , die verwendet werden können, um unsere App schöner zu machen. Wenn Sie eine Anwendung sehen, sei es über Facebook, Instagram, WhatsApp davon, werden Sie definitiv eine Art von Symbolen sehen, weil es so ist, dass es für das Auge sehr angenehm ist. Personen können sich direkt auf dieses Symbol beziehen. Jetzt ist die Syntax sehr einfach. Zuerst müssen wir Icon schreiben. Und darin kann v nicht einfach den Namen des Symbols schreiben. Wir müssen schreiben wie Icons einen beliebigen Symbolnamen. Angenommen, ich kann den Benutzer starten, ich kann Alarm starten, was auch immer. Lass es uns versuchen. Ich entferne das Kind des Bildes. Jetzt. Ich werde nur Icon sagen und dann kann ich einen übermäßigen Alarm starten. Jetzt speichere ich es einfach und sehe unser Icon auf dem Bildschirm angezeigt wird und es ist so einfach. Jetzt können wir, wie jedes andere Widget V, definitiv seine Farbe und die wenigen Eigenschaften ändern . Um die Farbe zu ändern, sagen wir einfach Komma und sehen dann Farbe, Rad, Farben, Orange. Und dann Größe. Ich schreibe an eine 100. Jetzt sehen Sie, dass es so viel größer ist, dass ich einer Kante gegeben habe, nur um Ihnen zu zeigen , dass wir seine Eigenschaften des Symbols ändern können. Und die Sache ist, es ist nicht so, dass wir das Symbol nur in diesem Körper verwenden können . Jetzt kann ich, wenn ich in den schwebenden Action-Button will, einfach Icon und dann Icons schreiben, diese Nachricht da drin. Schaltfläche „Schwebende Aktion“. Sieh. Jetzt kannst du es mit der WhatsApp vergleichen. WhatsApp-App hat auch diese Art von Ich kann auf ihnen landen. Und es sieht sehr gut aus. Ich muss sagen, dass es nach dem Icon-Button ein anderes Widget gibt, das ist der Button-Bereich. Ohne einen Knopf ist jede Anwendung nutzlos. Da Schaltflächen zur Verfügung stehen, um ein Feedback zu geben, erhalten Sie Feedback vom Benutzer. Das heißt, wenn es Umreifungscodons in den Warenkorb legt. Und wenn es sich um ein Formular handelt, müssen Sie das Formular absenden. Wenn ein anderes, wenn zwei Karma, wenn Sie eine Bearbeitung in Ihrem haben, wenn Sie eine Anwendung verwendet haben, sind Sie möglicherweise auf viele Schaltflächen gestoßen. Im Flattern gibt es also drei Arten von Button, Text, Button, erhöhte Schaltfläche, und ich kann sie platzieren. Lasst es uns eins nach dem anderen verstehen. Was ist dieses Lehrbuch? In diesem Text-Button wird es also keine Linderung geben. Unser 3D-Effekt so, wenn ich einfach das Icon hier entferne und Text schreibe. Aber dann ist das erste Eigentum obligatorisch, ist dieses Kind, das heißt, was sollen wir in diesem Button haben, ich werde einfach mit der rechten Maustaste auf mich klicken. Und das zweite obligatorische gilt für die Vorgaben. Was sollte passieren, wenn ein Benutzer auf diese Schaltfläche klickt? Sehen Sie also, das ist eine Textschaltfläche. Es gibt keine Hintergrundfarbe oder Linderung oder es ist nur einfacher Text. Deshalb heißt es so. Wenn Sie unseren Button wirklich ändern oder stylen möchten , können Sie es tun. Aber ich glaube nicht, dass es so unbedingt ist, denn wenn du willst , gibt es andere, aber die Dichte ist erhöht, aber ein Tier. Aber ich zeige Ihnen nur , wie Sie auch ihren Stil ändern können. Wenn Sie die Kacheleigenschaft sehen und akzeptiert, wenn es sich um einen Text handelt, aber es akzeptiert Texte, aber dann Punktstil von und innen, dass Sie einfach primär schreiben können, das ist die Farbe des Hintergrunds und diese Orange. Sehen Sie, dass sich die Farbe geändert hat. Wenn du willst, kannst du etwas Polsterung geben. Kanteneinsätze, Bereiche, oder? Einfach 10. Für die Polsterung wird es momentan nicht angezeigt. Wir können Hintergrundfarbe, Hintergrund Schwarz hinzufügen, wenn Sie diese Farbe wirklich wünschen. Denn was passiert normalerweise wenn du diese Art von Knopf wirklich willst? Sie werden direkt zur Schaltfläche „Heben“ gehen, da diese Funktionen automatisch angezeigt werden. Aber es ist in Ordnung. Dann. Irgendeine andere wichtige Sache? Das glaube ich nicht. So wichtig ist es. Nein. So zeigen Sie eine Textschaltfläche an. Und wenn Sie wirklich möchten, können Sie es so gestalten, dass Sie Texte verwenden, aber 10-Punkt-Stil aus und geben Sie dann verschiedene, unterschiedliche Eigenschaften an. Denken Sie daran, ob ich dieses Styling entferne. Dies ist eine grundlegende Textschaltfläche. Aber was passiert, wenn ich einen erhöhten Knopf benutze? Wenn ich einfach nur bin, ist die Syntax dieselbe. Wenn ich hier einfach nur einen begrenzten Button schreibe, dann sehen Sie, dass die Hintergrundfarbe ist , dass ihre Textfarbe weiß ist und eine gewisse Linderung gedreht wird, da ein 3D-Effekt gegeben wird. Deshalb verwenden wir den erhöhten Knopf, da es sehr praktisch ist. Nun, wenn du willst, kannst du es wie hier stylen. Wir haben einen begrenzten, aber dann Punktstil von und Primär wird hintergrundfarbe gemacht. Lasst das meinen. In Text-Schaltfläche. Ich meine, es war diese Textfarbe, aber hier ist es die Hintergrundfarbe. Wenn du jetzt Linderung willst, kannst du ihm einfach fünf geben. Sie können sehen, dass noch einige 3D-Effekte vorhanden sind. Wenn Sie die Polsterung ändern möchten, können Sie Kanteneinsätze ändern. Bei T C ist das Auffüllen auch erledigt. Wenn Sie nun die Form ändern möchten. Sie können dies auch mit einem abgerundeten rechteckigen Rand tun. Und dann Grenzradius Grenzpunkt. In einem Randradius Punkt. Und Sie können in Jahren das kreisförmige als a1 von allen Seiten verwenden , kreisförmig, Radius-Punktsatz von polar und geben Sie hier zehn. Siehst du, wenn ich zwei in D gebe, wirst du mehr bemerken. Diese Form wird durch diese Show aufgrund der von uns gegebenen ADS geändert . Und hier, Styling hast du sie verstanden. Und das vor Ort ist einfach das, was passieren sollte , wenn ein Benutzer auf den Knopf drückte. Also schreibe ich Zeit, drucke einfach. Aber normalerweise machst du hier eine Art von Aktivität, seh so. Bis jetzt haben wir Texte besprochen, aber dann einen erhöhten Knopf. Die letzte Art von Schaltfläche ist die Symbolschaltfläche. Also einfach was es tut, es ist eine Art Ikone, auf die wir drücken und etwas tun können. Und wir haben gerade den vorherigen Code entfernt und ich kann einfach angehoben. Aber dann wird es beim Drücken in älteren Tasten sein. Und im Icon. Ich habe dir bereits beigebracht, wie man ein Icon anzeigt. Dieses Icon hier, zur Kasse. Jetzt ist dies ein Icon, aber Sie können darauf klicken. Sie können es hier anklicken. Jetzt können Sie herausfinden, welche anderen Eigenschaften es akzeptiert, wie Farben, den blauen Akzent. Dann kann ich sagen, dass du 100 geben kannst. Siehst du, es sieht so gut aus. Und wenn es noch etwas gibt, Splash Color, denken Sie vielleicht, was ist die Splash-Farbe? Mal sehen. Sieh. Wenn ich darauf klicke. Dies ist die Splash-Farbe. Und ähnlich hat es auf der Presse , die ich einfach drucken werde. Das kann ich. Aber dann sehen Sie im Debug, dass Sie den Can-Button sagen können. Also haben wir alle drei Knöpfe erfolgreich abgedeckt. Das ist eine erhöhte Textschaltfläche, aber eine NDA-Symbolschaltfläche. Und auch wie man Icons in unserer Fluttern-Anwendung benutzt. in dieser Symbolschaltfläche daran, dass die untergeordnete Eigenschaft nicht vorhanden ist. Hier. Ich kann dort Eigenschaften haben , die ein Icon akzeptieren. Und in Alda-Tasten ist das gedrückt obligatorisch. Sie müssen also erwähnen, was passieren sollte wenn jemand darauf klickt, denn da es sich um eine Schaltfläche handelt, müssen Sie wissen, was danach passieren sollte. Das war's also. Ich hoffe, Ihnen gefällt der Kurs und lernen mehr über verschiedene Arten von Widgets. Wir sehen uns im nächsten Video. 11. Container: In dieser Sitzung werden wir über das Container-Widget sprechen. Was ist ein Container? Ein Container wickelt einfach sein Budget um. Wenn Sie also mit dem Konzept von div in der Webentwicklung vertraut sind , funktioniert es genauso. Wir verwenden dieses Widget, damit wir diesem Element einen Rand geben können diesem Element einen Rand geben und viele , und viele andere Eigenschaften sind die beiden darin enthaltenen Widget. Stellen Sie sich es also einfach als Wrapper vor, der verwendet wird , um die anderen Widgets zu manipulieren. Was ist die Syntax? Die Syntax ist sehr einfach. So wie das. Container ist der Budgetname und die untergeordneten Münzstätten, die sich in diesem Container befinden sollten. Also, okay, fangen wir damit an. Ich würde einfach sehen, diesen vorherigen Code zu verschieben und hier ein Container-Widget zu haben. Im Kind. Ich werde zuerst die Decks Region haben. Es wird also so sein. Und das nicht. Es ist, als wäre Flirted genial. Lasst es uns retten. Mal sehen wir hier. Sie können also sehen, dass Text vorhanden ist, aber es gibt nichts, als würden Sie nicht einmal bemerken, dass er in ein Container-Widget eingewickelt wurde. Was wir also tun müssen, wenn Sie diesen Container sehen möchten, ist die erste Eigenschaft, die Sie verwenden können, diese Farbeigenschaft. Farben fangen an zu fürchten. Sie wissen bereits, wie man Farbe nicht benutzt. Sieh. Jetzt können Sie sehen, was das ist, dieses rote Ding ist dieser Container, Sie jetzt auch als Schachtel sagen können. Das ist also der Container und er hat unterschiedliche, unterschiedliche Eigenschaften. Erste Eigenschaft, erste zwei, wir verwenden Kind und Farbe. Mal sehen, was Padding und Marge ist. Okay? So werden Polsterung und Rand verwendet, um den Abstand zwischen den Elementen zu erhalten. Was ist eine Polsterung? Polsterung ist der Raum im Inneren, was bedeutet, dass Sie dieses fantastische II und die Box sehen können, und das ist hier, rotes Ding. Die Erkenntnis breitet sich aus. Und das rote Ding endet blau. Das ist das Äußere, äußere Sache ist Marge. Sehen Sie es sich an dem Beispiel an und wir geben ihm einfach eine Padding-, Padding- Eigenschaft und es akzeptiert einen Wert als Kanteneinsätze. Danach, nach dem sagen Sie, wenn Sie auf Punkt-Punkt-Punkt klicken, dann haben Sie andere die Option Das ist alles von links, rechts, links, oben, rechts, unten auf Lee symmetrisch. Der Einfachheit halber werde ich alles verwenden, was von der ältesten Seite stammt. Ich gebe ihm 20. Nun sehen Sie, sehen Sie aus der Erkenntnis, dass dies, dies und das, Dies ist die Polsterung und es sieht kompatibel schöner aus als zuvor. Das ist also die Polsterung. Und was ich sagte, ist die nächste Eigenschaft, die Marge und Verschmelzung ist, ist der Abstand außerhalb dessen, ob es hier ist, hier sind oben und links hier. Wenn ich also zum Rand gehe und wieder marginal gehe, so akzeptiere ich Werte, Kanteneinsätze, und für all das gebe ich 20. Also wirst du diesen Unterschied jetzt kennen. Sehen Sie von außen hier, dass Sie diese Margen-Sache bekommen. Sie können auch hier nachlesen. Margin ist Platz außerhalb und Polsterung. Alter ist Raum im Inneren. Diese Eigenschaften gibt es auch, wie zum Beispiel Breite. Wenn ich auf „Warten“ klicke und ihm den Wert von Angenommen AT gebe, dann schrumpfen Sie. Wenn ich einen Tag gebe. Es ist so. Wenn ich dazu komme, wird es noch weiter gehen. Das sind also die Container darin, wenn ich keinen Weg gebe. Es wird alles brauchen, was drin ist. Es gibt eine SMS und das sind wir nur. Jetzt. Es gibt eine andere Eigenschaft, die sich innerhalb des Containers befindet, nämlich die Ausrichtung. Und es hat es außer Sibelius-Ausrichtung. Angenommen oben links, oben links, oben rechts. Sehen Sie jetzt, ich muss eine Rate von 250 und eine Höhe von 50, 58 Jahren angeben 250 und eine Höhe von 50, . Es ist weniger nachdem du D. Die Ausrichtung gegessen hast . Gerade jetzt. Die Sache ist, dass es kein anderes Element gibt, ist nur dieses Element hier. Deshalb funktioniert die Ausrichtung nicht, weil die Höhe oder Position diese Seite ist und nur so viel Fläche ist. Wenn ich es gerade in C entfernt habe, nimmt ich jetzt den ganzen Bildschirm. Das ist die Sache, die wir zuerst Höhe und Gewicht des Behälters dessen zuweisen Höhe und Gewicht des Behälters was sie darin eingewickelt haben. Dann nur der Wrap. Diese Ausrichtung wird funktionieren. In den kommenden Videos werden wir eine schönere Anwendung erstellen . Dann werde ich Ihnen diese Ausrichtung beibringen und wann Sie den Alignment-Code verwenden müssen. Denn im Moment denkst du vielleicht: Nein, das funktioniert nicht. Warum funktioniert es nicht? Wir haben vielleicht zu viele Fragen. Und diese Eigenschaft ist die Deklaration des Container-Widgets, die die Dekoration der Box als Wert ausnimmt. Jetzt können Sie auch in der Kastendekoration eine Form geben. Kastenform, Kreis. Dekoration im Inneren des Kastens. Sehen Sie, wann Sie Box-Dekoration verwenden. Die Sache ist, diese haben auch eine Eigenschaft von Farbe, sodass Sie nicht mehrere Farben angeben können. In diesem Fall müssen Sie Farbeigenschaft innerhalb der Kastendekoration erwähnen. Und ich werde wieder Polsterung geben, damit der Kreis ein bisschen schöner aussieht, er ist drin. Jetzt haben wir keine Box-Dekoration gemacht. Es gibt Farbe, Rahmen, Randradius, Kastenschatten. So können Sie diese Eigenschaften auch verwenden, um Ihren Behälter zu dekorieren, der ganz auf Ihre Bedürfnisse zugeschnitten ist. Wenn Sie es also brauchen, können Sie es auch alleine ausprobieren. In den kommenden Videos werden wir also über die allerletzten Besuche sprechen , die noch diskutiert werden müssen. Danke. 12. TextField Widget: Heute werden wir über TextField Virgin diskutieren. So lässt er Text den Benutzer Text eingeben. Entweder haben wir sehr gemietet , sind innerhalb der Bildschirmtastatur. Es ermöglicht uns also im Grunde genommen , Informationen vom Benutzer zu sammeln. Wenn Sie eine mobile Anwendung verwendet haben, wissen Sie, dass Text das Rückgrat des Schuldenantrags ist. Nun, was diese Syntax ist, es ist eine sehr grundlegende Syntax des TXT-Textfeldes. Dann wie du willst unsere Klammer. Versuchen wir es in ihrem Körper. Ich werde den vorherigen Container entfernen und ihn Text, Textfeld haben . Hier. Wenn ich es speichere, dann wirst du das sagen, diese Zeile. Und wenn ich darauf klicke, haben wir unsere Tastatur. Ich kann schreiben, was ich will. Aber die Sache ist, dieses Textfeld dem Benutzer nichts aussieht oder sagt. Der Benutzer weiß nicht einmal, was er darin schreiben soll. Dafür müssen wir einige andere Eigenschaften darin verwenden, die wie Dekoration sind. Dekoration, und es akzeptiert Eingabedeklaration ist ihr Wert. Darin. Hier sehen Sie viele Optionen. Ich verwende zuerst Hinweise oder beschriftete Texte. Wenn Sie den Mauszeiger darüber bewegen, akzeptiert es direkt eine Zeichenfolge, kein Widget. Also können wir einfach richtig sagen, so nennen. Und Sie können jetzt sehen, dass es bis nach 10 Stück aussieht, denn wenn wir darauf klicken, wissen wir, was wir darin schreiben müssen. Jetzt gibt es neben beschrifteten Texten noch viele andere wie Grenzzähler aktivieren, aktivieren Sie es ist, wenn dies fehlschlägt, sollte für diesen Moment deaktiviert werden oder nicht. Hinttexte sind genau wie und vollständiger Name, bitte. Und wenn ich spare. Werden Sie nun in diesem Text diesen Hinweis sehen. Das heißt, wir müssen unseren vollständigen Namen schreiben. So können wir zumindest einige Dummy-Daten geben die dem Benutzer einen Hinweis darauf geben, was er schreiben muss. Eine andere Sache, die Sie haben können, ist ein Präfix-Symbol. Die Icons geben etwas visuelles. Man kann visuell sagen es gut erscheint, wenn wir ein Ich kann jetzt sehen, dieser Text sieht vergleichsweise besser aus. Mit diesem kleinen Icon auf Live. Es gibt etwas mehr wie Grenze, die wir erhalten können Input-Grenze. Jetzt. Jetzt kannst du es nicht richtig sehen. Ich mache was? Ich werde es einfach um den Container wickeln , den wir gerade gelernt haben, und verschaffen einen Vorsprung. Einsätze. 20. Siehst du, diese Grenze sieht so gut aus. Und sieht so netter aus. Und wenn ich den Eingabe-Grenzpunkt keinen gebe, dann wird der gesamte Rand C verschoben. Aber normalerweise gefällt mir dieser Umriss in Put Powder. Jetzt denken Sie vielleicht, dass nur so viele Immobilien noch vorhanden sind. Es gibt also viele Immobilien die wir auf jeden Fall richtig besprechen werden. Denn ohne ein Textfeld können wir keine Anwendung erstellen. Maxlength sagt uns einfach , dass der Name nicht beleuchtete Dan-Zeichen enthalten sollte. Nicht mehr als das. Es kann verwendet werden, wenn wir ein Passwort verwenden, beliebige Telefonnummer, es sollte eine bestimmte Anzahl von Ziffern enthalten sein. Nicht mehr als das. Und jetzt, im Moment werden wir nur sehen, dass die onchange-Eigenschaft viel bekommt, was aufreicht, aber bei Änderung bedeutet, dass sie eine Funktion gibt die uns unabhängig von ihrem Rückgabetextfeld einen Wert gibt. Wir werden diesen Wert in unserer Debug-Konsole drucken . Jetzt. Wir haben einfach ein Flattern. Sieh mal. Wenn Sie möchten, können wir ihn jetzt mit diesem Wert einer Variablen zuweisen und diese Variable dann überall verwenden, wo wir möchten. Es liegt an uns, was wir tun wollen. Aber auf jeden Fall hat TextField eine wichtige Regel. Und mehr darüber werden wir im nächsten Modul besprechen. Danke. 13. Spalte und Row: In dieser Sitzung werden wir über ein sehr wichtiges Widget sprechen . Wir werden also über zwei Widgets sprechen. Das erste Widget ist das Spaltenbudget. Wenn Sie es also bis jetzt bemerkt haben, wir damals nur ein Widget ausgegeben. Aber es passiert nicht in einer echten Anwendung. Ein Bildschirm enthält mehrere Widgets, wie abgebildete Texte, aber insgesamt. Zu diesem Zweck wird ein Spalten-Widget verwendet, da es hilft, Widgets in vertikaler Richtung auszugeben , also wird ein Spalten-Widget verwendet da es hilft, Widgets in vertikaler Richtung auszugeben , von oben nach unten. Deshalb ist der Name der Spalte. Die Syntax ist sehr einfach. Wir müssen einfach den Spaltennamen auswählen. Das heißt, der starre Name ist Spalte. Aber hier wird jetzt eine Sache geändert, weil ich mit jedem Widget lebe , das wir untergeordnete Eigenschaft verwendet haben. Aber hier sind es Kinder. Und einfach weil wir mehrere Widgets ausgeben werden. Und deswegen ist es ein Plural-Telefon. Also ja, bring deinen Texteditor raus. Und ich werde einfach am Körper enden. Ich werde nur den vorherigen Code und die Nacht-Spalte verschieben sehen. Dann werden hier Kinder sein. Kinder. Wir Insulin scannen Sie einfach von oben nach unten, welche Elemente Sie drucken möchten. Ich werde nur das erste hohe V, ich lerne. Flattern. Dann nächstes Widget können Sie die Schaltfläche „erhöhte“ verwenden. In diesem Kind können wir Text des Einreichens haben. Lasst uns sparen und sehen. Sieh. Zum ersten Mal konnten wir zwei Widgets gleichzeitig ausdrucken , Indizes. Dies ist also die Verwendung des Spalten-Widgets, wenn Sie möchten, nachdem Sie es eliminiert haben, aber dann können Sie Bildpunktsatz verwenden und dann Bilder, Bild sechs, PNG festlegen. Hier haben wir schon, wir haben dieses Bild hier. Sieh. Jetzt haben wir drei Elemente auf der Haut. Zuerst ist ein Text-Widget, das zweite ist ein erhöhtes, aber dann, und das dritte ist das Bild. Jetzt sehen Sie hier im Notizenbereich, dass Kinder benutzt werden. Anstelle eines Kindes. Alle Elemente sind durch ein Komma getrennt, weil es einfach heißt Es ist eine Liste von Widgets, das ist Y. Und jedes Widget ist der Reihenfolge dieses Widgets wird dieselbe sein , wie Sie es hier schreiben. Nicht dieses Bild wird von oben nach unten ausgedruckt. Dead ist ein weiteres Widget, mit dem Sie ein Objekt von links nach rechts ausdrucken können. Rho ist also auch gleich wie Spalte. Es hilft, mehrere Widgets auszugeben, aber eine Zeile hilft Widgets in horizontaler Richtung auszugeben. Und wir ändern einfach zuerst die Größe und das Gewicht. Es ist zu groß. Das Gewicht wird ein 100 sein. Siehst du, es schaut jetzt auf das Waschbecken. Die Syntax ist die gleiche. Ich ändere einfach diese Zeile. Also diese Spalte zu reihen und zu speichern. Jetzt wird dieses horizontale Ding vertikal. Dies ist also ein sehr wichtiges Element denn wenn Sie eine vollständige Benutzeroberfläche erstellen, Sie bei jedem Bildschirm von Getty verwenden Sie bei jedem Bildschirm von Getty entweder eine Zeile oder eine Spalte. Kombination aus beidem. Zeile hat eine andere Eigenschaft, die Hauptachsenausgleichungen Schulden ist. So sollten die Elemente auf dem Bildschirm angezeigt werden. Wenn wir also den Raum gleichmäßig schreiben, von links gesehen, überall links, ist all dieser Leerabstand gleich. Und wenn ich Leerzeichen dazwischen schreibe , dann ist c die äußere linke und extreme Seite. Der Abstand ist nicht vorhanden. Und es gibt auch Zentrum. Alles wird in der Mitte zusammenkommen. Die interessante Tatsache ist also, dass in Reihe und Spalte Port diese Hauptausgänge haben und Cross vorhanden sind. Der einzige Unterschied besteht darin, dass Sie sich daran erinnern müssen , wenn Sie die Hauptzugriffe von links nach rechts zeichnen. Und die Querachse wird von oben nach unten sein. Das heißt, wenn ich x's Kreuz-Existen-Ausrichtung kreuze, ist das zentriert. Das glaube ich nicht. Es ist wirklich gerade, denn das Element befindet sich bereits in der Mitte, weil dies nur so viel Platz benötigt, nicht den ganzen Bildschirm. Deshalb wurde es nicht ins Zentrum geschickt. Aber Cross-Erfolg für eine Reihe bedeutet von oben nach unten und main existiert von links nach rechts. Und ähnlich befindet sich in einer Säule die Hauptachse von oben nach unten und die Querachse ist von links nach rechts. Du musst also einfach alleine üben und versuchen zu verstehen, was ich gerade gesagt habe. Weil das Konzept sehr einfach ist. Spalte und Zeile wir sind, wir verwenden es nur, um mehrere Elemente in eine bestimmte Richtung auszugeben . Und wir können auch eine Spalte in einer Zeile und eine Zeile innerhalb der Spalte verwenden. Und damit können Sie mit Hilfe von denen und Lee eine vollständige Benutzeroberfläche erstellen. Danke. In der kommenden Sitzung werden wir also über ein anderes Widget sprechen , das sehr wichtig ist und das uns helfen wird, mehrere Elemente auszugeben. Danke. 14. ListTile und ListView: In dieser Sitzung, in der wir Besuche erkunden, werden wir darüber sprechen, was unser ListView-Widget ist und was ist das ListView-Widget. Ein Listenstil ist also eine einzelne Zeile, die normalerweise X enthält, etwas Text sowie ein führendes oder nachfolgendes Symbol aus dem Bild enthält, nur Sie können verstehen, wie, was ist ein Listenstil und wie er aussieht. Es mag einige der Benutzeroberfläche ähnlich oft was ich hoffe, dass Sie es lieben, Sie haben ein WhatsApp-Konto und sind dem sehr vertraut. Was ist also die Syntax? Es ist einfach seine Kachel. Dann sind dies die Eigenschaften, die es akzeptiert. Probieren Sie es weniger zuerst selbst aus. Ich werde zuerst nur eine Listenkachel haben. Dann werde ich im Titel einen Text von Elon Musk haben. Lasst uns sparen. Sieh. Es ist also, was es sagt, eine Art horizontales Ding. Dann ist das andere Element, welches andere Eigenschaft ich verwenden werde , untertitelt zum Mond. Untertitel ist nur Seton, hat eine kleinere Schrift und die Standardfarbe ist etwas irgendwo Krebse. Dann führt eine andere Immobilie an, das sollte eine Duff-Front sein. Ich benutze hier ein Icon. Und ich kann bei Count Circle anfangen. Und wir geben ihm die Farbe der Farben, Blau und Größe für t. Lass es uns ausprobieren. Siehst du, das habe ich gesagt. Dies ist das führende Symbol. Und jetzt ist eine andere Eigenschaft, viele Immobilien, aber eine weitere wichtige ist das Nachlaufen. Das ist es, was am Ende sein sollte. Ich werde ein erhöhtes aber zehn vermuten. Und es wird nur einen Text davon haben, was der Text sein sollte. Es ist keine gute Idee, einen solchen Knopf zu benutzen. In diesem Trailing. Ich werde nur eine Ikone haben. Aber wenn ich will, dann werde ich im Icon verzögert beginnen. Sehen Sie, wir haben hier ein Icon. Das Nachlaufen bedeutet das Ende des horizontalen Dings, den vorderen Wind, das Vorderelement. Und die letzte wichtige Eigenschaft ist das Untap. Das heißt, was passieren sollte. Was hätte sein sollen, wenn der Benutzer auf diese Kachel klickt. Also in der Konsole siehst du gerade, ich klicke hier und sehe dann muss. Ich spreche nicht von diesem Button. Dies haben wir, wenn wir etwas Gutes tun wollen, müssen wir es in diesem On-Premise schreiben. Aber diese ganze Kachelsache druckt diesen Elon Musk aus. Sag, ich habe fünf Zehntel drauf geklickt. Deswegen ist es so hier. Dieser Listenstil ist auch ein sehr interessantes UI-Widget, da es sich um ein Bündel aller Dinge handelt, die wir möglicherweise in unserer Anwendung benötigen. Jetzt wissen wir bereits, was ein Spalten-Widgets ist. Ich werde es einfach um die Spalte wickeln. Sehen Sie, dass sich nichts ändern wird. Was ich jetzt machen werde, ist, dass ich über das nächste Element sprechen möchte , nämlich ListView. Aber bevor ich dazu gehe, möchte ich Ihnen das Problem mit der Kolumne zeigen. Wenn ich, wenn ich diesen Listenstil habe, so oft, mehr, wenn ich es habe, wenn ich mu2 mal drücke, wenn ich mu2 mal drücke, sehen Sie unten einen Fehler, das heißt, der Boden ist unsere Flüssigkeit. Das wenn wir direkt Recht haben. Spalte hier wie folgt, es wird Fehler angezeigt und es ist nicht scrollbar. Hier kommt also unser nächstes Widget, das Listenansicht ist. Listview ist wie eine Spalte. Das heißt, es druckt das Ding. Alda-Widgets von senkrecht nach oben nach unten. Aber es ist auch eine scrollbare Sache. Wenn ich hier List View schreibe und speichere sie. Der Fehler ist, dass wir in der Lage sind , durch unsere Elemente sind Widgets zu scrollen. ListView ist also wieder das Gleiche wie Spalte auf Führung. Der Hauptunterschied ist, dass es sich um Korallenebene handelt und denken Sie daran, es gibt die Widgets standardmäßig in vertikaler Richtung aus, wenn Sie es ändern möchten, können Sie es einfach hier im Scrollrichtung und Zugriffspunkt Sie können ihn auch vertikal angeben. Aber auch unser horizontales Saudi waagerecht. Aber die Sache ist, dann sollte das Element anders sein da Sie vertikal keinen Listenstil drucken können. Vielleicht denken Sie auch darüber nach, was sollten wir tun, wenn Sie keine Daten verwenden möchten? Säule starr? Wir möchten das ListView-Widget jedoch nicht verwenden, möchten diesen Fehler aber dennoch entfernen. Da offensichtlich die gesamte Anwendung, alle Seiten des Bildschirms, die wir verwenden, so viele Elemente auf diesem Bildschirm haben werden. In diesem Fall können Sie einfach das oberste Element anpassen, das heißt, dies ist das oberste Element des Körpers. Sie können es einfach mit einem Widget umschließen und dieser Besuchsname ist eine einzelne untergeordnete Bildlaufansicht. Du erinnerst dich nur an diesen Namen , weil es ein Game Changer ist. Und dies wird Ihnen helfen, das Spalten-Widget scrollbar zu machen. Sehen Sie, dass der Fehler verschwunden ist, und im Moment diese Spalte jetzt, ohne dass unten hinzugefügt wird scrollt diese Spalte jetzt, ohne dass unten hinzugefügt wird. Wenn Sie möchten, können Sie diese Bedingungen googeln. Was für eine einzelne untergeordnete Bildlaufansicht, was ist das ListView , was unsere Spalte, wenn wir tiefer gehen wollen. Aber ich habe Ihnen die grundlegenden Informationen zu einem Grundkonzept gegeben einem Grundkonzept wie und wann wir diese Art von Widgets verwenden sollten. Ich hoffe, Ihnen hat dieses Modul gefallen , denn hier haben Sie jetzt bereit, in den kommenden Modulen ausführlichere Dinge einzugehen . Und am Ende dieses Kurses werden Sie ein vollständiger Entwickler von Flutter-Anwendungen. 15. Was ist ein Staat: Dieses Modul ist sehr wichtig weil wir hier darüber diskutieren werden , was ein staatlicher Haushalt ist. In den früheren Sitzungen V sind wir es sehr gewohnt, weniger Widget anzugeben. Wir haben auch unser eigenes staatenloses Widget mit dem Namen des Startbildschirms erstellt . Aber definitiv in idealer Weltanwendung V, könnte mein Mädchen viele Szenarien sein , in denen wir ein stateful Budget verwenden müssen . Bevor Sie in das vollständige Widget des Staates gehen, denken Sie vielleicht darüber nach, was ist dieser Zustand? Ein Staat ist also nur ein Wert oder ein Datenelement in unserer Anwendung. Alles, was sich ändern kann, wie Zähleranzahl, Text, Farbe usw., kann Teil von Statuserklärungsdaten in Ihrer Anwendung sein. Dies ist Zoom, ein Status des Benutzernamens, das ist was? Seine oder ihre Fähigkeiten, Flattern, Firebase, das sind alles Staat. Welche Farbe hat die App? Blau, das ist auch ein Staat. Stateful-Widget ist einfach ein starrer , dessen interne Daten sich bei einer Aktion ändern werden. Das heißt, die Schaltfläche wird angeklickt und dann sollte die Textfarbe geändert werden, es eine Art Animation geben sollte. In diesem Fall. Get starr wird aktualisiert und mit 10 neuen Daten neu aufgebaut. Dies ist in Staatenlosenregion nicht möglich. Theoretisch haben Sie es also verstanden, aber definitiv arbeiten wir in unserem Code. Sie könnten viele Zweifel haben. Und lasst es uns eins nach dem anderen klären. Also werde ich alle diese Daten einfach wieder entfernen. Bevor ich jedoch alle Daten entferne, hätte ich gerne einen neuen Bildschirm. Es ist zu Hause ist okay. Es ist ein Zustand, der weniger starr ist. Aber ich hätte gerne vermuten, Kontaktpunkt, Punkt. Wir haben diesen Bildschirm. Lassen Sie uns nun unseren ersten Status im Vollbildmodus erstellen. Dann müssen wir zuerst wie gewohnt Material importieren dann eine Klasse und einen Namen erstellen. Name, den ich nennen werde, ist Kontakt und dann verlängertes Fälligkeitsdatum, Vollsicht. Okay. Dann wird eine Maschine fehlen oder welche Rechte. Und das ist so. Dies ist der Status „Create“. Stateful-Widget wird zwei Klassen haben. Einer ist das State Full div, das den Stateful erweitert. Und die zweite ist die Staatsklasse, die sie erweitert. Also hier kannst du einfach zurückkehren, nehme an, ich nenne es Tech. Bundesland. Dies wird wieder starr sein. Ich werde diesen Kontextstatus erstellen. Es wird verlängert sein Datum, das diesen Namen haben wird. Und dann jetzt hier, wieder, wird es schon fehlen die Rechnung. Und jetzt sind Sie mit diesem Gürtel vertraut. Ich werde einfach das Gerüst zurückgeben. Dies ist also das bloße Minima- oder Dub-Skelett eines stateful Widgets. Also denkst du vielleicht: Oh nein, ich möchte das nicht immer wieder schreiben. In diesem Fall benötigen Sie möglicherweise einige Erweiterungen. Wie hier habe ich diese tollen Flattern-Snippets. Dann wirst du definitiv Dart und fruchtbar drin haben. Mit diesen tollen Flattern, Schnipseln. Wir bekommen viele Abkürzungen. Eine der Verknüpfungen besteht darin, ein Stateful-Widget direkt zu erstellen. Also werde ich einfach all diese Tastenkombinationen S, D, F entfernen , das ist Flutter Stateful Widget. Und dann klicke ich einfach auf Enter und nenne es. Kontakt. Um es zu sehen. Das ist erledigt. Mit dieser Abkürzung müssen wir nichts anfangen. Und was ist dieser Staat hier? Ich werde diesen String-Namen haben, der gleich dem Gast ist. Angenommen, dieser Gastname ist ein Zustand, den wir später ändern und Ihnen zeigen werden , wie es ist, wie Bildschirmdribbles funktioniert und wie es funktioniert, wie die Benutzeroberfläche Gs bei jeder Aktion ändert, die wir ausführen. Im nächsten Video werden wir von hier aus fortfahren. Also Sehne und Freude und übe dein Bestes. Und du. 16. Die setState ()-Methode: Jetzt haben wir bereits darüber diskutiert und wie man ein Stateful Widget schreibt. Jetzt ist es an der Zeit, es praktisch zu machen und zu verstehen, wenn wir invertieren, wir müssen die set state-Methode verwenden. Und was ist der Vorteil, es zu benutzen? Lass es uns machen. Wir haben diese Kontaktseite, Punkt-Dot-Dot-Dot. Hier im Gerüst habe ich eine App-Leiste und es wird eine Art Text haben. Angenommen, Stateful-Widget. Okay? Und im Körper, Lasst uns eine Säule bei den Kindern haben. Und die Kinder weniger das erste Textfeld „Gewohnheit“. Und unten haben wir einen Text von Angenommen hallo, Dan, Namensvariable. Und im Hauptpunkt-Punkt-Punkt, anstatt auf den Startbildschirm zu gehen, gehen wir zum Kontextbildschirm. Aktualisieren Sie unseren Neustart unserer Anwendung. Und sehen Sie, Sie werden nur ein normales Textfeld sehen, aber Textfeld mit diesem Hallo Text-Widget. Was ich will ist, wenn sich hier etwas ändert, ist es auf geändertem Wert. Ich möchte, dass diese Namensvariable festgelegt wird. Das was auch immer es umschreibt. Okay? Aber die Sache ist, wenn wir es so machen, ohne den set state zu verwenden , wird es nicht funktionieren. Mal sehen Hallo, ich möchte Flutter-Akte. Siehst du, hier funktioniert nichts . Es ist solide. Es ist schon wieder, hallo Gast. Aber wenn wir hier nur die set state-Methode verwenden , sind dies eine Änderungstestdaten und wie wir, wie wir Staaten sitzen möchten, 10 Hauptstädte setzen, Status setzen und dann Klammern setzen. Und in diesem wiederum wird IF-Funktion wie diese geschrieben. In diesem gesetzten Zustand ist jetzt, wenn ich den Namen ändere, gleich dem Wert, und dann fangen wir an. Jetzt konzentrierst du dich einfach auf den Text Hallo. Sehen Sie, zum ersten Mal, was sie waren, schreiben wir die Benutzeroberfläche nur aus einem Grund, weil es das vollständige Widget „ State Full“ sagt. Jetzt gibt es hier an , dass das der Name ist. Wir können es nach einigen Aktionen hier ändern. Diese Aktion ist ein Textfeld. Um zu verstehen, was los ist und wie wird der Bildschirm neu aufgebaut. Wir können einfach eine Print-Statement haben. Zuerst in dieser Gesetzesvorlage, das ist Druckbildschirm Building. Und eins hier. Drucken Sie den Wert, wenn Sie möchten. Oder Sie können einen Druck Sets Status verwenden , der aufgerufen wird. Wenn ich jetzt neu starte, sehen Sie nur das Erstellen des Debug-Konsolenbildschirms, das heißt, diese Bill-Funktion wird aufgerufen. Aus diesem Grund können wir diese Ausgabe sehen. Jetzt werde ich schreiben, sehen, ob ich f schreibe, dann setze wieder die Verwerfen und der Bildschirm wird neu aufgebaut. Und du d, d, e. Also die ganze Zeit war der CUI, dass diese Bill-Funktion wieder aufgerufen wurde und dieser Wertname geändert wurde. Deshalb wird es hier widergespiegelt. Über die Debug-Konsole können Sie also verstehen, was unter der Haube vor sich geht. Und Halbbuchstabe verwendet die Methode set state um die Benutzeroberfläche darauf aufmerksam zu machen, sich selbst neu zu erstellen. Dies ist also der Unterschied zwischen einem zustandslosen und einem stateful Widget. Bei staatenlosen starren Schulden ist die Schulden, was auch immer geschrieben wird , kann nicht geändert werden, ob wir über einige Buttons, Klicks oder was auch immer wollten. In einem Stateful-Widget können diese Werte jedoch mit dieser Set-State-Methode geändert werden. Im nächsten Video werden wir ein weiteres Beispiel für Set State Tail machen und dann einfach versuchen, selbst zu recherchieren und zu üben. 17. Stateful Widget in Aktion: Bis jetzt wissen wir, wie man eine SET-Anweisung verwendet und wie sie verwendet werden kann, um unseren Bildschirm mit Dan new state neu aufzubauen. Aber es ist besser, wenn wir einige mit einigen weiteren Beispielen üben. Fangen wir an und erstellen einen neuen Bildschirm. Neue, neue Datei wird sein. Angenommen, es sollte nicht sein. Und wir nennen es einfach stateful. Punkt-Punkt-Punkt. Wie üblich Importmaterialpaket. Dann habe ich stateful Besuch meines Dates im Vollbildmodus. Ich habe es gerade so genannt. Dann nimm das Gerüst. Und dann habe ich wie immer in diesem Titel einen Datumstext, der voll starr im Körper ist. Du in der Leiche. Lassen Sie uns Widget und Kind zentriert haben. Lass uns ein Spalten-Widget haben. Jetzt sitzt in einem stateful Widget. Definitiv muss es einen Zustand geben, in dem ich eine Zeichenfolgenliste erstellen werde . Ich nenne es. Die Namen sind gleich diesem. Und ich lerne Bill, Mark. Okay? Und ich werde ein NSDate von int haben Ich ist gleich 0. Du denkst vielleicht, was sind das? Es ist also nur 0, weil der Index einer Liste mit 0 beginnt. Jetzt gibt es hier zuerst ein paar Texte, ein Textfeld und zum Einladen, mein Mittelwert sind dann Namen. Und ich, also wird es den Anfang hinzufügen, es wird IL-1 zeigen. Und dafür müssen wir in meinen gemeinen Punkt-Punkt-Punkt wechseln , der mein Status-Vollbildmodus ist, und dann neu starten. Mal sehen. Sieh mir meinen Namen und mein Name ist 11. Okay? Und auch die Spalte Ich werde ein Haupt-, Haupt-X Ausrichtungspunkt-Zentrum verwenden , das von oben nach unten ist, es sollte zentriert sein. Okay? Was ich jetzt will, ist, dass ich Schaltflächen in derselben Spalte anheben möchte. Erhöht bedeutet es tut mir leid, ich meine erhöhte Taste. Und der erste Button wird der nächste sein. Und der zweite ist erhöht, aber dann gehen wir zurück. Okay, mal sehen. Okay. Was ich will ist, wenn ich auf diesen Next Button klicke, mein Name ist Elaine sollte sein, Mein Name ist Bill. Das ist H sollte umkreisen oder dafür sollte es diese Namensliste durchgehen. Vor Ort muss ich diese Daten abändern. Ich habe es getan, dass ich 0 bin. Es sollte eins sein. Wenn ich auf die Schaltfläche Weiter klicke, schreibe ich soweit nur set state und dann ich plus plus. Mal sehen. Ich klicke auf dieses nächste C, Mein Name ist eingebaut. Wenn ich klicke Mein Name ist Mark. In ähnlicher Weise, wenn ich zurückgehen möchte, setze ich einfach den Status I minus minus. Hier. Wenn ich auf Weiter klicke, geht es Bill. In der Tat können wir zurückgehen. Es wird wieder lernen. Aber die Sache ist, wenn der Benutzerklick mehrmals verbindet, wird ein Buchstabe C angezeigt. Weil ich nur der Atlantis bin, ist nur 0, 1 Schulden drei. Aber wenn ich mehr als zwei gehe, wird es anfangen, Fehler zu weit zu zeigen, dass wir hier im On-Premise einige Bedingungen tun müssen, wie z. B. Wenn ich es einfach sagen will. Wenn ich weniger als Namen Punktlänge ist, dann führte nur diese gesetzte Status-Sache aus. Okay. Jetzt lasst uns neu starten und prüfen, was passieren wird. 012 geht zu behandeln sollte 01 Mark nicht ausführen. Und wieder muss ich hier auf jeden Fall minus eins schreiben. Lass es uns nochmal machen. Eland Bill, sehen Sie, jetzt zeigt es keinen Fehler. Und in ähnlicher Weise, geh zurück. Wenn du zurückgehst, müssen wir prüfen, ob ich nicht gleich 0, zehn minus ist, wenn es bereits 0 ist, dann können wir nicht weiter gehen. Versuchen wir es jetzt. Wenn ich 123 gehe, okay? Wenn ich jetzt Bill 11 gehe, und wenn ich jetzt versuche , auch zurückzukehren, dann wird es auch nicht funktionieren, weil wir unseren Zustand haben , der sicherstellt , dass der Bildschirm nicht abstürzt. Dies ist also ein sehr grundlegendes Beispiel für den set state. Ein weiteres Beispiel, das Sie haben können , ist , dass tot eine Farbe ist, diese Farbe ist rot. Okay? Dies ist ein Staat. Jetzt habe ich einen schwebenden Action-Button. Floating Action-Button, den ich mag. In diesem Kind wird es ein Symbol haben. Ich kann anfangen. Mal sehen. Ich weiß nicht, was die Farblinse ist. Schauen wir es uns an. Siehst du, okay, ich habe dieses Icon hier. Was sie wollen ist, wenn ich auf dieses Symbol klicke, sollte sich die Farbe ändern. Jetzt. Ich habe diese Hintergrundfarbe und diese Hintergrundfarbe wird der Zustand sein, der rot ist. Okay, also ist der Staat ganz am Anfang rot. Aber ich möchte, dass wenn ich auf diesen Button klicke , dieser Zustand jedoch geändert werden sollte. Wenn ich also auf diese Schaltfläche klicke, setze den Status, Farbe entspricht den Farben Punkt Amber. Ich zeige Ihnen nur verschiedene, verschiedene Beispiele, damit Sie sich mit Datensatzdaten wohler fühlen, um zu verstehen, was sie tun. Jetzt klicke ich darauf, sehe eine Farbänderung zu Amber. Dies ist also die Verwendung von Sets date, und so funktioniert ein stateful Widget. Es ändert einfach diese Daten und baut den Statusbildschirm mit neuen Schuldendaten wieder auf, so einfach das. Im nächsten Video werden wir also einige des verbleibenden Konzepts dieses Moduls besprechen . Und danach können wir auf die nächsten flacheren Konzepte eingehen . Danke. 18. Was ist initState ()-Funktion: Jetzt haben wir bereits an einem stateful Widget gearbeitet und wie man den Status mit SET-Anweisung ändert und get ist eine andere Methode, die in einem stateful Widget, das als init-Status bezeichnet wird, sehr wichtig ist. Was ist also in jedem Bundesstaat? Es ist eine Funktion , die bereits in jedem stateful Widget tot ist in jedem stateful Widget tot wir nur IN schreiben müssen. Sieh hier, ich kriege diesen Helfer. Wenn ich also auf Enter klicke, gibt es diese Funktion in ihrem Zustand und was es tut, wenn dieser Bildschirm , unser Van, dieses stateful Widget für das allererste erstellt wird. Das heißt. Das bedeutet also, dass vor dieser Bill Funktion vor der Benutzeroberfläche diese in ihrem Status aufgerufen wird. Wenn du also sehen willst, was ich sage, lass uns drucken. Das ist Gehirn. Hier. Init-Status und in Bell-Funktion. Lassen Sie uns die Build-Funktion drucken. Jetzt starten wir die Anwendung neu. In der Debug-Konsole. Sie werden zuerst sehen, dass der init-Status aufgerufen wurde, und zweitens wurde diese Bill-Funktion aufgerufen. Dies ist also sehr mächtig und sehr nützlich, wenn wir eine reale Anwendung erstellen. Also denkst du vielleicht, okay, aber was nützt dieser Init-Zustand? Was wir normalerweise tun, ist, dass wir einen Wert zuweisen. Wir weisen unseren Variablen, Instanzvariablen, einen gewissen Wert zu , den Sie diesen Daten sagen können Angenommen, dies ist zum Beispiel String-Name, und dies ist eine Variable. Jetzt kommen diese Daten. Angenommen, verwende auf dem vorherigen Bildschirm ihren Namen. Hier drin. Ich sage einfach dies.UserId Name, die beiden. Jeff Bezos. Jetzt im init-Status möchte ich diesen Wert zuweisen. Das sind die Daten , die vom vorherigen Bildschirm zu diesem Bildschirm kommen. Wir schreiben einfach, dass dieser Punktname Benutzernamen des Widget-Punkts entspricht. Und dann im Text, aber ich möchte diesen Benutzernamen zeigen. Mal sehen, funktioniert es oder nicht? Sieh mal. Was wir also gemacht haben, war, dass die Daten zum Beispiel vom vorherigen Bildschirm auf den Bildschirm kamen . Und hier weisen Sie diesen Wert einer Variablen zu, die leer war, die früher null war. Bevor der Bildschirm erstellt wurde, wurde dieser Wert dieser Variablen unter Verwendung des init-Status zugewiesen . Da, weil es die erste Funktion ist, die aufgerufen wird, als dieses Widget erstellt wurde. Es gibt, man kann sagen, wann dieses Budget aufgebaut wurde. Angenommen, ich hoffe, Sie erinnern sich an den vorherigen konservativen festgelegten Zustand. Wenn ich darauf klicke, wird diese Bill-Funktion erneut aufgerufen. Die Init-State-Funktion wird jedoch nur einmal aufgerufen. Sehen Sie also, die Bill-Funktion wird erneut aufgerufen , da die Seite aktualisiert wird. Aber diese Init-State-Sache, von, wir können es nicht noch einmal nennen, es ist schon ganz das auf Lee aufgewickelt sobald ADH Sie diesen Bildschirm entfernen müssen oder zum Unterschied gehen kann völlig anders zweiseitig und komm dann wieder auf diese Seite zurück. Das ist die „Livreie“. Hier weisen wir diesen Wert aus dem übergeordneten Widget einfach diesem Widget zu. Dinge, die du sehen kannst. Es gibt viele Dinge wie Streams, Texte und Controller zu sein. Der Wert der Beiträge sind also jene Dinge, die wir initialisieren möchten, verwendet werden oder VK kann es im init-Zustand initialisieren. Im Moment denken Sie vielleicht darüber nach, was ich sage, aber später, wenn wir die Firebase-Datenbank verwenden oder etwas initialisieren müssen. Angenommen, eine HTTP-Anfrage. Diese Dinge können wir im init-Zustand tun . Das bedeutet, dass gerade gestorben Ding initialisiert wird, sobald diese Seite erstellt wird. Ich hoffe also, dass Sie das Konzept der stateful Budgets und die Erstellung von Seiten verstanden haben . Dieser init-Status ist sehr wichtig. Aber im Moment, wenn Sie es verstanden haben, es sei denn, das Konzept auch, dann reicht es aus. Wir können zu einigen anderen Themen übergehen. Und Q 19. Widget Lebenszyklus verstehen: Im letzten Video, V, und wie der init-Status Vogue funktioniert. Ebenso haben wir entweder Funktionen oder andere Dinge. Jedes stateful Widget, das als Lebenszyklus des vollständigen Budgets bezeichnet wird . Also DRF, einige der Funktionen, die wir im Stateful-Widget verwenden können. Der erste ist der Init-Staat , den wir bereits besprochen haben. Dies ist die erste Methode die beim Erstellen des Widgets aufgerufen wird. Es heißt ein und nur einmal. Es wird normalerweise verwendet, um Eigenschaften zu initialisieren , die darauf beruhen, dass diese Widgets diesen Baum erziehen. Zwei Streams tiefgestellt ändern Modifikatoren. Jedes andere Objekt, das das Datum nach unten in diesem Widget ändern könnte. Das haben wir also besprochen. Dann folgt das nächste tiefe Änderungsabhängigkeiten. Diese Methode wird unmittelbar danach in jedem Zustand aufgerufen. Und wenn sich die Abhängigkeit von Death State Object über das geerbte Widget ändert. Sie können also einfach sehen, dass es Abhängigkeiten geändert hat. Ich werde einfach, ich schreibe einfach Druck. Hat Abhängigkeiten geändert. Ich starte die App neu. Und hier werden Sie sehen, dass zuerst in seinem Zustand da sein wird. Dann ändern sie Abhängigkeiten, dann doppelte Funktion. Diese Methode wird selten benötigt oder verwendet. Diese Andocks des Flatterns deuten auch darauf hin, dass es nützlich sein könnte, wenn Sie einige Remoteanrufe tätigen müssen . Aber wenn n Widget-Updates geerbt hat , ist dieses Konzept nicht so wichtig. Ich habe absolut viele, viele Jahre gebaut und dieses Ding ist nicht wichtig. Drittens ist diese Glockenfunktion. Diese Methode wird jedes Mal aufgerufen , wenn wir diese neu erstellt haben, sie ist erforderlich und muss ein Widget zurückgeben. Das ist also die Glockenfunktion. Wir haben bereits, wir wissen bereits, dass es an diesem 30 Platz zuerst in seinem Staat genannt wird. Zweitens, ändern Sie Abhängigkeiten. Und drittens, Funktion für Tage hat Region aktualisiert. Dies ist auch eine Funktion, die durch das Stateful-Widget gegeben wird. Es heißt übergeordnete kalte Änderungen und muss diskret neu aufbauen. Das ist dieses Widget. Also was ich meine ist, Angenommen, hier kommen diese Daten von diesem Elternteil frigid, sie stammen vom vorherigen Bildschirm. Und hier wurde aktualisiert. Dieses Ding wird aufgerufen, wenn diese Punkte, angenommen, dass der Name nicht gleich 0 ist, starrer Punkt-Benutzername. Oder tut mir leid, Sie können einfach diesen Punkt-Widget-Punkt-Benutzernamen, Marke, sagen . Haben sie sich geändert? Jetzt können wir es nicht zeigen, aber Sie müssen das Konzept verstehen. Angenommen, ein typischer Fall , in dem ein Elternteil über den Konstruktor eine Variable an die untergeordneten Elemente übergibt , , in dem ein Elternteil über den Konstruktor eine Variable an die untergeordneten Elemente übergibt, was wir bereits getan haben. Das übergeordnete Element übergibt einige Daten über den Konstruktor. Und wenn sich das Pad und die Widget-Daten ändern, sich diese Funktion auch erinnert sich diese Funktion auch an und zeigt an , dass Änderungen vorgenommen wurden. Für die Ursache, die danach funktioniert, müssen Sie den Set-Status nicht selbst lesen. Diese Funktion wird auch nicht so oft genutzt. Aber wenn wir etwas über stateful Widgets lernen, sollten Sie es zumindest wissen. Diese Begriffe existieren auch. 50 Stellen Sie den Status ein. Wir wissen bereits, dass dies ein gesetzter Staatskönig ist. Und danach wird die Bill-Funktion erneut aufgerufen und die Benutzeroberfläche wird erstellt. Das ist keine neue Sache. Sechstens ist die Deaktivierung. Diese Funktion wird aufgerufen, wenn das Objekt aus dem Baum entfernt wird. Dies wird wieder selten benutzt. Diese Methode existiert im Grunde die Kostendatenobjekte können von 1 zu einem anderen entfernt und vorübergehend entfernt werden. Ich zeige Ihnen nur , dass dies auch so deaktiviert ist. Wenn Sie einfach drucken deaktivieren. Und ein Finale und das letzte wird entsorgt. Das ist sehr wichtig. Diese Methode wird aufgerufen, wenn dieses Objekt, das heißt, wenn dieses Stateful-Widget dauerhaft aus dem Baum entfernt wird. Hier sollten wir Energiequellen freisetzen, die vom Objekt gespeichert werden , wie das Stoppen einer Mission ist was auch immer. Ein Beispiel ist, dass Wendys mein TED mit der Schieberplatzierung des Navigators abscheulich genannt wird . Nur in der nächsten Sitzung werden wir über die Navigation sprechen. Das ist also von einer Seite zur anderen Seite. Wenn wir gehen, dann sollte die vorherige Seite ordnungsgemäß entsorgt werden. Es sollte kein Speicherleck geben. In einer realen Anwendung ist es daher sehr wichtig, diesen Entsorgungsmentor zu verwenden. Hier werden wir einige Animationen, unsere Datenbankanrufe oder was auch immer beenden , was später nicht erforderlich ist. Dieses säkulare, freie, stateful Widget für Erwachsene ist also zuerst init-Status zweitens und lässt Abhängigkeiten fallen. Drittens ist die Build-Funktion. Als 40 ist, wenn wir welche tun, wenn ihr übergeordnetes Widget hier Änderungen an ihren Variablen vornimmt . Also hat dann vd aktualisiert, dieser Aufruf, wir vergleichen das mit Werten. Und dann ist die letzte die Deaktivierung, die auch nicht so sehr nützlich ist, aber dieser Beitrag wird oft verwendet. Eine Menge. Sie müssen also sicherstellen, dass Sie all diese Begriffe kennen und wenn wir sie später verwenden, sind Sie nicht verwirrt darüber was das ist oder ist das etwas Neues? Denn zumindest dieses Konzept, das wir später kennen, praktisch lernen werden, wie man es benutzt. Danke. 20. Stack-Konzept hinter Navigation: In diesem Modul beginnen wir ein neues Thema, das die Navigation ist. Die Navigation ist ein wesentlicher Bestandteil der Benutzererfahrung für jede mobile Anwendung. Weil Benutzer auf jeden Fall ständig zwischen verschiedenen, verschiedenen Bildschirmen navigieren. Es ist unmöglich, dass Sie eine vollwertige Anwendung erstellen und eine vollwertige Anwendung erstellen und nur einen Bildschirm haben. Wenn Sie gesehen haben, ob Sie eine E-Commerce-Website sehen, DNR, bestellen Sie meine Bestellung, Warenkorb, dann Homepage und dann Angebotsseite. Es gibt viele Bildschirme für Schulden. Wir müssen wissen, wie man richtig navigiert. Jetzt ist Papa ein krankes Konzept des Navigationsflatterns, das Stapel ist. Wenn Sie aus einer Programmiersprache R kommen, Wenn Sie Ihren Abschluss gemacht haben, wissen Sie definitiv, was ein Stack ist? Es schiebt einfach und springt Elemente ab. Sie können also einfach dieses Diagramm sehen und das verstehen. Angenommen, das ist kein leerer Stapel. Dann wird ein Bildschirm, in dem die App geöffnet wird, und dann wird der Startbildschirm auf den Stapel geschoben. dann vom Startbildschirm Wenn wir dann vom Startbildschirm aus zum Kontextbildschirm navigieren, das heißt, wenn wir einfach zu den Kontexten gehen und Möglichkeit haben, wieder auf den Startbildschirm zurückzukehren. Dann wird dieser Kontextbildschirm wie nur der Stapel über das Homeschooling gehen . Das heißt, es ist übereinander. Man kann also einfach sagen, dass es der Regel des Last-In-First-Out folgt , also Lifo und nicht First-in-First-Out. Wenn wir also den Kontextbildschirm öffnen und wieder zum Startbildschirm zurückkehren , werden diese Kontakte grün aus dem Stapel entfernt. Und dann wieder in Dust Stack. Der Startbildschirm wird nur vorhanden sein , der für den Endbenutzer sichtbar ist. Das ist also der 2D, das ist das Konzept hinter der Navigation in Florida. Sie müssen es verstehen, denn in Ihrem Kopf sollten Sie sich auf jeden Fall vorstellen, wie Seiten oder wie Ihr Code funktioniert. Fangen wir dann an. Wenn Sie das Konzept kennen, beginnen wir es mit einer grundlegenden Navigation. Bringen Sie diesen Texteditor heraus. Und diese Seiten möchte ich nicht, ich erstelle einfach eine neue Seite. Und Name ist der erste Bildschirmpunktpunkt. Dann importiere ich Material. Dann wird es staatenlos sein. Ich möchte keine Daten ändern. Es wird der erste Bildschirm sein. Es wird ein Gerüst in der AB-Bar sein. Lassen Sie uns den Titeltext des ersten Bildschirms haben . Weisen Sie diesen ersten Bildschirm einfach in Domain-Punktpunkt zu. Aktualisieren Sie jetzt Ihre Anwendung und sehen wir uns an. Der erste König ist tot. Im nächsten Video werden wir also etwas über das Konzept von Bush und Bob erfahren . So sendet man diesen Stapel, einen Bildschirm im Stapel, und wie man ihn entfernt. Und geh noch einmal zum vorherigen Bildschirm zurück. 21. Push und Pop Methode: Arbeiten wir weiter am Navigationsteil. Wenn wir also diesen ersten Bildschirm im Körper haben, lassen Sie uns ein Center-Widget haben. Und dann Kind des erhöhten Knopfes. Und dx wird gleich dem zweiten Bildschirm sein. Okay? Okay, wir haben diesen Knopf. Jetzt. Wir müssen auch einen neuen zweiten Bildschirm erstellen. Also werde ich einfach eine neue Datei im zweiten Bildschirm erstellen, aber Dart. Auch hier muss ich dieses Importmaterial machen. Dann habe ein staatenloses Widget namens Sekundenbildschirm. Wir, da es ein Bildschirm ist, also ist es wirklich Gerüst. In diesem Teil werden wir einen Titel haben. Das ist sehr wiederholend, ich weiß, aber du musst es üben. Man muss sich so sehr daran gewöhnen , dass man alles darüber weiß. Okay? Wir haben diesen zweiten Bildschirm, okay? Nun müssen wir zu navigieren, du denkst vielleicht, okay, aber wie navigiere ich? Um zu navigieren gibt es eine Methode namens Push and Push Placement. Das heißt, zuerst ist Push. Das heißt, wir werden einfach den nächsten Bildschirm über dem Bildschirm nach oben geschoben . Das heißt, wir werden den zweiten Bildschirm in den Stapel schieben. Aber der erste Skin wird den Stapel gewagt. Was ich meine ist, dass wir den Push verwenden müssen, aber die Syntax, an die Sie sich erinnern müssen, ist zuerst der Navigatorpunkt, dann die CD-Ära, so viele Optionen. Push, Pop, Push Ersatz. Also werden wir push benutzen. Dann wirst du sehen, dass es zwei Dinge akzeptiert. Erstens ist ein Kontext und der zweite ist eine Route. Auf dieser Route müssen wir mir TDL-Seiten-Routen-Widget wie folgt schicken . Siehst du, es ist ein bisschen anders, aber das ist ein Code, den du einfach lernen oder einfach auswendig merken musst, das war's. Jetzt ist dieser Builder eine Funktion wie diese, die hier Kontext sein wird. Und dann kehrt diese Funktion zurück. So erreicht der Bildschirmname in unserem Fall ist der zweite Bildschirm. Dies ist also der Code, erforderlich ist, um von einem Bildschirm zum anderen zu navigieren. Abgesehen von diesem zweiten Bildschirm ist alles, was Sie sich nur merken müssen, die Syntax. Und Navigator Dot Push nimmt zwei Parameter an. Einer ist Kontext und der zweite ist die Materialseitenroute. Materialseite, die es herausgibt, akzeptiert einen Parameter von Builder , einer Funktion, die diesen Bildschirmnamen zurückgibt. Das ist Identitäts-Tensor-Widget. Man kann einfach sagen, Mal sehen, funktioniert es? Und denken Sie daran, dass wir hier verwenden, und ich werde einfach die Push-Methode schreiben, weil es einen Unterschied zwischen Push- und Push-Ersatz gibt. Ich klicke einfach auf Gehe zum zweiten Bildschirm und sehe, dass der zweite Bildschirm da ist. Dies ist also das erste Mal, dass wir mehrere Bildschirme von einem Bildschirm zum anderen verwenden . Und jetzt kannst du sehen, dass es diese Pfeiltaste gibt. Stellen Sie sich also vor, dass wir gerade zum vorherigen Bildschirm zurückkehren werden. Und wenn Sie einen Stapel visualisieren können, heißt das über dem ersten Bildschirm , dieser zweite Bildschirm saß. Und dann entfernen wir es einfach. Und du denkst vielleicht, okay, ich habe irgendwie verstanden, was Push ist, aber was ist Push-Ersatz? Also schieben Sie Ersatz löscht diesen Stapel. Das bedeutet, dass wir nicht zu diesem vorherigen Bildschirm zurückkehren können. Sobald wir zum zweiten Bildschirm navigieren , ist kein Zurück-Pfeil. Alle vorherigen Bildschirme werden entfernt. Das ist also Navigator. Push-Ersatz. Einfach. Danach wird alles vom Kontext über die Materialseitenroute und alles gleich sein . Der einzige Unterschied wird die Ersatzsyntax verschoben. erneut Bringen Sie den Emulator erneut heraus und probieren Sie ihn selbst aus. Wenn ich auf Gehe zum zweiten Bildschirm klicke, sehen Sie, dass es keine Pfeilschaltfläche gibt. Wir können von hier aus nicht zurückgehen. Sie können es einfach an einem Beispiel für Facebook verstehen. Zunächst wird dieser Anmeldebildschirm angezeigt, wenn wir Benutzernamen und Passwort eingeben. Danach ist der Benutzer, und wenn es richtig ist, wird der Benutzer zu seinem Profilbildschirm navigiert. Und vom Bildschirm des Schuldenprofils kann er erst wieder zum Anmeldebildschirm zurückkehren erst wieder zum Anmeldebildschirm wenn er nicht auf die Abmeldeschaltfläche klickt. Dies ist also ein sehr gutes und typisches Beispiel dafür, wann Push verwendet werden soll und wann Push-Ersatz verwendet werden soll. Jetzt haben wir es verstanden und wir haben gelernt, Seiten zu pushen. Aber es gibt ein anderes Konzept, Seiten zu knallen. Also was wir hier in diesem zweiten Bildschirm machen werden. Nur in ihrem Körper. Schon wieder. Erstellen Sie die rechte Mitte, dann Kind. Dann erhöhte Taste. Hier ist, ich habe etwas falsch gemacht. In der erhöhten Taste. habe gerade gesehen, wann das Kind du wirst, schreibe ich hier und gehe zurück. Jetzt werden wir hier das Konzept des Pop verstehen, was bedeutet, einfach diese Seite vom Bildschirm zu entfernen und weniger im Steuernavigator-Punkt Push. Jetzt hier einfach Pop und es akzeptiert Schrittkontext. Das war's. Nicht viel. Und um zu knallen, denken Sie daran, dass es gedrängt wird, kein Push-Ersatz, sonst stürzt Ihre App ab. Sie gehen einfach direkt aus Ihrer Bewerbung heraus. Okay? Wenn ich nun auf Gehe zum zweiten Bildschirm klicke, sehen Sie, dass wir diese Zurück-Schaltfläche haben und wenn ich darauf klicke , komme ich wieder zurück komme zum ersten Bildschirm zurück. Jetzt denken Sie vielleicht, dass dieses Routing auch dasselbe tut. Standardmäßig ruft es auch die Navigator-Punkt-Pop-Funktion auf. Beide machen das Gleiche, aber hier schreiben wir absichtlich den Code, um zurückzukehren. Das war's. Und dieser Navigator-Punkt-Pop entfernt diese oberste Seite aus dem Stapel. Es könnte also unter 23 Seiten sein, aber es entfernt nur die oberste Seite. Das war's. Und wenn Sie von dieser zweiten Seite möchten, können Sie auch zurückgehen. Gut, zwei verschiedene Seiten. Ich werde nur Schulnavigator machen, aber schieben. Dann hier, Materialseitenroute, dann einfach Kontexte. Jetzt möchte ich auf diese Kontaktseite gehen auf . Angenommen Kontaktseite hier. Okay? Das ist auch Push. Denken Sie daran, was nun auf dem Indextag Molkerei passiert. Es wird gerade erst das Widget bekommen. Wenn ich dann auf Gehe zum zweiten Bildschirm klicke, dann ist der erste Bildschirm darüber, dann der zweite Bildschirm, dann der zweite Bildschirm. Wenn ich dann dazu gehe, tut mir leid, ich habe einfach vergessen, den Namen zu ändern. Wenn ich zum Kontaktbildschirm gehe, sieh dir jetzt an, dass die Kontexte vorhanden ist und jetzt im dest Tag-Verzeichnis einen oben und darunter. Wenn ich also hierher zurückgehe, kommt der zweite Bildschirm und der Kontext-Bildschirm erscheint aus dem Stapel. Und wenn ich jetzt wieder hierher gehe, dann ist dieser erste Bildschirm da. Aber angenommen , von diesem zweiten Bildschirm werde ich Push-Ersatz verwenden. Was passiert jetzt? Es ist sehr interessant, vom ersten Bildschirm aus zu sehen, , wenn ich zum zweiten Bildschirm gehe wir zwei Bildschirme im Stapel haben, wenn ich zum zweiten Bildschirm gehe. Aber wenn ich auf Gehe zu Kontakt klicke und da es Push-Ersatz verwendet , werden alle Bildschirme entfernt. Das ist sowohl der zweite Bildschirm als auch der erste Bildschirm. Wenn ich jetzt zu Contact gehe, sieh nach, es wird entfernt. Jetzt habe ich hier Push-Ersatz benutzt. Und deshalb sollten wir es nicht benutzen können. Man muss es nochmal sagen, manchmal einfach zu wenig komme ich, es ist in Ordnung. Aber Sie müssen verstehen, dass dieser Push-Ersatz den gesamten Stapel, alle Besuche aus diesem Stack entfernt . Dies kann aufgrund eines normalen Cachings oder so geschehen . Aber bis Sie nicht genug Vertrautheit haben, haben Sie dieses Konzept auswendig verstanden. Darauf kommt es an. In den kommenden Videos werden wir Navigation, Modus in Tiefe und Wasser, die anderen Funktionen diskutieren Modus in Tiefe und Wasser, , anstatt nur Pop zu drücken und all die anderen Dinge, die in einem während. 22. Genannte Route verstehen: Bisher haben wir gelernt, mit der Push-Methode zu navigieren. Es gibt jedoch eine andere Art zu navigieren besteht darin, benannte Routen zu verwenden. Angenommen, Sie müssen in vielen Teilen Ihrer App zum selben Bildschirm navigieren , kann der vorherige Ansatz dazu führen, dass keine Codeduplizierung ist. Die Lösung besteht darin, einen Namen und eine Route zu definieren und diesen Namen für die Navigation zu verwenden, wo immer Sie möchten. Und die Syntax ist auch bereit einfach, nicht wie zuvor müssen wir Materialseitenroute und dann Builder verwenden Materialseitenroute und dann und vieles früher war es viel mehr Kesselcode, Boilerplate-Codierung und alles. Aber im Moment ist die Syntax sehr einfach. So sind Schritte. Zuerst müssen wir zwei Bildschirme erstellen, was wir bereits gemacht haben, okay? Und die zweite ist definiert die Routen, indem zusätzliche Eigenschaften im ADL-Widget bereitgestellt werden. Also müssen wir jetzt zu unserer Hauptpunkt-Punktseite gehen. Hier. Wir müssen hier Routeneigenschaften wie diese und dann geschweifte Klammern verwenden . Dies ist also auch eine Eigenschaft von materiellen Laborrouten, die Ihnen definitiv bei Ihrer Navigation und Ihrem sauberen Code helfen werden. Zuerst müssen Sie also die richtige Aufgabenzeichenfolge ermitteln. Es ist so, wie es heißen sollte. Das ist der Routenname. Aber hier habe ich gerade einen Schrägstrich gegeben, was die Homepage bedeutet. Und es ist nur eine Funktion wie zuvor. Und hier schicke ich den Startbildschirm. Und so können Sie an der zweiten Route Kontakt haben. Sie können diesen Kontakt haben. Und auch hier ist dieser Funtion - und Kontext-Bildschirm. Wenn wir Routen benutzen, sollten wir kein Hauseigentum benutzen. Wir sollten die erste Route benutzen. Und hier, was ist die erste Route ist dieser Schrägstrich Backslash. Also muss ich dieses Zuhause kommentieren und dann unsere Anwendung neu starten. Nehmen wir an, die anfängliche Route ist der Startbildschirm oder nicht. Die erste Route definiert , mit welcher Route die App beginnen soll. Mit dem Namen wirst du also nur verstehen. Es dauert ein bisschen Zeit in meinem System. Ja. Aber es ist fertig. Sagen Sie, dass das erste Homeschooling jetzt da ist. Und ich schicke einfach den ersten 2 ersten Bildschirm. Mal sehen. So navigieren Sie nun mit dem Namen zum zweiten Bildschirm , der durch den Eigenschaftenlayer Push-Name navigiert wird. Wir, wir verwenden Navigator Dot Push und Push Ersatz. Aber jetzt können wir Push-Named und Push-Nim-Ersatz verwenden. Gehen wir zum ersten Bildschirm. Hier. Sehen Sie, wir haben unsere Push-Methode, die ich kommentieren werde und meine 10 Push-benannt habe. Und die Syntax ist sehr einfach. Navigator-Punkt Push benannt, dann Kontexte und deren Routenname. Und ihr Name wird Slash Contact sein. Ich schicke es, um an Kontakt zu gehen. Angenommen. Sie können also sehen, dass die Syntax sehr einfach ist. Es ist Navigator-Punkt-Push-Name. Dann müssen wir hier keine Materialseite, Route und alles mehr verwenden . Wir können einfach den Routennamen schreiben und er hilft uns beim Navigieren. Gehen wir zu Contact und sehen uns die Kontaktseiten hier an. Und in ähnlicher Weise haben wir uns gedrängt. Drücken Sie den Ersatznamen. Es funktioniert die gleiche Arbeit wie Push-Ersatz bei Führungsunterschieden. Hier benutzen wir einen Namen Dürre. Und es ist klicken und sehen, dass es keinen Zurück-Button gibt. Wir können nicht auch hierher zurückkehren, um zurück zu navigieren. Oder wenn Sie es haben, wenn Sie eine Schaltfläche erstellen möchten, können wir einfach den Navigator Dot Pop verwenden , genau wie zuvor. Der einzige Unterschied besteht darin, dass wir Namensrouten für uns zur Navy zur Navigation verwenden . Bush hat benannt. Und ähnlich in der Besprechung, aber dass Sie so viele Namen schreiben können, wie Sie möchten. Angenommen, dann zweite Seite. Kontext. Und zweite Seite. Sekunden. Gut. Okay? Und wir sagen einfach, es ist zweiter Bildschirm. Okay? Dies ist also die Art, Routen zu benutzen. Jetzt ist die Sache, der einzige Nachteil hier ist, wenn wir navigieren, muss sich die Gebühr diesen Namen richtig merken. Angenommen, wir schreiben es. Angenommen, Kontaktpunkt S sind Kontexte, dann wird ein Fehler angezeigt. Und auf jeden Fall ist es für uns sehr schwierig, uns an die Schreibweise zu erinnern. Dieser umgekehrte Schrägstrich richtig, jedes Mal, wenn weit eine einfachere kleine Lösung wird. Und das verwendet den statischen Modifikator, um Benennungsrouten aufzurufen. Was es bedeutet, ist, wenn wir einen Namen verwendet haben, wenn Sie mit der Methode beginnen, um innerhalb des Benennungskonzepts von einem Ort zum anderen zu navigieren , müssen wir uns an die Zeichenfolge erinnern , die wir für ihren Namen angegeben haben. Es ist nicht unbedingt immer Schulden. Wir erinnern uns an den Namen, wenn es mehrere Bildschirme in einer Anwendung gibt. Also erstellen wir einen String-Datentyp davon mit dem statischen Modifikator, damit wir ihn direkt zuweisen und ihn über seine Klasse aufrufen können , was bedeutet einfach, dass wir eine taktische Variable verwenden in unserem Staat weniger starr und geben ihm einen Namen wie dieses Haus, wir werden einfach statisch schreiben. String. Id ist gleich zu Hause wie dieses. Okay? Und dann können wir in der Datei main.js einfach für den Haupt als diesen Schlüssel schreiben. Wir können eine 0-Bildschirmpunkt-ID schreiben. Und dies wird einen Kontext des Startbildschirms haben. Einfach. So wird es sehr viel sauberer und schöner. Und auf jeden Fall würden Sie sich an diesen Klassennamen erinnern, zumindest auf diesem Startbildschirm. Es ist viel einfacher sich zu merken als die Saite. Ebenso können wir, wenn Sie zum zweiten Bildschirm gehen, einfach schreiben, Take String ID ist gleich. Und dann kann ich den zweiten Bildschirm so schreiben zweiten Bildschirm so und zum Hauptpunktpunkt gehen. Hier muss ich nur den zweiten Bildschirm schreiben. Und da es sich um eine statische Variable handelt, können wir es direkt aufrufen, ohne ein Objekt zu erstellen. So wird es also gemacht. Wie Sie oben sehen können, haben wir einen statischen Modifikator verwendet, welcher Zeichenfolgendatentyp sowohl dem Bildschirm als auch ihm eine String-Variable zuweist. Das nächste ist, dass wir unsere Lady haben. Dann diese String-IDs , also diese statischen Variablen in den Routen. Jetzt ist es an der Zeit, es aufzurufen, da wir direkt darauf zugreifen und von einer Seite zur anderen navigieren können darauf zugreifen und von einer Seite zur anderen navigieren , indem wir uns an diesen ClassName erinnern. Und jetzt müssen wir uns nicht an diese Zeichenfolge erinnern. Und ich werde es immer wieder tun, was ich damit meine. Wieder in diesem Zusammenhang, genauso wie zuvor. statische String-ID der X ist gleich Kontakt. Dann schreiben Sie hier einfach die Kontaktpunkt-ID. Und wenn du das auch ändern kannst. Wenn ich jetzt hier zum ersten Bildschirm gehe, muss ich diese Zeichenfolge nicht wie diesen Kontakt schreiben. Ich kann einfach Kontakt und Ästhetik schreiben. Also, taktische Methode, kann ich die ID einfach so aufrufen. Sieh den Unterschied. Es ist so viel saubere Art , unseren Code zu schreiben und zu verwalten. Ich kann einfach sagen, dass ich illegal bin , um so Kontakt aufzunehmen. Und sieh mal wieder, es funktioniert. Es liegt kein Fehler vor. Wenn wir diesen Ansatz verwenden. Es liegt an dir, welche du bevorzugst. Wenn Sie sich viele Videos und Tutorials ansehen, stoßen Sie möglicherweise auch auf diese Methode, da dies eine persönliche Präferenz ist. Was auch immer du magst, du kannst es tun, Es ist nicht immer notwendig, diese Taktik anzuwenden, aber ich werde dir definitiv vorschlagen denn wenn du viele Routen hast, dann ist es für dich unmöglich schreibe jeden einzelnen String richtig. Das war's. Im nächsten Video erfahren wir mehr darüber, wie Sie Daten zwischen zwei Bildschirmen übergeben und in der Benutzeroberfläche anzeigen können. 23. Daten mit Konstruktoren übertragen: Bis jetzt haben wir verstanden, wie wir auf normale Weise und auf benannte Weise von einem Bildschirm zum anderen navigieren können. Jetzt ist es also soweit. Wir verstehen , wie man einige Daten weitergibt während wir definitiv in einer Anwendung navigieren. Und es wird Szenarien geben. Dann müssen wir eine Daten vom ersten bis zum zweiten Bildschirm übergeben . Angenommen, es gibt eine Situation wie auf dem zweiten Bildschirm, wir brauchen den Benutzernamen dieses Benutzers, es net case. Wir möchten nicht wieder eine Datenbank haben, die den zweiten Bildschirm aufruft , da sie sehr zeitaufwendig und ressourcenaufwendig ist. Es ist besser, dass wir, wenn wir die Daten bereits im ersten Bildschirm haben , die Daten an den zweiten Bildschirm an diesen Konstruktor übergeben . Wie wir bereits wissen, gibt es zwei Arten von Konstruktoren. Parametrisierter Konstruktor, Namenskonstruktor. Um Daten zu akzeptieren, müssen wir zuerst eine Instanzvariable auf dem Bildschirm erstellen , zu dem wir navigieren. Das ist ein zweiter Bildschirm, den Sie in diesem Sinne sehen und erstellen können , der den Wert der Instanzvariablen akzeptiert und zuweist . Was ich damit meine ist, lass uns gehen. Angenommen, wir haben diese Kontextcreme, die es tut. Ich nehme einfach diesen zweiten Bildschirm. Hier. Zuerst werde ich eine Instanzvariable mit String-Namen haben. Und dann muss ich es erklären. Ich habe einen Konstruktor erwähnt , der diesen Wert außer sich nimmt und ihn Buddha zuweist, benannt auf diese Variable. Aber definitiv unten haben wir nur diesen Konstruktor gemacht. Ich entferne einfach diesen und erstelle ein neues wie zuvor. Und schreibe einfach diesen Punktnamen. Okay? Dieser Abschnitt ist fertig. Jetzt in Main.Jack definitiv. Hier. Es bittet darum, dass wir etwas Wert senden müssen. Es ist also besser, wenn wir es verwenden, da Anbieter jetzt benannte Routen verwenden um keinen Wert zu senden. werden wir auch besprechen. Aber vorerst werde ich nur diesen zweiten Bildschirm kommentieren. Und jetzt werde ich im ersten Bildschirm die Push-Methode verwenden, nicht den Push namens my turn. Und Sie können in dieser Push-Methode sehen, dass der zweite Bildschirm einige hinzugefügt wird weil es heißt , dass auf dem zweiten Bildschirm ein Argument eingefügt werden muss ein Argument eingefügt werden , das ein Argument akzeptiert. Also werde ich das einfach senden, denn da es sich um ein Positionsargument kein benannter Konstruktor handelt, ist es ein Partitional, der die 0te Position ist. Also sage ich einfach Name, Name, ich sage Kinder. Jetzt im zweiten Bildschirm, im Init-Zustand, tut es mir leid, dass dies eine staatenlose Region ist. Also haben wir diesen Button zum Kontakt gehen. Hier. Ich drucke einfach den Wert aus, der Name ist. Und ich schreibe es drucken. Okay, mal sehen, funktioniert es? Können wir Daten von einem Bildschirm auf einen anderen senden? Lass es uns herausfinden. Bringen Sie Ihren Emulator hoch. Gehe jetzt zu Kontakt, damit es gut zu Sekunden sein sollte. Ich hoffe, du hast es verstanden. Also wenn ich gehe, haben wir jetzt diesen Button drucken. Und wenn ich auf diesen Button klicke, siehe Bill Gates im Druckbildschirm, wir können den Bill Gates Wert sehen , der vom ersten Bildschirm aus gesendet wurde. Also schließlich, v weiß, wie man mit Dateneinstellung navigiert. Aber jetzt war es nur ein Positionsargument. Genauso wie bei Übergabe von Daten an einen Namenskonstruktor. Dass es nicht sehr schwierig ist da wir das wieder getan haben. Einfach was du tun musst. Gehe zum zweiten Bildschirm und mach es einfach im Namenskonstruktor. Und Sie können erforderlich angeben, da es kein Null-Element in einem liberalen Wert ist. Jetzt müssen Sie im ersten Bildschirm nichts tun. Es ist ein Namensparameter, den Namen schreiben zu müssen, der das Medium ist, wie wir es dort erwähnt haben. Und jetzt nenne ich es Elon Musk. Prüfen Sie nun erneut, ob es mit dem Namenkonstruktor funktioniert. Wenn ich zum zweiten Bildschirm gehe und auf Drucken klicke, siehe Elon Musk. Das war also dieser Unterschied und von Anfang an sollten Sie wissen, dass der Unterschied zwischen Partitionskonstruktorparametern und Namensparametern hervorgehoben wurde dazu immer wieder, weil es ein sehr Kernkonzept ist. Nun, das Ding ist tot. Ganz am Anfang entferne ich diese benannte Route , weil sie einige hinzugefügt hat. Nur weil wir, wenn Sie eine Namensroute haben und diese Daten übergeben möchten, können wir auch Parameter val1 navigieren, aber wir fügen einfach Argumente zu einer Map hinzu, indem wir zum nächsten Bildschirm drücken. Sie können hier mit dem Beispiel Navigator-Punkt Push benannte Kontexte sehen , Kontaktpunkt-ID. Dann ist es ein neuer Parameter namens argumente und akzeptiert Map. Hier ist der Schlüssel Name und ein Wert, den ich angegeben habe, hat String. Sie können in Zukunft aber auch verschiedene Objekte oder benutzerdefinierte Modelle haben . Aber um dieses Konzept zu verstehen, müssen Sie sehen, wie es gemacht wird, Ihren Redakteur herauszubringen. Jetzt habe ich im ersten Bildschirm gehen und einchecken Domain Punkt, Punkt ausgefüllt. Okay? Und da wir benannte Routen verwenden, muss ich diesen Konstruktor entfernen. Das heißt, wir können einen solchen Wert nicht akzeptieren. Was waren die Schritte dafür? Schritt 1 war? Hier gehst du einfach zur dritten Position, die am schnellsten Kontext ist. Zweitens ist der Name des Bildschirms. Das ist Kontaktpunkt-ID. Ich werde Kontakt aufnehmen, aber ich möchte zum zweiten Bildschirm gehen, also schließe ich einfach den zweiten Bildschirm. Hier können wir screenen. Wenn Sie das Rot sehen, wird dieser Argumentparameter Argument Argumente genannt. Und hier können Sie einfach Namen als Schlüssel und Wert schreiben. Wie Sie sehen können, Mark Zuckerberg. Und ich sage nur hier, nehme an, ich schicke zwei Werte, Gründer, Facebook, okay? Also senden wir jetzt ihren Wert, aber auf jeden Fall müssen wir ihn in diesem zweiten Bildschirm akzeptieren. Rufen Sie es ab. Und um die Daten abzurufen. Dies ist der Code , an den Sie sich erinnern müssen , der modellierte Route ist. Viele Kontext, Punkteinstellungen, Punktargumente auch. also einfach daran. Ich werde zuerst prüfen, ob es null ist. Das heißt, ob Wert angegeben wird oder nicht. Neck, das ist nicht gleich Null. Und hier zeigt dies etwas Rot, Rosa, weil es nicht bedingungslos zugänglich sein kann. Denn offensichtlich kann dies auch null sein. Entweder müssen wir den Operator so benutzen, was bedeutet, dass er sich verwundet hat. Wir wissen r, wir können VR und erlauben es zu überprüfen. Dieses Konzept wurde kürzlich in die Nichtsicherheit aufgenommen. Hier prüfen wir zunächst, ob es nicht null ist, dann ja, außer dass es in einer Variablen gespeichert wird. Das Gleiche. Kopieren und Einfügen. Und genau wie die Map. Sie müssen also Map in der Reihenfolge als Map schreiben , da es sich sonst um ein Objekt handelt. Es kommt als Objekt, dem wir Nein sagen, es ist eine Karte hier. Und dann schreibe einfach Argumente. erste Schlüssel war Name und dann Argumente drucken. Und der zweite Schlüssel war Gründer. Lasst uns nochmal nachsehen. jetzt ab dem ersten Bildschirmnamen und dem Geldgeber Können wir ihn jetzt ab dem ersten Bildschirmnamen und dem Geldgeber ausdrucken? Sobald wir zum zweiten Bildschirm gehen? Gehe zum zweiten Bildschirm und sieh dir Mark Zuckerberg und Facebook an. Dies ist also das V der Übergabe von Daten an den Namen Drop. Früher haben wir gelernt , Daten an eine normale , also normale Art der Navigation durch konstruiert zu übergeben . Und der zweite Weg ist die Verwendung einer Namensroute. Hier müssen wir sicherstellen, dass wir uns an die Modellroute Dot-Off-Kontexte erinnern. Dies ist eine Möglichkeit, die Werte zu extrahieren Vinyl navigieren. Das letzte, was den Wert übergibt, ist, dass wir auch einen Wert zurückgeben können, wenn wir zurückgehen. Vom ersten bis zum zweiten Bildschirm lernen wir, wie man Daten weitergibt. Es kann jedoch einige Szenarien geben, in denen Sie vom zweiten Bildschirm aus eine Art Exterieur erhalten müssen. Eine Art Erfolg, kann den Verkaufsstatus haben und der dieser Änderung in diesem ersten Bildschirm führen wird. Dafür müssen wir die Post-Funktion im ersten Bildschirm ändern, um sicherzustellen, dass sie den Wert wartet, der await verwendet und den Wert in der Pop-Funktion dieses zweiten Bildschirms übergeben . Was ich damit meine, ist, dass im ersten Bildschirm annehme, während ich beim Pushing keine Daten sende. Wir müssen warten. Also ich, Boo Status ist gleich zu warten. Dieses asynchrone und erwartete Konzept werden wir definitiv in der nächsten Sitzung lernen. Gerade jetzt. Denken Sie daran, dass wir hier darauf warten, dass dieser Wert für diese Funktion abgeschlossen ist. Und dann wird der Wert auf Lead in diesem Zustand gespeichert, der Boolean ist. Und hier sage ich einfach den Druckstatus. Und jetzt also vom zweiten Bildschirm aus. Während wir zurückgehen, schätzen wir es. Hier schreibe ich einfach einen Punkt-Bob-Kontext. Und dann schneiden wir hier einfach meine Beziehung wahr. Das war's. So einfach, dass wir aus dem Bildschirm springen, müssen wir diesen wahren Wert senden. Wenn ich jetzt zum zweiten Bildschirm gehe und wenn ich darauf klicke, gehe zurück mit dem Wert c, true. Das wird also ab der ersten Woche gedruckt , weil wir warten müssen. Es hat gewartet, bis wir vom zweiten Bildschirm auf den Bildschirm zurückkamen. Und danach wurde nur dieser Code asynchron ausgeführt und wartet ist ein sehr wichtiges Konzept. Es nennt sich asynchrone Programmierung. Und auf jeden Fall werden wir in der späteren Sitzung sehr darauf eingehen , denn ohne dieses Konzept können Sie keine vollständige Anwendung erstellen. Dieser Navigationsteil ist also fertig. Ich hoffe, du hattest Spaß und du hattest all deine Zweifel klar. Bitte versuche immer mehr Bildschirme zu erstellen und es zu üben, denn du musst dich definitiv auswendig daran erinnern. Danke. Wir sehen uns in der nächsten Sitzung. 24. Drawer Navigation: In dieser Sitzung werden wir über das Trawl-Widget sprechen, von dem Sie auch sagen können, dass es eine seitliche Navigationsleiste sendet. Wenn Sie also eine Anwendung wie Amazon verwendet haben, hat der größte Teil der Anwendung diese drei Zeilen oder das Hamburger-Symbol oben. Wenn wir darauf klicken, bietet die Sidebar viele Optionen zum Navigieren. Wir wären also definitiv in Florida, es ist eine sehr einfache Möglichkeit, dies umzusetzen. In Apps, die Materialdesign verwenden, gibt es zwei Hauptoptionen für die Navigation. Erstens sind Wasserhähne. Das heißt, wenn Sie das Beispiel sehen, was CEP, die Registerkarten oben, Chats diese Schritte aufrufen. Und die andere Option sind Schubladen. Wenn nicht genügend Platz zur Unterstützung von Wasserhähnen vorhanden ist, eine Schublade nur in einem Gerüst-Widget verwenden, um eine praktische Alternative zu bieten können wir eine Schublade nur in einem Gerüst-Widget verwenden, um eine praktische Alternative zu bieten. Daran musst du dich also erinnern. Probieren wir es aus. Gehen wir zum ersten Bildschirm. Indus Gerüst. Wir haben diese Schublade. Okay. Dies ist eine Syntax, um es in unser Widget zu schreiben. Prüfen wir, ob auf dem ersten Bildschirm etwas passiert. Sehen Sie, dass dieses Hamburger-Symbol gekommen ist. Diese drei Zeilen. Wenn ich darauf klicke, haben wir das, diese Seitennavigationen erscheinen. Aber da wir nichts drin haben, ist es leer. Aber ich hoffe, Sie haben verstanden, dass wir nur einen Code haben, den wir in der Benutzeroberfläche anzeigen konnten. Jetzt drin akzeptiert es ein Kind. Ich kann definitiv, es wird viele andere Molkereien geben, wird viele Navigationsoperationen meiden. Da drin werden wir annehmen, dass die ListView nicht spalten wird. Und ich zeige Ihnen, warum wir uns nicht auch für die Kolumne entschieden haben. Aber im Moment, denken Sie daran, außer dass Sie nur eine Listenansicht haben. Und innerhalb von ListView kann V verschiedene, verschiedene Optionen haben. Zuerst zeige ich Ihnen nur Listenstil mit einer Navigationsoption. In diesem Titan. Ich werde den Text des zweiten Bildschirms haben. Und beim Tippen werde ich vorerst nichts tun, aber ich werde nur speichern und zeigen Ihnen unsere erste Navigationsoption , die auf aber ich werde nur speichern und zeigen Ihnen unsere erste Navigationsoption den zweiten Bildschirm geht, den Sie sehen können , sind nur Beispiel Home Kontakt Über uns Kategorien, was immer du willst, es liegt an dir. Wenn Sie sich also erinnern, unseren Header haben, wenn Sie sich an Google Mail-Labor erinnern, gibt es in der Kopfzeile einige Kontodetails wie einen Benutzernamengewinn zur Steigerung. Sie können das mit Benutzerkonto, Benutzerkonto, unseren Header zeichnen. Dann erwähnte einfach diese Dinge. Der Kontoname sollte Elon Musk lauten, Konto, E-Mail kann Tesla und dass es ist.com. Es ist sehr selten, dass Sie niemals eine Gmail-Konto-Ähnlichkeit verwenden werden. Die dritte, die wir haben können. Also Girobilanzbild, ich werde einen kreisförmigen Avatar verwenden. Und darin kannst du ein Netzwerk-Image haben, aber ich benutze einfach ein Icon. Mal sehen, was ist die Ausgabe. Aber wenn Sie gerade eine Gmail-App bei sich haben, haben Sie einfach Gmail angehängt und anzeigen. Sehen Sie diese Seitennavigation davon als Flosse. Sie können vergleichen und sehen. Wir haben dieses Profilbild, den Benutzernamen und die Benutzer-E-Mail mit diesem schönen Hintergrund. Sie können auch andere Dinge ändern. Aber im Moment ist es besser, es einfach zu halten. Weil das Flattern sehr groß ist und es viele Eigenschaftsargumente geben wird . Wenn Sie sehen möchten, gehe ich einfach hierher und sage Pfeilfarbe, Tastenrand bei gedrückten Details. Dies sind andere Optionen darin. Führende KI gibt mir ein Icon zum Anschauen. Jetzt sieht es so aus. Angenommen, das ist das Zuhause. Ich kopiere und gebe ein anderes Deck als einfach schreibe. Sieh. Mit dieser Seitennavigation sieht es also richtig gut aus. Ich überspringe einfach noch ein Homepages. Nun, zu Hause und schreib einfach wem hier. Du siehst diese Schublade. Jetzt sieht es vor allem wegen dieses Headers sehr professionell aus. Es sieht immer noch großartig aus. Und wie gesagt, es gibt auch etwas, das als Schubladenkopf bezeichnet wird , den Sie selbst ausprobieren können, wenn Sie möchten. Und nun nehmen wir an, das ist nicht ListView, sondern die Spalte, sagen wir, es ändert sich irgendetwas. Sag nein, nichts hat sich geändert. Aber denken Sie daran, wenn Sie viele Daten haben, die noch hier sind und sie nicht scrollbar sind, wenn Sie eine Spalte verwenden. Listen Sie also auf, dass wir es verwenden, wenn Sie auch viele andere Optionen haben . Spalte funktioniert einwandfrei. Auch. Jetzt lasst uns gehen und navigieren. Zum Startbildschirm. Ich beziehe mich, navigiere, drücke. Dan auf der Strecke. Wir werden einen Page Builder haben. Kontext. Der Name ist der Startbildschirm. Okay. Lass uns nachsehen. Navigieren wir zum Startbildschirm? Siehst du, wir sind auf dem Startbildschirm. Jetzt. Sie müssen aufpassen und verstehen, was passiert, wenn wir auf die Schaltfläche Zurück klicken. Wenn wir auf die Schaltfläche Zurück klicken, ist diese Zeichnung immer noch geöffnet, sieht aber nicht gut aus. Es sollte so geschlossen sein. Weit das, bevor man durchschiebt, muss man knallen. Wir müssen schreiben, nach oben navigieren, um die Schublade zu schließen und dann zum zweiten Bildschirm zu wechseln. Starte deine App. Wenn ich jetzt nach Hause gehe, navigieren wir zu diesem Startbildschirm, aber nicht in dieser Zeit, wenn ich auf die Zurück-Schaltfläche klicke, kommt es richtig auf den Startbildschirm und nicht diese Zeichnung hängen, weil wir bereits geschlossen es mit dem Navigator Dot Pop. Dieses Ding müssen Sie sich also merken denn wenn wir eine vollständige Anwendung haben, möchten Sie nichts was nicht in den Benutzer eingefügt wird. Der Benutzer wird genervt oder so, wir müssen es vermeiden. also darauf, dass du diese Dinge zur Kenntnis nimmst , denn du solltest es definitiv später nach einem Monat vergessen. Das war's. Das ist alles weit unten und zeichne eine Portion. In diesem nächsten Video werden wir über die untere Navigation sprechen. Danke. 25. Untere Bottom: Heute werden wir über die untere Navigationsleiste sprechen. Ich überlasse es, wenn wir besprochen haben, was eine Schublade ist und wie man sie umsetzt. Dies ist also eine weitere sehr oft Navigation. Und dieses Widget wird in den meisten Anwendungen verwendet. Denn stell dir vor, dass dies der Bildschirm ist und in diesem Bereich, der keine Unterseite ist, gibt es einige Optionen, die kacheln, gibt es einige Optionen, die kacheln, nämlich Heimkontakt oder Chats oder was auch immer. Wenn wir darauf klicken, wird die Sauberkeit geändert. Das ist also ein sehr cooles Widget, das vom Florida-Framework gegeben wurde. Und das können wir ganz einfach dem Gerüst hinzufügen. Wie in dieser Schublade auch. Es gibt einen Parameter im Gerüst. Probieren wir es also alleine aus. Und wenn Sie eine Syntax in diesem Gerüst sehen, gibt es diese untere Navigationsleiste, die eine untere Navigationsleiste akzeptiert, starr, die ein Paar hat. Der erste Parameter ist der aktuelle Index. Das heißt, welcher Bildschirm ist in diesem Moment VR. Und das zweite ist Items. Was diese Elemente das sind, das ist das Symbol oder es kann speichern, was wir, wir navigieren werden. Das heißt, sind es Home-Chats, was wir in der Benutzeroberfläche erwähnen wollen? Und der dritte ist auf dem Fass. Das sollte passieren, wenn jemand auf diese Navigationsoption tippt. Normalerweise müssen wir diesen Bildschirm ändern. Und hier im Notizbereich können Sie sehen, dass es mehr als ein unteres Navigationsleistenelement geben sollte mehr als ein unteres Navigationsleistenelement , damit es funktioniert. Offensichtlich, wenn die anderen mehrere Elemente dann nur die Navigation sündigen. Warum benutzt jemand für eine Option eine untere Navigationsleiste? Es nützt nichts. Hier im Bild siehst du also wovon ich spreche. Das ist es, was wir gerade bauen werden. Bringen Sie Ihren VS-Code heraus. Und jetzt, Okay, haben wir nicht. Dies ist der Fehler wegen der booleschen Sache. Nicht viel. Da Sie bereits erwähnt haben, brauchen wir dort einen booleschen Wert. Kommentar, Toasten. Und so wird das Gerüst die untere Navigationsleiste verwenden. Und ein Widget-Name ist die untere Navigation, aber jetzt hat er Elemente. Aktueller Index für momentan sagen wir nur 0 Items. Ich werde eine Negationsleiste haben. Ich weiß nicht, wie irgendein Icon geben soll. Das sollte ich sein. Wir werden etikettiert verwenden, weil das Ideal abgeschrieben wird und das Label String akzeptiert. Direkt nach Hause. In ähnlicher Weise, Tage und fügen Sie es zweimal ein, sagen Sie können und werden einfach hier enden. Und wenn man vermutet, du könntest Albtraum geben, halte ich es einfach. Und wir sagen einfach, okay. Und das nächste ist dran. Was gibt, was eine Funktion ist , die uns einen Index gibt. Ich werde den Index vorerst einfach ausdrucken und mal sehen, was getan wurde. Siehe Verwendung von Heimkontakten. Es sieht so gut aus. Wenn ich auf Kontakt klicke, ist der Index 1. Wenn ich auf Benutzer klicke, ist der Index zwei. Wenn ich auf OK klicke. Whoa, Index ist 0. Davon spreche ich also. Mit diesem Index. Jetzt werden wir die Änderungen vornehmen, damit er, wenn jemand auf Kontakt klickt , zur Kontaktseite gehen sollte. Oder Sie können hier sagen, dass die Kontaktseite erstellt wird. Nicht, wir navigieren nicht direkt, aber hier nur in diesem Bildschirm werden wir nur Alda-Seiten sehen. Was müssen wir jetzt tun. Wir haben zweite Milz. Wir haben einen Vollbildmodus. Dein Bildschirm. Sie gehen einfach auf den Bildschirm und haben ganz oben weniger eine ganze Zahl, die 0 ist. Zweitens sollte eine Liste von Seiten sein. Hier. Was sollte nicht passieren? Wir sollten alle Seiten schreiben , die wir brauchen. Also sollte zuerst davon ausgegangen werden , dass der Bildschirm ein Kontakt ist. Und drittens ist dieser, der mein Status im Vollbildmodus ist. Mein Bundesstaat im Vollbildmodus. Okay. Wir haben alle Seiten hier. Jetzt enden Sie einfach am Körper. Hier in der Leiche. Ich entferne alles und schreibe Seiten. Dann steht der Index ganz am Anfang, er ist immer noch. Aber wenn jemand auf irgendetwas klickt, sollte es sich ändern. Das ist Staat, der Staat sollte sich ändern. Und dafür müssen wir es zu einer staatlichen Vollvision machen. Jetzt ist es ein stateful Widget. Wenn jemand auf diese bestimmte Navigation tippt, sagte ein Status von Index 2, diesen Index, den wir erhalten die d 0, 1, 2, 3. Also denkst du vielleicht darüber nach, warum? Was ist das Bedürfnis? Ich erkläre es dir noch einmal. Wir haben eine Liste von Seiten, eine Position im Homeschooling, dann eine Position Kontexte sauber und um meinen stateful Bildschirm zu positionieren. Und wir haben eine Variable namens index, die mit 0 initialisiert wird. Ganz am Anfang wird also immer der Startbildschirm angezeigt wenn jemand unsere Anwendung startet. Weil wir in diesem Körper diese Seiten haben und der Index 0 ist. Wenn jemand klickt , tippen Sie auf eines dieser unteren Navigationsleistenelemente. Ob es sich um einen schwachen Kontakt handelt oder was auch immer, der Index wird es nehmen. Und dieser Bildschirm wird angezeigt. Bringen Sie den Emulator heraus und sehen Sie, dass wir diesen Kontakt haben. Wir haben dieses Zuhause und wir haben diese Benutzer. Also welches Homeschooling stattdessen? Das sind die Häuser in Sibelius. Wechseln Sie den Bildschirm und den Bildschirm so. Jetzt ist der Startbildschirm richtig. Und Benutzer, wir haben die ganze Liste. Jetzt möchte ich 2 dieses App-Teils nicht mehr machen. Also was ich tun kann , kann ich die AB-Leiste vom Bildschirm entfernen , das ist der erste Bildschirm. Bringen wir unsere App noch einmal mit. Sag, es sieht viel besser aus. Jetzt, wenn ich an der Bar wechsle, wird es geändert. Aber es sieht sehr gut aus. Vielleicht denken Sie auch darüber nach, warum sich diese Farbe nicht ändert, da wir diesen Index hier nicht erwähnt haben. Wir haben gerade 0 gelesen. Aber hier müssen wir diesen variablen Index schreiben. Und dann versuche es noch einmal. Nun, dieses blaue Ding, blaue Farbe wird auf was auch immer wir klicken angezeigt. Sehen Sie jetzt, der Kontakt ist blau. Wenn wir nun auf die Benutzer klicken, wird dies hervorgehoben. Es sieht sehr gut aus. Jetzt haben wir zumindest eine sehr einfache Benutzeroberfläche. Wir haben gelernt, wie diese Zeichnung funktioniert, wie die untere Navigation funktioniert wie man von einem Bildschirm zum anderen navigiert. In diesem Modul haben wir also viel gelernt. Im nächsten Modul werden wir weitere Konzepte von Flutter Framework besprechen. Üben Sie bis dahin einfach und stellen Sie sicher, dass Sie den ganzen Code von Herzen verstehen. Danke. 26. Tief in TextField Widget: In diesem Modul werden wir über die TextFile Virgin sprechen. V wird sehr tief in dieses Widget einsteigen , da es das einzige Widget ist , mit dem wir intensiv für die Handhabung von Benutzereingaben verwendet werden . In jeder Anwendung. Das muss es tun. Wir müssen etwas eingeben, ob es sich um den Benutzernamen, Passwort handelt, was ihnen gefällt, was sie nicht mögen, egal in welchem Alter. Textfield ist also eine sehr wichtige Region. Was ist also ein Textfeld? Ich glaube, wir haben bereits diskutiert. Texte, die in Florida ausgefüllt werden, ist das am häufigsten verwendete Widget, dem Benutzer Eingaben von der Tastatur in eine App sammeln können. Dies ist also ein Code-Snippet, das die Syntax dafür darstellt, wie ein Textfeld angezeigt wird. Es hat wie immer einige Eigenschaften, Dekoration, Bordüre und vieles mehr. Also um loszulegen. Und was ich gerne machen möchte, ist, dass ich die vorherigen Bildschirme entfernen möchte , weil ich derzeit nicht so viele Bildschirme haben möchte. Wenn du nicht willst, kannst du sie einfach so lassen, wie es ist. Aber da es ein neues Modul ist, würde ich einfach alles entfernen. Wir haben diese Hauptakte. Ich erstelle eine neue Datei außerhalb der Seite, Punkt, Punkt. Wie immer. Ich werde nur dieses Datum erstellen, das weniger starr der Homepage ist. Und wir werden diesen Startbildschirm haben. Fangen wir mit diesem Gerüst an. Benutzen Sie die Eingabe. Und in der Partei wird einen Spalten-Assistent v haben , dessen Hauptzellenausrichtung vorhanden ist. Die Ausrichtung wird in der Mitte sein. Und Kinder. Jetzt in diesen Kindern werde ich dieses Textfeld haben. Denn mit dieser Deklarationseigenschaft können wir etwas Dekoration geben, z. B. was zu tun ist, worum es bei dieser TextFile geht. Mit diesem Ebenentext. Du solltest seinen Namen schreiben. Und Border. Ich möchte die Grenze skizzieren. Lassen Sie uns unsere Anwendung neu laden und die Ausgabe speichern. Um diese Ausgabe zu überprüfen. Es ist ein einfacher Bildschirm. Wir haben den Text unten ausgefüllt. Auch. Ich möchte diese Spalte mit einem Polster-Widget umschließen , damit wir rundum etwas Abstand haben und es jetzt etwas anständig aussieht. Darüber hinaus können Sie, wenn Sie möchten, zwei der APA gesendet haben. Stellen Sie sicher, dass Sie sich diese Eigenschaften merken, indem Sie üben. Deshalb würde ich Ihnen vorschlagen, jedes Mal selbst Bildschirme zu schreiben , damit Sie am Ende des Kurses den ganzen Code lernen. Denken Sie also an all diese Codes auswendig, und Sie müssen es nicht immer wieder überprüfen. Jetzt haben wir diese Texte Schadensersatz ausgefüllt. Aber wir sollten wissen, wie den Wert aus diesem Text abrufen können. Wenn ich jetzt schreibe, sollte es definitiv Code geben, um den Wert aus dem Textfeld abzurufen , den wir im nächsten Video besprechen werden. Danke. 27. Ein TextEditing hinzufügen: Heute lernen wir, wie man den Wert eines Textfeldes abruft. Wir haben diesen Text bereits. Aber zumindest sollten wir wissen, wie man w bekommt, unabhängig von den Benutzertypen. Dafür verwenden wir die Controller-Methode. Was sind die Schritte? Der erste Schritt besteht darin, einen Textbearbeitungs-Controller wie diesen zu erstellen . Hier sehen Sie, dass wir eine Textbearbeitung haben kann Typ sammeln. Dann bedeutet der Controller , dass dies der Variablenname ist, der dem Textbearbeitungs-Controller entspricht. Hängen Sie nun diesen Textbearbeitungs-Controller an das Textfeld an. In diesem Textfeld ist der Bereich definitiv eine Eigenschaft namens Controller, die der Wert dunkler Controller-Name sein sollte. Nun wird der dritte den Wert des Textfeldes abgerufen, indem die vom Textbearbeitungs-Controller bereitgestellte Punkttext-Methode verwendet wird. Hier können Sie also sehen, dass dies W ausgeben wird, dh wenn wir den Namen des Textbearbeitungscontrollers schreiben, dann dot txt, wird der Zeichenfolgenwert ausgegeben. Ich hoffe also, Sie haben die Schritte verstanden, mit denen Sie einen Kilometer langen Schritt alleine machen. Hier definiere ich zunächst diesen Textbearbeitungs-Controller und nenne ihn „Controller“, dem Textbearbeitungs-Controller entspricht. Okay? Der erste Schritt ist erledigt, nämlich der erstellte txt und endende Controller. Zweitens ist der dunkle Controller-28-Text-Film. Wir haben dieses Textfeld hier. Mal sehen, hat es eine Eigenschaft namens Controller? Hier? Dies ist der Name, Eigenschaftsnamen-Controller, der einen Controller-Wert für die Textbearbeitung akzeptiert. Und unser Lernen heißt „kontrolliere sie“. Okay? Dieser dritte Schritt ist der Wert des Textfeldes unter Verwendung des Punktes txt. Nun, das lasst uns zuerst unter dem Text wann wir eine erhöhte Schaltfläche haben und eine Datumsschaltfläche hinterlassen sollten. Und in diesem Kind schreibe ich einfach Druck. Und erhöht. Ich drucke. Wie lautet der Name des Controllers? Namencontroller und Dot txt. Okay. Lasst uns im Namen neu starten . Ich meine, richtig. Jeff Bezos. Und klicken Sie einfach auf Drucken und sehen Sie in der Debug-Konsole, Sie können alles, was ich habe, in das Textfeld einfügen. Auch. Wenn Sie es auf dem Bildschirm anzeigen möchten. Zehn einfach können wir diese Homepage zu einem stateful Widget machen. Und dieser Namenskontroller. Wir können es irgendwo hier haben. Über diesem Text wird einfach der Name Controller-Punkttext Stil x geschrieben der Name Controller-Punkttext Stil x und hat eine Schriftgröße von Schriftgewicht, Schriftart, Gewicht, Fett und Lays Punkt. Was ist gut. Und ähnlich wie das OK. Und jetzt haben wir nur diese Tests. Das war's. Probieren wir es aus. Funktioniert es oder nicht? Wenn ich jetzt Elon Musk schreibe und auf Print C klicke, können wir alles ausgeben, was wir diesmal in die Benutzeroberfläche geschrieben haben , nicht in der Debug-Konsole, da wir den set-Status verwenden. Ich möchte nur, dass du immer wieder praktizierst und wegen dieses gesetzten Unglaubens des Staates verstehst und Chen wieder aufgerufen wurde. Und jetzt hat dieser Text diesen Wert von Elon Musk. Eine andere Möglichkeit besteht darin, den Wert abzurufen besteht darin, dass wir eine Variable namens string zulassen können, name ist gleich mt. Angenommen. Und in diesem Textfeld können wir einfach auf geändert schreiben. Und hier bekommen wir den Wert. Und dieser Wert, das, wie lautet der Name? String ist der Name sollte „nahm“ genannt werden, während du, das war's. Und wir können auch getestet senden. Wir können das einfach sagen. Und hier sollte der Text einfach eine Namensvariable sein. Dies ist eine andere Möglichkeit, den Wert bei Änderungen aus dem Textfeld abzurufen . Aber die meiste Zeit verwenden die Leute den Textbearbeitungs-Controller anstelle dieses unverändert. Aber es ist nicht so, dass du es nicht benutzen kannst. Ich schreibe einfach einen Namen wie wer war. Es ist sehr gut. Niemand kommt mir in den Sinn, einfach Bill Gates anwesend ist. Aber sehen Sie, wenn ich tippe, aktualisiert es die Benutzeroberfläche, denn in der Kette ist wie immer, wenn wir auf eine Tastatur, ein Alphabet oder wann immer es geändert wird, der gesamte Bildschirm neu aufgebaut wird. Das war's. Dies sind also die beiden Möglichkeiten , um Wert abzurufen. Die meiste Zeit wird der Textbearbeitungs-Controller unverändert sein und unsere anderen Optionssensoren wie die Bearbeitung des Landes, bei der Übermittlung abgeschlossen werden. Dies sind auch andere Möglichkeiten, W. zu erhalten Wenn Sie mehr lesen möchten, können Sie auch suchen. Aber ich habe Ihnen am meisten beigebracht, am meisten die Anwendung zu verwenden oder den Wert am meisten aus dem Textfeld abzurufen. Danke. 28. Validierung von Benutzereingaben: In dieser Sitzung werden wir darüber sprechen, wie die Eingabe eines Benutzers validiert werden kann. Zuvor müssen Sie jedoch ein neues Widget verstehen, das als Formular-Widget bezeichnet wird. Einbeziehen eines Formulars Virgin in Ihre App erleichtert es einfach, einen Reset zu validieren und mehrere Eingabefelder gleichzeitig zu speichern. Und denken Sie daran, dass wir das Widget-Text-Formularfeld innerhalb des Formulars anstelle von Texten wirklich verwenden das Widget-Text-Formularfeld . Also sind wir hier, wir verwenden Text Will. Aber da werden wir das Formular von nun an voll nutzen. Also müssen wir das mit ihm ausgefüllte Textform verwenden. Was wir also tun müssen, werden wir einfach zuerst, ich möchte diesen Namen und OnChange entfernen. Damit das Formular-Widget funktioniert, wird diese Spalte einfach mit dem Budget umbrochen. Okay? Dieser Teil ist jetzt fertig. Und dieses Textfeld sollte das ausgefüllte Textformular lesen. Dies ist auch erledigt. Jetzt ist der nächste Teil die Formularvalidierung. Wenn Sie also eine Anwendung erstellen, wenn Sie eine Eingabe vom Benutzer erhalten, ist es sehr notwendig dass Sie die Eingabe überprüfen müssen? Angenommen, Sie haben ein Passwort, das mindestens acht Zeichen lang sein sollte und der Benutzer nur vier Zeichen eingibt, sollten wir ihm nicht erlauben, dass mindestens acht Zeichen lang und der Benutzer nur vier Zeichen eingibt, sollten wir ihm nicht erlauben eine Telefonnummer mindestens 10 Ziffern haben sollte. Es kann nicht einfach neun Ziffern auswählen und unserer Anwendung eine gefälschte Nummer geben. Um sicherzustellen, dass diese Adder nie bei uns passiert sind, werden wir sehr starke Regeln für die Formularvalidierung haben. Um eine Farm im Flattern zu validieren, müssen wir hauptsächlich drei Schritte umsetzen. Schritt eins wird als Formular-Widget verwendet. Wir nehmen globalen Schlüssel. Was ist dieser globale Schlüssel? Denken Sie einfach daran, dass es eine Art Staat ist, den wir kombinieren werden, oder Sie können sagen , dass wir der Farm geben werden, damit wir später wissen wie der Status des Unternehmens ist, dass Validierungen funktionieren richtig oder nicht dafür. Es ist also nur eine Syntax, an die wir uns erinnern müssen. Es ist nicht sehr kompliziert. Ich gebe ihm einfach den Variablennamen des Fremdschlüssels und setze ihn auf blau sperrig. Und dann hier, bilden Sie den Status. Dies ist die Syntax, einen globalen Statusschlüssel zuzuweisen und ihn einfach zu kopieren. Und im Farmfeld haben Sie diese Eigenschaft namens key und fügen Sie sie einfach hier ein. Auf diese Weise können Sie sicherstellen, dass Lou sperrig und Ihr Telefon verbunden ist. Jetzt ist der erste Schritt erledigt. Zweitens ist die Verwendung von Texten aus , die die mit validator-Eigenschaft gefüllte Eingabe nicht geben konnten. Es gibt also diese Milliliter-Eigenschaft , die wir verwenden müssen. Okay, das machen wir. Und der dritte Schritt wird von 10 erstellt, um das Farmfeld zu validieren und den Validierungsfehler anzuzeigen. Okay, wir machen zuerst den Schritt 2, dem dem Textform eine Gültigkeitsregeln zugewiesen wird. Moment müssen wir die Validator-Funktion in diesem Text verwenden die Validator-Funktion in diesem Text unterhaltsam ausgefüllt ist, um die Eingabeeigenschaften zu überprüfen , die der Benutzer die falsche Eingabe gibt. Die Validator-Funktion gibt eine Zeichenfolge zurück , die eine Fehlermeldung enthält. Andernfalls gibt die Gültigkeit der Funktion null zurück. Gehen wir zum Textformularfeld. Hier. Ich werde einfach diese Validator-Eigenschaft haben, die ein feiner Shen Dao-Wert ist, was auch immer eingegeben wird. Hier überprüfe ich einfach, ob die Warteschlange leer ist. Oder man kann sagen, ob der Wert gleich ist. Jetzt so. Jetzt können Sie die leere Zeichenfolge so sehen. Dann gewinne ich. Das Drehfeld ist erforderlich, andernfalls geben Sie null zurück. Also okay, und dann bestand das nächste Gesetz des Berührungsschritts darin, den Button zu erstellen , den wir bereits gemacht haben , der ihn validiert. Formular ausgefüllt. Hier ist dies der Code, an den Sie sich erinnern, aber jetzt ist es an der Zeit, den Fremdschlüssel zu verwenden. Ich schreibe einfach Qi Dot State Dot Validate. Das aktuelle Datumspunkt-Validieren ist gleich true. Man kann sagen: Ja, ich werde einfach schreiben, drucken. Reichen Sie 10 Geschlechter ein, denn Li k ist ausgestorben. Zuerst Stefan. Und ich werde auch nicht drucken. Es sieht professionell aus. Innerhalb einer leeren Zeichenfolge. Wenn ich auf Absenden klicke, siehe Phil ist erforderlich. Das ist also die Validierung, über die ich gesprochen habe. Dies ist sehr wichtig denn wenn Sie ein Anmelde- oder Anmeldeformular haben, müssen Sie dem Benutzer diese Fehlermeldungen definitiv als Feedback anzeigen , da der Benutzer nicht einfach auf seinem Bildschirm bleiben möchte und tu nichts. Und wenn ich, wenn ich geflirtet schreibe und dann Submit ausdrucke, dann können Sie Firmen sehen , die wir erfolgreich gemacht haben. Also ja, so validierst du das Formularfeld. Sie können auch mehrere Formularfelder haben. Ich zeige dir nur noch ein Formular ausfüllen. Schreiben Sie einfach Namen und Passwort und Passwort oder ist es eine erworbene Bestellung? Nein, ich würde ihm einfach eine Länge geben. Wert Punktlänge weniger als drei. Wenn der Wert die Punktlänge weniger als 3 ist und wir erhalten das Passwort sollte mehr als drei sein. Direktoren. Jetzt habe ich ein neues x-Formular frei, aber dieser Fremdschlüssel, diese Schriftart reicht aus, um sowohl dieses Textfeld als auch für das zweite Textfeld zu validieren , müssen wir einen anderen Textbearbeitungs-Controller erstellen, welches wird Passwort-Controller genannt. Ich kopiere es einfach und füge es hier ein. Wenn ich nun den Namen geflirtet schreibe, aber das Passwort gebe ich nur 12 Zeichen, dann sollte das Passwort mehr als drei Zeichen lang sein. Wenn ich nun vier Zeichen habe und auf „ Absenden“ klicke , wurde das Formular erfolgreich eingereicht. Auf diese Weise validieren Sie mehrere Felder gleichzeitig mit dem Formularschlüssel. Und das heißt, wir verwenden dieses Widget, um Formularfelder zu validieren, oder Sie können Textfelder sagen. Nun, ein anderes Konzept, das Sie mit RE kennen sollten, das für Sie nützlich sein könnte, ist die Rettung eines Unternehmens. Beim Erstellen einer App möchten wir wahrscheinlich die Formulardaten speichern , um etwas damit zu tun. In diesem Set erstellen wir nur einige Speicherregeln für andere Felder. Und wenn wir dann den Ancef mein Vater nennen, wird es diese drei Regeln ausführen. Was ich damit meine, ist in diesem Textfeld, abgesehen vom Validator haben wir tote eigene auf gespeichert. Und ich drucke einfach hier aus. Ich drucke einfach einen Namen aus. Das Feld wird gespeichert. Und in ihrer Gültigkeit ist das isoliert beim Speichern und Drucken. Das Passwortfeld wird gespeichert. Und um sicherzustellen, dass dieser Code oder diese Funktion ausgeführt wird, schreiben wir einfach den Fremdschlüssel, aktuellen Status Punkt speichern. Das war's. Also brauchst du es vielleicht irgendwo. Es liegt an dir. Aber zumindest sollte man wissen , dass diese Konzepte auch dort sind. Wenn wir in die App gehen und grau gefärbt sind, gehe ich 2345. Und klicken Sie auf Absenden. Siehe nymphal dasselbe Passwort für Listen speichern und dann erfolgreich übermittelte Formulare. Also hier haben wir gerade die Bewertung ausdrucken, aber es kann verwendet werden, um dem Wert zwei Variablen zuzuweisen, r und einige Netzwerkaufrufe für das, was sie waren SET, tut Status oder was auch immer Sie wollen, es liegt an Ihnen. Aber jede Eigenschaft oder jede Methode wird für einen bestimmten Zweck verwendet. Und jetzt liegt es an einem Entwickler was er will und was er nicht will. Aber ich hoffe, Sie haben verstanden, wie Sie ein Formularfeld validieren und sicherstellen , dass der Benutzer nicht eingibt, was er will. In der nächsten Sitzung werden wir mehr über dieses Textfeld und seine Eigenschaften sprechen . Aber bis dahin hoffe ich, dass es dir gefällt. 29. Dekoration und andere Eigenschaften: Bis jetzt haben wir gelernt, Funktionen von Textfeldern zu verwenden, wie man validiert, wie man speichert und was auch immer. Aber jetzt werden wir es auch gut aussehen lassen. Zum Dekorieren wird die Texte also die Deklarationseigenschaft wiederverwendet, die eine Eingabedekoration als Wert annimmt. Probieren wir es aus. Also haben wir dieses Textfeld außerhalb des Namens. Hier. Wir haben bereits diese Deklarationseigenschaft , die die Eingabedekoration ihren Wert akzeptiert. Jetzt ist also zuerst Text gekennzeichnet, dem wir dem Benutzer Informationen gegeben haben. Jetzt muss ich das einfach entfernen. Und der zweite ist der Hinweistext. Es heißt also eine Lösung. Also schreibe ich einfach deinen Namen. Okay, mal sehen. Sie können sehen, dass Sie zuerst die Hinweise- und Ebeneneigenschaften verwenden , um dem Benutzer Informationen zu geben. Wenn ich jetzt auf den Namen klicke, siehst du, dass es diese zusätzliche Sache gibt. Das stimmt, dein vollständiger Name. Also und wenn wir etwas schreiben, wird es entfernt. Und wenn es leer ist, wird es wieder angezeigt. Zweitens können Sie Symbole hinzufügen, indem ich Präfix verwenden kann, ich kann Suffix hinzufügen, ich kann Eigenschaften der Eingabedekoration hinzufügen. Was ich damit meine, ist in der Eingabedeklaration, zuerst zeige ich es Ihnen. Das kann ich. Ich kann, ich kann anfangen. Jetzt. Okay. Sieh es dir an. Siehst du, du hast dieses Icon hier. Wenn ich jetzt ein Präfix eine Dose sage, Es ist das Gleiche auf Linden Lu grenzt, wird verlängert. Es kommt innerhalb der Grenze. Wenn wir Präfix und Suffix schreiben , kann ich es. Wir haben dieses Icon auf der rechten Seite. Also nur das ist der Unterschied. Nicht viel. Aber es gibt endlich, dieses Icon gibt es eine ganze Menge effizient und sieht aus, ich mag dieses Präfix, also lasse ich es einfach mit dem Präfix, das ich kann. Okay. Die nächste. Sie können auch Pulver für produktives Hinzufügen geben darüber mit einem Textfeld entfernen. Also im Moment, wenn wir keine schöne Immobilie schreiben oder geben, dann unten sind die unten getauschten Tage standardmäßig bereits Tage, Sie können das auch entfernen. Um das zu entfernen, müssen wir einfach Input schreiben, Burger und speichern. Und sehen Sie, dass unter der Grenze liegt. Aber wenn du wie ich bist , mag ich die ganze Grenze. Unser Plan-Eingabeparameter ist also der Wert, den wir ihm zuweisen müssen , damit er von allen Seiten eine Grenze hat. Und es sieht sehr nett aus. Und ich möchte auch etwas Abstand zwischen Texten geben, dafür passendes Textform ausfüllen. Ich werde psi Squawks genannt. Es gibt nur Geschenke und gib ihm eine Höhe von 20. Damit es diesen Abstand zwischen den beiden Texten gibt, Farmfeldern. Jetzt ist die dritte Deklaration, die wir verwenden können , Helfertexte verwenden. Wenn Sie kein Label möchten, aber eine persistierende Nachricht für den Benutzer möchten. Was ich damit meine, ist in diesem Passwort-Textformular ausgefüllt, ich werde einfach den Helfertext und das Passwort haben sollten. Boss, mehr als drei. Okay. Okay. Sie haben beschriftete Texte gesehen, Sie haben ihm Texte gesehen. Mal sehen, was sind die Helfertexte. Und sieh hier, es ist immer da. Wenn ich auf das Passwort klicke, wird es auch hier angezeigt, dass es nicht entfernt wird. Es ist also gut, sicherzustellen, dass der Benutzer keinen Fehler da er möglicherweise nicht weiß, dass Ihre Anwendung, außer das Passwort auf rechtlich und dann drei Zeichen in diesem Fall enthalten ist. Die Texteigenschaft ist sehr praktisch. Jetzt. Und als nächstes können Sie Tastatureigenschaften auch für TextField ändern. heißt, die Typen sind Eingabetexte, Eingabetyp, Text, das ist normale Tastatur, dann Texteingabeart Punktnummer, numerische E-Mail-Adresse, normale Tastatur, wir tendieren zum Ratenszeichen, Datum, Uhrzeit, dann mehrzeilig. Beispiel dafür ist, dass ich einen Namen habe, nehme an, dann nenne ich. Und denken Sie daran, dass dieser Tastaturtyp Eigenschaften außerhalb der Eingabedeklaration ist. Und es gibt einen Tastaturtyp, Text, eine Punktnummer des Eingabetyps, und das war's. Und ich sage, und wenn ich jetzt auf Name klicke, erscheint diese numerische Tastatur. Dies wird also verwendet, wenn Sie nach Alter fragen oder hauptsächlich die Telefonnummer speichern können. Dafür müssen Sie diese Tastaturtechnik verwenden. Was bedeutet dieser verdunkelnde Text, in dem Text ausgeblendet werden soll , wenn TextField die Rocktexteigenschaft auf true einstellt, verwenden wir sie hauptsächlich in einem Passwortfeld. Also auf jeden Fall wissen Sie, wann der Benutzer ist und während seines Passworts, möchten wir nicht, dass es sich in den normalen Alphabeten befindet. Wir wollen es verstecken. Wechseln Sie dazu einfach in das Textformularfeld außerhalb der Eingabedeklaration, oder? Verdunkelte Texte und ich habe gerade gezeichnet. Und rette es. Wenn Sie nun mit dem Bus mit Flüssigkeit gefüllt sind und f eingeben, l, sind Sie die Notaufnahme. Sie können also sehen, dass das Passwort versteckt ist, es punktet nur und nicht das richtige Alphabet. Es ist also bewährte da der Benutzer auch das ausfüllt, dass diese Anwendung sicher zu verwenden ist. Jetzt steuert die nächste Eigenschaft oder das nächste Feature-Textfeld das nächste Feature-Textfeld maximale Zeichen, Codex Wilkin steuert sie, Macs Zeichenzahlen, ein Begriff darin. Wenn Sie also intuitiv in gewisser Länge wissen, das unsere Einschränkung? Auf die gleiche Weise? Wir können diese Einschränkung haben. Angenommen, im Namensfeld können wir einfach die maximale Länge von 15 schreiben , die mehr als das sagen. Der Name der Person wird sehr klar sein. Also werde ich hier einfach sagen, dass es Alphabet numerisch ist. Aber seit du 15 gegessen hast, wenn ich versuche, sie zu überqueren Nr. Mehr als das kann ich nicht tippen. Ich hoffe also, dass Sie die Eigenschaften oder die Deklaration dieses Textfeldes verstanden haben . Die gleiche Deklaration kann im Textformularfeld verwendet werden, wenn wir auch ein Formular-Widget verwenden. Also das ist, ich habe geschrieben dass Sie lernen möchten, wie man mit Textdateien arbeitet. Im nächsten Video erfahren wir nur einige neue Widgets wie Alert, Dialogfenster und Snackbars. Also bis dahin übe einfach weiter. 30. Alert Dialog Widget: In dieser Sitzung werden wir über die neue Version sprechen , die als Warnungsdialog bezeichnet wird. Ein Warndialogfeld ist also eine nützliche Funktion, die den Benutzer mit wichtigen Informationen definiert wichtigen Informationen eine nützliche Funktion, die den Benutzer mit wichtigen Informationen definiert, um eine bestimmte Aktion auszuwählen. In einfachen Worten, wenn Sie so etwas wie eine Popup-Warnung ausgeben möchten, muss der Benutzer Ja oder Nein auswählen , die diesen 10 entsprechen , wir können ein Warndialogfeld verwenden. Was sind die wichtigsten Eigenschaften der Box? Das sind Aktionen. Dies ist der Satz von Aktionen, die am unteren Rand des Dialogs angezeigt werden . Normalerweise sind Schaltflächen, die ich bereits skizziert habe, Canson sind, ich stimme zu Diese Art von Schaltflächen ziehen dann fest , dass ich es geliebt habe, Dialog in einer großen Schrift und oben im Dialog angezeigt wird der Dialog in einer großen Schrift und oben im Dialog angezeigt wird einfache Worte, nehmen Sie an, sind Sie sich sicher oder eine Warnung ist wichtig? Diese Art von Schlüsselwörtern, dann Inhalt. Dies gibt eine Beschreibung der Nachricht über den Titel, den Sie angegeben haben werden. Es kann also einfach so sein, ob Sie Ihr Konto wirklich deaktivieren möchten , dann können Sie von den Aktionen raten, IM oder nein, das ist nur ein Szenario, das ist nur ein Szenario, das sage ich. Dann einfach Hintergrundfarbe oder Linderung. Um also eine Warnung anzuzeigen, müssen Sie die Funktion show dialog aufrufen, die den Kontext und die Item-Builder-Funktion enthält. Hier können Sie also sehen, dass Syntax Dialog zeigt, dann Kontexte, echte Akzeptor-Kontexte und ihre Rechnung. Es gibt eine Funktion, die ein Warndialogfeld zurückgibt. Probieren wir es also selbst aus. Im letzten Video haben wir bis hier gemacht. Jetzt ist die Validierung des Anbieters wahr und das Formular wird gespeichert. Dann können wir einen Dialog wie Show-Dialog zeigen. Und dann wird es in diesem Zusammenhang Kontext sein. Aber der Baumeister, lieber Will wir funktionieren, der einen Alarmdialog zurückgibt. Okay? Im Warndialogfeld, dieser Titeleigenschaft, werde ich als 10 Q verwenden. Angenommen. Dann schreibe ich in diesem Inhalt diesen Text von erfolgreich eingereicht. Eingereicht, erfolgreich. Bei diesen Aktionen, also Wasser, sind die Schaltflächen, die ich bereitstellen möchte, eine Art Aktion, die ein Benutzer aus diesem Warndialogfeld ausführen wird. Ich werde, tut mir leid, keine SMS schreiben. Ich hätte einen erhöhten Button , der Text schreibt. Und einfach K. Und nachdem sie es benutzen, klicke darauf, okay, ich möchte, dass dieser Dialog verschwindet, dieser erscheint. Normalerweise können Sie so etwas wie getan haben. Dann können Sie auch zu einem anderen Bildschirm navigieren. Oder wenn Sie einen Abbrechen-Button haben, dann müssen Sie diese Navigator-Punkt-Pop-Funktion dann müssen Sie diese Navigator-Punkt-Pop-Funktion verwenden, damit der Benutzer dieses Dialogfeld erneut vom Bildschirm entfernt und wieder zum vorherigen Bildschirm zurückkehrt. Lass uns den Namen sehen. Ich schreibe Flirt und Passwort 123456. Dann übertrage und sieh dir das an Ich habe über diese Art von Popup mit diesem Titel gesprochen. Sie haben 10 Q und legen den Inhalt hier fest. Und wenn ich auf diese Schaltfläche „Okay“ klicke, sehen Sie, dass das Dialogfeld oder das Warnfeld verschwindet. Und abgesehen von Aktionen sind dies die Eigenschaften, die es akzeptiert. Es gibt Linderung, seine Hintergrundfarbe. Wenn Sie Hintergrundfarben schreiben, Akzent und dann um diesen Inhalt herum auffüllen. Und sehen Sie, Sie können Stapel mit dem Titel geben, indem Sie eine Eule in dieser Form hinzufügen, Sie können einen abgerundeten Rechteckrand oder ähnliches haben Sie können einen abgerundeten Rechteckrand oder ähnliches haben. So können Sie runde und dann Googler-Grenze, Randradius haben. Rand-Radius-Setup-Kühler wird 10 erhalten. Lassen Sie uns noch einmal sehen, was diese Hintergrundfarbe und -form mit unserem Warndialogfeld bewirkt. Da ich dann den Namen weiß, lasse ich wieder flattern, Passwort 123456. Wenn ich jetzt auf Absenden klicke, sehe, dass die Farbe rot ist und die Ränder hier sehr gut aussehen , weil sie umgeben ist. Man kann also sagen, dass es eine Warnung sein kann, dass etwas schief gelaufen ist oder ähnliches. Es liegt an dir. Und wenn Sie auch an eine beliebige Stelle außerhalb klicken, verschwindet auch der Warndialog. Es ist also nicht immer notwendig. Wir können, wenn wir wollen, können wir auch sicherstellen , dass das nicht passiert. Aber ich schätze, dafür gibt es eine andere Eigenschaft. Wenn Sie mehr darüber lernen möchten, können Sie es einfach alleine erkunden. Aber ein grundlegendes, wir haben jetzt gelernt, wie man einen grundlegenden Warndialog in unserer Flatter-Anwendung verwendet . In der nächsten Sitzung oder im nächsten Video werden wir auch über ein neues Widget sprechen, nämlich die Snackbar. Danke. 31. Snackbar anzeigen: In der früheren Sitzung sprechen wir über den Dialog. In dieser Sitzung werden wir also über ein neues Widget sprechen, werden wir also über ein neues Widget sprechen das als Snackbar-Widget bezeichnet wird. Snackbar-Widget wird verwendet , um kurze Nachrichten anzuzeigen. Es wird normalerweise am unteren Bildschirmrand angezeigt. Und auch eine verdammte Nachricht wird für einen sehr kurzen Zeitraum angezeigt. Und Anbieter a und anbieterspezifische Zeit ist abgeschlossen, sie wird vom Bildschirm verschwinden. Wenn wir also die Snackbar benutzen , muss dieser Benutzer keine Aktion machen. Unterbrechen Sie seine App ziemlich nicht nur, aber als wir den Alarmdialog verwendeten, gibt es uns ein hippes Pop-up. Dieser Benutzer, egal an welchem Bildschirm er oder sie gearbeitet hat , wird unterbrochen. Aber Snack ist aber sehr leicht und es kommt und geht einfach. Es wird verschickt. Es macht die Erfahrung nicht unruhig, bereit, unangenehm für den Benutzer. Das ist also die Syntax. Es ist eine einfache Snackbar und dann zufrieden. Hier akzeptiert der Inhalt eine Jungfrau als Wert, bei dem es sich normalerweise um besuchte Texte handelt. Wie zeige ich jetzt eine Snackbar an? Um Snackbar v anzuzeigen, müssen Sie diesen Code verwenden, der Gerüstbau Messenger Dot Off Kontext ist . Und danach können wir dann eine Snackbar zeigen. Probieren wir es aus. Jetzt. Ich würde zuerst dieses Dialogfeld kommentieren. Und hier zeige ich uns Snackbar mit einfach Gerüst, Messenger Dot Off Context Dot C. Hier haben Sie eine Snackbar. Und drin muss man nur eine Neg-Bar schreiben. Und in diesem Inhalt können Sie ein erfolgreich eingereichtes Formular schreiben . Okay, probieren wir es aus. Bringen Sie Ihren Emulator mit. Du nennst das Passwort 123456. Wenn ich nun auf das Absenden klicke, sehen Sie sich das Formular an, das erfolgreich eingereicht wurde, und nach zwei oder drei Sekunden verschwindet es. Es ist also ein sehr gutes Feedback an den Benutzer. Wenn es einen Fehler gibt. Angenommen, das Passwortfeld oder der Benutzer existiert bereits. Diese Art von Fehlermeldungen sind also Erfolgsmeldungen, die über die Snackbar angezeigt werden können . Jetzt auch abgesehen vom Inhalt. Somit hat die Snackbar auch andere Eigenschaften. Wie Action. Angenommen, Sie können auch etwas wie „Abbrechen“, „Abbrechen“ oder „OK“ haben. Gleich wie das Warndialogfeld. Dann hintergrundfarbe. Angenommen, ich werde Farben hinzufügen, Punkt-Punkt, lesen, nicht lesen, da es Erfolg sagt, dann lasse ich grün. Dann gibt es auch Rand, Polsterform, Dauer. Es ist, wenn Sie möchten, dass die Dauer geringer ist. Also hier kannst du Sekunden haben und ich schreibe einfach 1 Sekunde. Jetzt versuchen wir es noch einmal. Flirten. Dann 1, 2, 3, 4, 5, 6. Und unterwirf dich. Und das C-Formular wurde erfolgreich eingereicht. Und jetzt, da es eins war, verschwand es zweitens schneller im Vergleich zum früheren. Früher war es wohl zwei oder 3 Sekunden, eine Standardeinstellung. Jetzt liegt es an dir, wie viele Dauer du willst. Oder auch wenn, wenn es einen Editor gibt, können Sie die Hintergrundfarbe rot haben. Es ist also ein sehr gutes Feedback an den Benutzer. Er ist nicht verwirrt warum er sich nicht einloggen kann oder so ähnlich. Denken Sie also einfach an diesen Hals, ist aber sehr wichtig für das Widget. Und ich denke, im Vergleich zu einer Warnbox, lassen Sie dialog v später häufiger Snackbar in unserer Anwendung verwenden . Das war's also. Für dieses Modul. Wir haben gelernt, wie man Text verwendet, um zu erfahren, wie man seinen Wert abruft, wie überprüft man welche Eigenschaften haben dann die Eigenschaften des Textfeldes? Und dann haben Andy und wir etwas über diese beiden neuen Widgets erfahren, das ist der Warndialog und diese Snackbar. Im nächsten Modul werden wir also ein neues Thema beginnen. Tilden. Übe einfach weiter. 32. Futures verstehen: Hallo, willkommen im neuen Modul, in dem wir über uns synchrone Programmierung diskutieren werden. Wenn Sie also neu in diesem Konzept sind, denken Sie vielleicht darüber nach, was synchron ist? Wenn du genau siehst? In normaler Weise, Codes zu schreiben, werden Codes zeilenweise ausgeführt. Das ist von oben nach unten. Und bis eine Funktion die Ausführung vollendet hat. Die nächste Funktion muss warten. Es wird also warten , bis diese Codezeile ausgeführt wird und in die zweite Zeile geht. Bei der asynchronen Programmierung haben wir jedoch die Funktionen erwähnt, die einige Zeit dauern können , bis die Fertigstellung eingebettet ist, ohne die Ausführung des nächsten Codestücks zu stoppen. Auf diese Weise wird eine parallele Ausführung von Code erreicht. Nehmen Sie einfach an, dass Sie eine Datei in die Datenbank auf den Server hochladen . Bis dahin kann die Datei groß sein und es kann einige Zeit dauern, bis sie ausgeführt werden kann. In Fläschchen, die Phi hochgeladen wird, können Sie also auch in der App surfen oder andere Dinge tun. Sie müssen also nicht warten, bis es 100 Prozent erreicht hat. Dies ist also ein sehr schönes Beispiel, auch die anderen verschiedenen Beispiele. Also wann werden wir es praktisch machen. Zu dieser Zeit sind Sie also, Ihre Zweifel oder Konzepte werden klarer und Sie werden es richtig verstehen. Das war's. Wenn wir also über asynchrone Programmierung in den beiden Begriffen sprechen , die uns in den Sinn kommen, unsere Futures und Streams. Dies sind also die zwei Arten von uns synchrone Programme. Du kannst es sagen. Wir werden es eins nach dem 1. besprechen. Zuerst werden wir besprechen, was eine Zukunft ist. Wenn Sie also Stuhl sind, ist einfach wie er heißt. Schulden sind, dass Daten irgendwann in Zukunft kommen werden. Stellen Sie sich vor, wir werden nach einigen Daten aus der Datenbank fragen und das Ergebnis wird nach einigen Sekunden zurückgegeben. Also definitiv Austragungsort. Starte deine Instagram-App oder Facebook. Es dauert ein oder zwei Sekunden , um Ihren Feed zu aktualisieren. So tote Zeit, du könntest vielleicht etwas tun, aber vielleicht nicht. Es liegt an ihnen, aber das ist ein Beispiel für die Zukunft. Das heißt, diese Daten werden in naher Zukunft eingebettet werden. Und es ist eine Garantie, dass etwas vom Ende kommt. Entweder ist es eine Daten oder es ist eine Null. Wenn es keine Daten gibt, müssen Sie sich nur an dieses Konzept erinnern. Das war's. Jetzt verstehen wir, was unsere Zukunft ist, es ist Zeit. Wir werden wissen, wie man die Zukunft definiert. Wenn Sie, Chad ist genau wie ein funktionierendes definiert, das, aber wir verwenden nur Future als Präfix, Präfix. Sie können als diesen Datentyp-Rückgabetyp sehen. Wenn Sie den Rückgabetyp der Funktion beibehalten möchten, können Sie diese Zukunft schreiben und dann I eingeben, dass diese Funktion eine Art String zurückgibt , boolean oder void. Das heißt, es gibt nichts zurück, aber es wird etwas tun. Das heißt, jetzt wissen wir, wie, was unsere Zukunft ist, wie man ein Feature definiert. Jetzt ist es soweit. Wir wissen auch, wie die Zukunft in unserem Programm nutzen können. Es gibt zwei Möglichkeiten , eine Zukunft mit Dan catch auszuführen und async await zu verwenden. Zukünftige Ereignisse, die ich normalerweise netze, sind also Input-Output-Betrieb, von Ihrem eigenen Gerät aus. Es wird etwas speichern oder es wird etwas abrufen. Aber hier werden wir unsere gefälschte und Netzwerkanfrage simulieren , indem wir Future dot verzögert verwenden, was uns helfen wird, das Konzept zu verstehen ohne in diesem Moment eine tatsächliche API aufzurufen. Denn im nächsten Modul werden wir mit echten Daten arbeiten, die aus einer dedizierten API stammen. Zu dieser Zeit werden wir auch Futures verwenden. Aber um das Konzept zu verstehen, werden wir in unserer Anwendung nur das Todesszenario fälschen oder simulieren. Dieser zukünftige Punkt verzögert nimmt zwei Argumente darin. Um es auszuführen, müssen wir zwei Argumente übergeben. Erstens ist die Dauer, die angibt, wie lange die Ausführung benötigt wird. Und das zweite Argument ist eine Funktion, die ausgeführt werden soll , nachdem diese Zeitdauer beendet ist, abgeschlossen ist. Jetzt genug mit dem Theorie-Teil denken Sie vielleicht, okay, ich habe etwas verstanden , aber es wird viele Zweifel geben. Um diese Dinge zu klären. Bringen Sie Ihren Texteditor heraus. In der Leaf-Datei erstelle ich eine neue Datei zukünftigen Bildschirmpunkt-Punkt-Punkt. Hier. Importmaterial haben wie immer einen statusvollen Besuch des zukünftigen Bildschirms. Dann einfach Gerüst-App-Teil. Dann gebe ich einfach Zukunft. Okay. Jetzt im Körper, Lead Service und Fernsehen, dann Kind mit erhöhtem Knopf. Und in diesem Text kann man einfach sagen: Klicken Sie hier. Das war's. Gehen Sie nun zum Mittelwert und machen Sie diesen zukünftigen Bildschirm zu Ihrem Standardbildschirm , der Standardhauptdatei. Okay. Ja, wir haben diese Seite. Was wir jetzt tun werden, ist, dass wir eine Funktion schaffen werden , die eine Zukunft sein wird. Schaffen Sie einfach eine zukünftige Lücke. Es wird vorerst nichts zurückgeben. Dann gib ihm den Namen „ Daten und KI abrufen“. Was wir dann tun können, ist Future dot verzögert zu verwenden. Siehe Future dot verzögerte Methode zum Fälschen eines Netzwerkaufrufs. Jetzt hören Sie, dass Daten nach drei Sekunden erscheinen sollten. Und was hätte hier sein sollen? Was sollte tun? Was getan werden sollte, ist, dass es gedruckt werden sollte. Es ist Flattern. Entwickler. Denn hier war das erste Argument die Dauer und das zweite Argument oder als eine Funktion, die ausgeführt werden sollte nachdem sich dieser Future Dot verzögert hat. Dynamit wird der zweite Bezirk gemacht. Und die nächste Codezeile, die wir hier schreiben werden ist eine zufällige Codezeile. Stell dir vor, denk einfach an dieses Ding. Und da es eine Zukunft ist, sollte es synchron sein. Wir müssen dort ein Waschbecken schreiben. Es ist eine Sache, an die Sie sich ständig erinnern müssen , dass dieses Flattern wissen sollte , dass diese Funktion eine asynchrone Funktion ist. Das war's. Kopieren Sie dies, holen Sie sich Daten an und drücken Sie Ausführen. Jetzt. Jetzt spar einfach auch wenn du willst. Sie können wieder zwei Futures haben, nur um des Verständnisses willen , und es wird ein zweites Ende unter 12 Sekunden geben . Wenn Sie Neid haben, können Sie das Video einfach anhalten und versuchen, diesen Code immer wieder zu verstehen. Oh, okay. wir unseren Code hier von oben nach unten sehen, sollte die Benutzer-ID an erster Stelle stehen. Dann das, hey, es ist flatterte Entwicklung, das sind die Daten des Benutzers. Und dann ist diese zufällige Codezeile die letzte Zeile. Wenn wir jedoch auf den Button klicken, sehen Sie, dass das erste, was ausgeführt oder ausgedruckt wird , eine zufällige Codezeile war. Dann ist das, hey, es ist ein überfluteter Entwickler. Und zuletzt die Benutzer-ID. Sie können also diese Futures sehen. Was ist eine Zukunft? Das heißt, es wird einige Zeit dauern, zwei oder drei Sekunden. Aber danach erhalten wir den Wert, oder der Code wird ausgeführt. Aber es hört nicht auf. Das war also die Sache, die es nicht drei Sekunden gewartet hat, bis es ausgeführt wurde. Es ging einfach direkt, um eine zufällige Codezeile zu drucken. Und es hat gerade diese Codezeile ausgeführt. Das läuft uns also synchron, aber es gibt ein Problem. Das heißt, der Benutzername sollte erst nach der Benutzer-ID abgerufen werden. Das heißt, wir sollten warten, bis eine Funktion ausgeführt wird. Stellen Sie sich vor, dies ist Ihre Instagram-App, dann ist die Benutzer-ID, wenn die App die Datenbank für die Informationen des Benutzers aufruft . Danach sollte nur der Startbildschirm mit diesen Details erscheinen. Ohne die Details sollte es warten und nicht und sollte nicht zur nächsten Zeile gehen. Zu diesem Zweck. Wir benutzen diesen Dan-Fang. Sie dies verwenden, dann fangen bedeutet, dass nach dieser Dauer diese Futures abgeschlossen sind, dann nur die zweite Codezeile ist dann nur dann nur die zweite Sache. Warten Sie also einfach und versuchen Sie es zu verstehen. Dot Dan ist ganz am Ende der Funktion angehängt. Also hier, vor diesem Semikolon, klicke ich einfach auf Punkt und sehe dann ein paar Dinge gibt und wir werden Punkt-Punkt-Punkt verwenden. Was es bedeutet ist zuerst, dass die Zukunft ausgeführt werden sollte und es wird drei Sekunden dauern. Nach drei Sekunden, wenn dieser Sprint fertig ist. Dann auf Likud zu dieser Codezeile, das war's. Und dann fange es und gewinnt. Wenn während der Ausführung dieser Funktion etwas, ein Fehler oder etwas schief gelaufen ist, dann sollten diese vorerst Punktdruck drucken, der hinzugefügt wurde. Normalerweise geben wir dem Benutzer jedoch ein Feedback über eine Snackbar oder eine Warnbox. Wenn Sie sich also an die vorherige Ausgabe erinnern, war es zunächst eine zufällige Codezeile , dann hasst Florida und dann die Benutzer-ID. Aber jetzt wollen wir eine Benutzer-ID. Diese zufällige Codezeile wird zuerst ausgeführt , da dies eine Zukunft ist und es einige Zeit dauern wird. Also ja, es wird nicht warten und direkt gehen. Aber Sie können in dieser Ausgabe sehen, dass die Benutzer-ID, wir die Benutzer-ID haben und dann nur wir die Benutzerdetails haben. So haben wir erfolgreich durchgeführt, eine zukünftige Funktion im Theater geschrieben und auch gelernt, wie man den Fangfehler bei der Arbeit mit Futures belastet oder benutzt . Ich hoffe, du hast das Konzept verstanden. Wenn Sie Zweifel haben, schlage ich Ihnen vor, einfach Geduld und Vig zu haben. Denn in den nächsten zwei oder drei Modulen, am Ende der drei Modelle, werden Sie definitiv alle Ihre Zweifel klar haben denn dies ist nur ein sehr dummy-Beispiel. Aber wenn wir eine echte Anwendung erstellen , werden Sie welken. Okay, aus diesem Grund, während wir es sind, während Sie diese Dinge lernen, ist dies das Anwendungsfallszenario für 10. Das war's also. In der nächsten Sitzung werden wir darüber sprechen. Wir werden über diese Spüle sprechen und warten. Weil die Verwendung von Dan Cage und die Verwendung von async und await dasselbe tut, aber sie sind weit weg. Code zu schreiben ist anders. Das war's. Hoffe du übst und du praktizierst viel. Wir sehen uns im nächsten Video. 33. Async Await Konzept: In dieser Sitzung werden wir also über das Schlüsselwort async await sprechen , während wir eine Zukunft verwenden. In dieser vorherigen Sitzung haben wir gelernt, wie man sie „Catch-Fehler“ benutzt, und es funktioniert definitiv gut. Aber es gibt auch eine alternative Syntax , die vielen gut ist, um viel lesbarer zu sein und auch um mehrere Kette von Dengue-Cage zu vermeiden, verwenden wir ein Sync-Schlüsselwort. Danach unser Funktionsname und fügen Sie await Schlüsselwort hinzu, und fügen Sie await Schlüsselwort bevor alles, was etwas Zeit benötigt, um das auszuführen. Nur zum Beispiel verzögerte sich unsere GET-Anfrage oder diese Zukunft. Jetzt wird alles danach ausgeführt, wenn der Wert zurückgegeben wurde. Was ich damit meine ist, dass Sie die Syntax sehen können. Wir haben diesen zukünftigen und zukünftigen Namen. Dann hat diese Funktion dieses Schlüsselwort, was einfach bedeutet, dass diese Druckvariable nur funktioniert wenn diese zukünftige finanzielle Rückgabe diesen Wert ergibt oder nicht. Also probieren wir es aus. Zunächst möchten Sie, Sie können es mit demselben Beispiel machen, wenn wir wollen. Jetzt habe ich diese Funktion außerhalb dieser zehn Uhr und ich werde sie entfernen. Jetzt. Angenommen, diese Funktion gibt eine ID zurück, die eins ist und V diese ID in einer Variablen namens Benutzer-ID gespeichert hat. Aber jetzt, aber jetzt ist das Ding V1, diese Benutzer-ID, und bring es hier raus. Okay? Wenn wir es also jetzt machen, wird es definitiv etwas hinzugefügt oder so etwas wie Null zeigen . Si, hay, seine zukünftige Benutzerinstanz eine Zukunft, was bedeutet, dass der Wert nicht in dieser Benutzer-ID-Variable gespeichert wurde. Wir sollten warten. Und hier kommt das Keyword weight, was einfach diese Funktion bedeutet. Nachdem diese Funktion ausgeführt wurde, wird der Leadercode zu dieser Zeile wechseln. Was Sie sehen werden, ist, wenn ich auf diese Schaltfläche klicke, wird dieser zufällige Zeilencode nicht ausgeführt. Zuerst. Dies wird ausgeführt. Dann weil es synchron ist, haben wir nicht gesagt, dass wir hier warten sollen. Und jetzt hat das diesen Wert von 1. Aber dieses Konzept ist sehr, sehr, sehr wichtig, denn wenn wir mit Firebase und Datenbanken bauen, wird die Zukunft ständig genutzt, in der ich bin. Deshalb musst du es verstehen. Diese Warte-Funktion erwartet eindeutig Keyword, das ich sagen werde. Jetzt wirst du nein sagen, ich möchte auch darauf warten. Und endlich sollten die Zitate ausgeführt werden. Schreibe also einfach eine Gewichtsfunktion. Vor dieser Funktion. Und jetzt werden Sie sehen, dass sich die Ausgabe ändert. Erstens, Benutzer-ID, zweitens, hey, es ist Flattern. Und dann zufällige Codezeile. Weil wir unsere Bewerbung bei Whittier haben. Geh bis dahin nicht zur nächsten Zeile. Es ist also ein sehr wichtiges Konzept. Bitte versuche es noch einmal bei einem Kind zu üben. Jetzt fragen Sie vielleicht, was passiert, wenn es einen Fehler gibt. Dafür verwenden wir diesen Catch-Block, um einen Netzwerkfehler zu ermitteln. Und in Bezug auf diese Dinge hier, das war's. Und wenn du willst, kannst du einfach Regie bringen. Denn vorher hatten wir es dann und fangen es. Aber jetzt, wenn wir async warten, sollten wir diesen Catch Block auch verwenden. Und sinken bedeutet nicht, dass nur Sie diese Art von separater IT-Funktion erstellen müssen. Angenommen, wir haben diesen Druck. Zweite Funktion. Angenommen. Was passiert jetzt? Wenn ich hier klicke, sehen Sie, dass die zweite Funktion zuerst ausgeführt wird. Und dann hat das Zweifel denn Flattern weiß , dass es eine Zukunft ist. Also, dass es hier nicht gewartet und zu dieser Codezeile gegangen ist. In diesem Szenario. Wenn Sie nein sagen, möchte ich, dass zuerst Daten ausgeführt werden sollen, dann bei Lip Print diese zweite Funktionszeile. Dann muss man hier wieder ein Waschbecken und ein Gewicht benutzen. Schau dir jetzt deine Ausgabe an. Und wir konnten benutzen, es ist auch eine Funktion, und das war auch eine Funktion. Sie müssen also verstehen, dass Sie nur eine Funktion benötigen, in der wir arbeiten können. Nun wird diese Zeile zuerst ausgeführt und sehen Sie, sie wurde zuletzt ausgeführt. Ich hoffe also, dass Sie das Konzept von Async, Warten und Futures tief verstanden haben . Da dieses Konzept so wichtig ist , dass wir an diesem Konzept zweifeln, könnten Sie an keiner weiteren Anwendung arbeiten. Und lass dich nicht davon überwältigen. Weil ich weiß, dass es ein sehr neues Konzept ist, wenn Sie neu in dieser Programmierdose sind . Und wenn du nicht alles verstanden hast, ist es in Ordnung. Weil ich als Anfänger verstehe, dass Sie Zweifel haben werden. Du musst viel üben, aber irgendwann wirst du es bekommen. Das war's für heute. Ich hoffe, Ihnen gefällt unsere Fotosessions. Und auch wenn du unsere Videos nicht ansiehst, vertraue ich dir nur , dass du alleine übst. Und Q. 34. Was sind Streams: Hi. In dieser Sitzung werden wir über Streams sprechen. Früher haben wir diskutiert, was eine Zukunft ist, aber jetzt ist es Zeit V-Knoten, die zweite Art der synchronen Programmierung , die diese streamen. Wenn wir also Streams verwenden, haben wir viele Werte, die uns ehrlich gesagt abgerufen werden, und anstatt eine Verbindung einmal anzuhängen , wie in Zukunft, können wir sie offen und bereit für neue Daten machen um reinzukommen. Einfach, jede Änderung erfolgt oder neue Daten werden eingefügt, die am Ende reflektiert werden. Zukunft hat nur eine Antwort, aber der Stream könnte eine Anzahl von Antworten haben. Ich möchte also einfach sagen, dass ein Benutzer diese Seite oder Anwendung aktualisieren muss, wenn sich etwas ändert, wenn sich bereits wenn sich etwas ändert, wenn sich bereits etwas ändert , eine Benachrichtigung oder eine neue Nachricht erscheint . Aber wenn Sie Streams verwenden, ist es in Echtzeit. Das heißt, jede Datenänderung, ihre Datenbank spiegelt sich direkt in Ihren Antragsschulden wider. Es. Du musst es nicht haben, du musst nichts anderes denken. Dies ist der grundlegende Unterschied. Im nächsten Modul werden wir also praktischer über Streams sprechen , weil wir Firebase verwenden werden. Hier simulieren wir erneut unsere Fälschung, ein Ereignis, das alle paar Sekunden eine neue Nachricht zurückgibt, nur um Ihnen dieses Konzept verständlich zu machen. Es sind also vier Schritte involviert. Erstellen von Streams, Hinzufügen von Daten zu einem Stream, Abhören eines Streams und Schließen einer Zeichenfolge. Lass es uns praktisch machen. Bringen Sie Ihren Texteditor heraus und haben Sie eine neue Datei namens Stream. Screenshot dunkel. Wieder das absolute Minimum, was wir brauchen, oder? Es ist in Ordnung. Ich werde das weniger starre verwenden , weil die Benutzeroberfläche nicht geändert wurde. Stream, Bildschirm, dicht, Gerüst, Dann die Daten Textstream. Was wir jetzt tun werden, ist, dass wir einfach einen Stream erstellen werden. Und um diesen Stream zu erstellen, müssen wir den Stream-Controller vorhersagen , der zur Steuerung dieses Streams verwendet wird. Stream. Stream-Controller ist dies fällig. Und dies wird automatisch importiert, weil wir Streams verwenden und ungerade. Der zweite Schritt besteht darin, dem Stream Daten hinzuzufügen. Sie dazu einfach Erstellen Sie dazu einfach eine Funktion namens Stream-Daten. Und hier kannst du eine for-Schleife von int haben I ist gleich 0, ich weniger als 4, ich plus plus. Und dann Stream-Controller-Dot Add. Du hast die Nachricht bekommen. Und dann warte ich einfach zwei Sekunden hier. Dann wird nur die FOR-Schleife wieder ausgeführt. Diese Sekunden bis, das war's. Sonst nichts. Jetzt in der Leiche. Lasst uns gelindert werden, aber fertig. Wessen Glanz? Wenn wir anklicken , um zu streamen. Machen Sie es dann im Hauptteil als Standard. Bildschirm und einfach neu aufbauen oder die Statistik. Siehe. Du hast das den Stream. Und wir machen es einfach zentriert. Okay. Jetzt werde ich in diesen Stream-Daten scheinen, bitte auflisten, zuzuhören. Tu, ist Baum. Das bedeutet, dass Zuhören bedeutet , dass neue Daten ins Spiel kommen. Jeder sollte gedruckt werden. Ich drucke einfach Daten aus. Und die String-Daten, die ich dieser Funktion zuweisen werde. Ich weiß, dass es hier eine Menge Dinge zu verstehen gibt, aber man kann nur Staubschritte sehen. Zuerst erstellen wir einen neuen Stream. Zweitens war das Hinzufügen von Daten zum Stream. Müde hörte sich den Stream an, was bedeutet einfach was? bedeutet einfach, dass wir eine Verbindung begonnen haben, dass dies zutrifft, im Grunde wie ein Fluss ist. Dann fängst du mit einem an. Wenn, wenn der Startpunkt der Aufgabe nicht geschlossen ist, werden diese Daten oder das Wasser kontinuierlich fließen bis Sie ihren Weg nicht blockieren, einfach ist das. Okay, klicken wir auf diesen Button. Du hast die Nachricht bekommen. Sie haben die Nachricht C3, 4, viermal gedruckt, weil wir diese vier haben. Und wenn du an nein denkst. Also schreibe ich hier nach zwei Sekunden einfach Druck und es wird einfach drucken, lesen. Kay? Versuchen wir es noch einmal. Entschuldigung, das weil es ein Stream war. Also musst du es neu starten. Weil es schon angefangen hat zuzuhören. Du kannst es nicht immer wieder machen. Wir sehen, du hast die Nachricht bekommen. Lesen Sie. Du musst eine Nachricht lesen, du musst Nachrichtenrate. Also hier fließen die Daten kontinuierlich. Ich brauche Änderungen wurden abgelenkt, ohne dass wir uns ändern und die Anwendung neu starten. Dies geschieht die Bedeutung des Streams. Das war's. Also denken Sie vielleicht darüber nach, was passiert, wenn ich weiß, dass die Daten eingegeben werden? Wenn also später auch andere Daten eingegeben werden, werden sie auch gedruckt. Was ich sage ist, lasst uns einen schwebenden Action-Button haben. Shea. Ich schreibe einfach, füge ein On-Premise hinzu. Ich werde einfach in diesem Stream-Controller hinzufügen, wir fügen hinzu, dass Sie einen neuen Knotendefäkation haben. Okay. Jetzt lasst uns sehen. Hier habe ich keinen Druck oder irgendetwas geschrieben, aber da es via hört, habe diesen Code bereits geschrieben und ausgeführt. Als ob ich darauf klicke, fing es an zu hören. Nachdem alles erledigt ist, wenn ich auf Hinzufügen klicke, sehen Sie, dass Sie eine neue Benachrichtigung haben. Wir müssen also nicht noch einmal zuhören, da die Verbindung bereits geöffnet war und das benötigte, dass diese Ströme innerhalb dieses Streams ausgegeben werden. In einfachen Worten: Stellen Sie sich vor, Sie haben Ihre Nachrichten hier in der Benachrichtigungsleiste. Wenn jemand eine neue Benachrichtigung, unsere Nachricht, spürt , erhöht sich diese Anzahl um 123. Dies ist also das Konzept der Zurückhaltung. In einfachen Worten, was ist der Unterschied zwischen Zukunft und Stream? Futures wird ausgeführt, sobald ein Status in die Datenbank geht und diese in diese Verbindung gebracht wird. Wenn sich etwas in der Datenbank ändert, muss der Benutzer diese Seite aktualisieren oder seine Anwendung neu starten, dann wird nur eine neue zukünftige Anfrage gesendet. Aber im Falle von Freestream, wenn es geht und nach den Daten fragt , hängt es eine Verbindung an. Was und in diesem Fall, wenn sich dieser Wert oder wenn sich irgendetwas in der Datenbank ändert, fließt er direkt von der Datenbank zur App. Ohne dass der Benutzer aktualisiert oder irgendetwas. Es wird hier einfach automatisch aktualisiert. Ich hoffe, Sie haben diese Grundlagen klar. Und auch mit dem realen Beispiel werden wir in den nächsten Modulen tun. Aber bis dahin genieße einfach alle Grundlagen jeder Theorie die wir lernen. Danke. 35. FutureBuilder und StreamBuilder Widget: Willkommen zurück. In dieser Sitzung werden wir über ein neues Widget namens Future Builder sprechen. Und es ist im Grunde ein Besuch mit Hilfe, um mit Futures umzugehen. Einige Zukunft, wenn dadurch ein Teil des Codes entfernt wird , den wir schreiben müssen , wenn wir etwas aus diesem Netzwerk holen, also aus der Datenbank oder dem Server. Angenommen, Sie möchten beim Start der Anwendung Daten aus der Datenbank abrufen beim Start der Anwendung Daten aus der Datenbank abrufen und einen Lade-Spinner anzeigen , bis später kommt In diesem Fall wird die Zukunft sehr praktisch aussehen. Es ist nicht wie tote Auslesungen. Zukunft wird dort die Aufgabe nicht ausführen, aber es wird viel Zeit dauern, um etwas mehr Code zu haben. Du musst einen festgelegten Zustand machen und so. Aber warum tun all diese Dinge , wenn wir diese großartige Ablehnung bei uns haben? Es wird also wie jedes andere Widget zurückgegeben. Es akzeptiert zwei Parameter. Eine ist die Zukunft und der zweite ist ein Baumeister. Und der Builder übernimmt auch eine Funktion, die zwei Parameter hat. Einer ist Kontexte, was standardmäßig der Fall ist, und zweitens ist Snapshot , der nur ein Variablenname ist. Es ist jedoch sehr wichtig, da es der Feature-Funktion zurückgegebenen Daten enthält. Hier können Sie also die Syntax sehen, einfach Future Builder. Dann ist die Zukunft die Funktion , die die Zukunft zurückgibt. Und dieser Builder gibt ein Widget zurück, aber es ist eine Funktion. Also lasst es uns praktisch machen, damit du es mehr verstehst. Gehe zum zukünftigen Bildschirm. Und was wir tun können ist, dass diese Funktion wieder zurückkehrt. Ich habe es gerade zum Testen gemacht. Lassen Sie uns eine zukünftige Funktion namens get username haben. Und es wird dasselbe sein , weil es die Zukunft ist. Lassen Sie uns nun eine Variable setzen. Final-Saite. Der Benutzer ist gleich Future dot d laid. Lassen Sie uns eine Dauer von zwei Sekunden haben. Und dann habe ich eine Funktion, die im Grunde den Wert von Bill Gates zurückgibt. Tessa Violet, die Benutzervariable, und dann geben wir diesen Benutzer zurück. Jetzt ist es eine Zukunft, die einen String-Wert zurückgibt. Jetzt ist diese Zukunft zurückgekehrt. Wir müssen es in unserem Körper zeigen, werden einfach alles entfernen und eine Zukunft haben. Bei uns. Ein Tippfehler. Dieser zukünftige Builder, der der erste Parameter ist, ist Future , den wir diesem erhalten Benutzernamen zuweisen sollten. Und zweitens. Und der zweite ist Builder , der eine Funktion ist und es akzeptiert Kontakt nicht Exponat gibt uns Kontext und einen Schnappschuss. Und es hat den Datentyp des Sync-Schnappschusses. Also 10. Ich hoffe, du hast es verstanden. Zuerst. Wir haben dieses zukünftige Builder-Widget geschrieben. Wir weisen es einem zukünftigen Video zu. Jetzt die wichtigen Dinge, CMS, das die Rolle dieses Schnappschusses spielt. Zuerst müssen wir prüfen, ob der Snapshot-Punkt Daten enthält. Wenn es größer ist als, ist es in Ordnung. Bis dahin zeigen wir etwas wie einen Ladeindikator. Werden einfach Ereignisse den Fortschrittsindikator lernen könnten. Das wird also bis zu diesem Zeitpunkt ausgeführt. Das ist diese 2 Sekunde, zuerst bis zur zweiten Stelle. Bis zu diesem Zeitpunkt müssen wir definitiv etwas auf den Bildschirm zeigen. Und wir werden dieses Widget verwenden als zirkulärer Fortschrittsindikator bezeichnet wird. Angenommen, wir haben Daten, dann werden wir einfach zurückkehren. In diesem Kind haben wir ein Text-Widget. Wir werden Punktdaten ausgeben, die sich innerhalb des Schnappschusses befinden. Snapshot-Daten. Das war's. Probieren wir es selbst aus. Es tut uns leid, ich meine, wir müssen diesen zukünftigen Bildschirm zuweisen. Sehen Sie sich diese Ladung an und geben Sie an, dass es zwei Sekunden lang war. Und dann haben wir den Km-Wert , der von der zukünftigen Funktion zurückgegeben wird. Ich hoffe also, dass Sie den zukünftigen Baumeister verstanden haben. Am wichtigsten ist, dass Sie im Snapshotting nachforschen müssen , denn dies ist das, was wir verwenden werden um unsere Widgets zu manipulieren. Das ist die FASTA-Datei zeige einen Ladeindikator und zeigt dann eine Show an oder werden diese Daten abgelegt. Das war's. Also ja, du kannst den Code hier wieder sehen. Dann haben wir das nächste Mal einen StringBuilder gemacht. Stringbuilder arbeitet genauso wie ein zukünftiger Builder. Der einzige Unterschied. Es hört ständig auf diese Änderung und aktualisiert die Benutzeroberfläche entsprechend ohne unseren Bildschirm aktualisieren oder neu erstellen zu müssen. Jetzt nimmt StringBuilder auch zwei Parameter an, das heißt Trim und einen Builder. Jetzt auch Build, das eine Funktion annimmt , die zwei Parameter hat, Kontexte wie standardmäßig. Und Snapshot ist nur eine Variable , die die Daten enthält. Probieren wir es nochmal aus. Gehe zum Stream-Bildschirm. Früher haben wir eine Dummy-Zukunft geschaffen. Jetzt werden wir einen Dummy-Stream erstellen, streamen. Mein Stream. Es wird nicht sehen, es wird als Trick angesehen, denn da es sich in Zukunft um eine Zeichenfolge handelt, haben wir dieses Sync-Schlüsselwort, das wird zugewiesen, wenn es eine Zukunft ist. Aber wenn es Stream heißt, müssen wir einen Sink-Asteroiden schreiben. Das war's. Nun, hier ist einfach, ich werde einfach diese for-Schleife Funktion haben , bei der ich lesen werde, was ich gleich 0 ist. Ich bin weniger als 10, plus, plus. Und ich werde nicht zurückkehren. Ich überlasse das, was ich schätze. Und ich werde auch zukünftiges D-Lipid hier lassen , damit die Werte ein wenig Zeit in Anspruch nehmen. Unsere Funktion ist richtig geschrieben. Es ist einfach, es heißt, dass ich weit von eins auf neun gehen sollte und unser Wert in den Stream eingefügt werden sollte , das heißt 1, 2, 3, um einfach durch die Zeichenfolge zu schweben. Das war's. Jetzt werden wir wieder den Stream Builder haben. Der erste Parameter ist ein Stream, das ist mein Stream. Zweitens ist ein Builder , der einen Kontext haben wird , der Kontext haben wird. Und im Schnappschuss. Jetzt müssen wir wie gewohnt immer prüfen, ob Snapshot Daten enthält. Wenn nicht, gebe ich zunächst einen zirkulären Fortschrittsindikator zurück. Und wenn es eine Gefahr ist, wenn es Daten gab , hatten wir in der Mitte ein Kind. Und der Text besagt Snapshot-Punkt-Datenpunkt ToString. Das war's. Da es eine Ganzzahl ist, habe ich hier zwei Strings gemacht. Und auf der Homepage. Jetzt streamen Sie den rechten Bildschirm. Starten Sie neu und überprüfen Sie die Ausgabe. C 12. Drittens: Wir machen nichts. Wir aktualisieren die Seite nicht. Da jedoch Stream steht, werden die Datenwerte in Echtzeit aktualisiert. Schließlich hoffe ich, dass Sie ein Konzept von Streams und Futures sind klar. Zumindest kennst du das Konzept, das war's. Ich sage nicht, dass Sie alles wissen sollten, was wir hier geschrieben haben und alles, weil es für Sie jetzt vielleicht ein bisschen kompliziert ist. Aber vertrauen Sie mir, wenn wir eine PS und Firebase verwenden, werden alle Ihre Zweifel geklärt. Das war's also für dieses Modul. Im nächsten Modul werden wir echte APIs in unsere Anwendung implementieren. Und all diese Daten werden vom Server kommen. Danke. Wir sehen uns im nächsten Modul.