Erstellen von WhatsApp Ui mit Flutter Teil 2: Die Chat-Liste

Zuvor haben wir beim Erstellen von WhatsApp mit Flutter eine grundlegende App-Leiste mit Registerkarten und Navigation erstellt. Heute erstellen wir die Liste der Chats mit ListView.builder

Die Projektdateien für diesen Beitrag befinden sich auf meinem GitHub. Sie können sie gerne klonen, gabeln und markieren :)

Mit den Einführungen aus dem Weg ist hier ein Screenshot von dem, was wir bauen werden

Modell einrichten

Bevor wir die Liste erstellen, erstellen wir die Vorlage für den Chat. Wir beginnen mit der Erstellung eines neuen Ordners im lib-Ordner 'model'. Erstellen Sie im Modellordner eine Datei mit dem Namen chat_model.dart. Mit der erstellten Datei können wir nun mit dem Aufbau der Struktur beginnen. Wir beginnen mit der Erstellung der Klasse ChatModel.

Innerhalb dieser Klasse erstellen wir die Variablen für die Funktionen, die unsere Chat-Liste haben soll. WhatsApp enthält normalerweise den Avatar der Person, den Namen, die Uhrzeit und den Ausschnitt der Nachricht.

Erstellen Sie die verschiedenen Variablen und weisen Sie sie der Typzeichenfolge zu. Sie werden als endgültig festgelegt, da wir den Wert nur einmal festlegen. Wenn Sie mehr über die verschiedenen Variablentypen in Dart erfahren möchten, klicken Sie hier

Mit den deklarierten Variablen konnten wir sie jetzt an den Konstruktor der Klasse übergeben

Dies erfolgt mit den folgenden Codezeilen

Als nächstes fahren wir mit dem Erstellen einer Liste von Chats fort. Dazu erstellen wir eine Variable namens data, die vom Typ List ist. Die Liste ist vom Typ ChatModel. Dies stellt sicher, dass die eingegebenen Daten dem in der Klasse festgelegten Format entsprechen.

Im obigen Code haben wir sieben Benutzer mit Nachrichten erstellt. Jedes Modell folgt dem von uns erstellten Format. Sie können dies bearbeiten, um so viele Benutzer einzuschließen, wie Sie möchten. Nachdem die Vorlage für unsere Chats erstellt wurde, können wir jetzt zur akuten Listenansicht wechseln.

Die Listenansicht

Zunächst öffnen wir chat_screen.dart und importieren die gerade erstellte Datei.

Als Nächstes ändern wir das Widget von Stateless in Stateful

Von

Zu

Ersetzen Sie Container durch ListView.builder. Mit der ListView können wir eine Reihe von Widgets auf dem Bildschirm anzeigen. Es hat viele verschiedene Eigenschaften, aber die, die wir verwenden werden, sind itemCount und itemBuilder. Der itemCount sollte nicht gleich Null sein. Der itemBuilder wird verwendet, um die Elemente der Liste zu erstellen. Es wird eine Erstellungsmethode verwendet, die der des Widgets "Stateful" und "Stateless" sehr ähnlich ist. Der Hauptunterschied besteht in der Hinzufügung einer Indexvariablen.

Staatenlos / Stateful

itemBuilder

Ändern Sie ChatScreen von

Zu

Für unseren itemCount verwenden wir die Länge der zuvor erstellten Datenliste. Einfach der Wert zu data.length

Als nächstes werden wir an dem Chat-Element arbeiten. Erstellen Sie in itemBuilder eine neue Spalte. Die Spalte ist ein Widget, das seine untergeordneten Elemente in einem vertikalen Array anzeigt. Wie Sie vielleicht bei WhatsApp bemerken, gibt es eine dünne graue Linie zwischen jedem Chat. Um diesen Effekt zu spiegeln, verwenden wir das Divider-Widget. Mit diesem Widget können wir Elemente auf unserem Bildschirm durch eine Linie trennen. Die Höhe, Farbe und der Einzug können alle geändert werden. Im Moment setzen wir nur eine Höhe von 10,0 (die Zahl muss ein Dezimalwert sein).

Nachdem der Teiler erstellt wurde, wechseln wir zur ListTile. Dies ist ein weiteres vorgefertigtes Flutter-Widget, das einfach zu bedienen und dennoch sehr leistungsfähig ist. Es waren verschiedene Eigenschaften wie Leading, Titel und Untertitel, die alle "eingebrannt" waren. Unter dem Teiler erstellen wir das Widget, indem wir new ListTile () eingeben.

Ihre _ChatScreen-Klasse sollte so aussehen

Zuerst beginnen wir mit dem Kreis-Avatar. Dies ist das Bild links neben einer Nachricht mit dem Bild des Benutzers. Dies ist super einfach in Flutter zu erstellen. In der Listenkachel setzen wir die führende Eigenschaft auf einen neuen Kreis-Avatar. Dann geben wir die Hintergrundfarbe und das Hintergrundbild des Avatars an. Die Hintergrundfarbe kann eine beliebige Farbe sein, die Sie in diesem Beispiel mögen. Ich habe Grau verwendet. Für das Hintergrundbild verwenden wir ein Netzwerkbild. Die Avatar-URL aus unserer Datenliste wird übergeben. Dies erfolgt mit folgendem Code:

Hinweis für das NetworkImage geben wir data [index] an. Der übergebene Index stammt aus dem im itemBuilder erstellten Index. Für jede Iteration ändert sich der Index.

Mit unserem erstellten Avatar ändern wir unsere Aufmerksamkeit auf den Benutzernamen und die Uhrzeit / das Datum. Da beide in derselben Zeile liegen, können wir ein Zeilen-Widget verwenden. Dies ist der Spalte sehr ähnlich, außer dass Widgets nicht vertikal ausgerichtet, sondern horizontal ausgerichtet sind.

Die title-Eigenschaft der ListTile wird verwendet. Wir setzen es auf eine Zeile, die zwei Text-Widgets enthält. Einer ist der Benutzername und der andere die Uhrzeit / das Datum. Mit Row können wir auch konfigurieren, wie Widgets beabstandet und ausgerichtet sind. Setzen Sie mit mainAxisAlignment die Ausrichtung auf spaceBetween. Jetzt werden beide Text-Widgets an jedem Ende der Kachel ausgerichtet. Fügen Sie der führenden Eigenschaft die folgenden Zeilen hinzu, um den Namen und die Uhrzeit zu erstellen

Auch hier verwenden wir die Informationen aus der Datenliste und übergeben den Index. Außerdem verwenden wir die style-Eigenschaft des Text-Widgets, um beide entsprechend zu formatieren.

Zum Schluss das Nachrichten-Snippet. Dazu verwenden wir die Untertiteleigenschaft. Es wird ein Container-Widget erstellt, das oben in einem Text-Widget, das seinem untergeordneten Element zugewiesen wird, mit 5.0 aufgefüllt wird. Das Text-Widget zeigt die Nachricht aus der Datenliste für diesen Benutzer an. Der Index wird erneut übergeben. Der Stil des Textes wird ebenfalls geändert, sodass die Schriftgröße erhöht und die Farbe geändert wird.

Ihre Datei sollte jetzt so aussehen

Wenn Sie jetzt Ihre App neu laden, sollte eine funktionierende, scrollbare Liste von Chats angezeigt werden.

Fazit

Heute haben wir die Grundlagen der Listenansicht behandelt, mit Klassen gespielt, den Konstruktor angestoßen und alles zusammengeführt, um eine Arbeitsliste zu erstellen. Der Code für dieses Projekt wird auf GitHub verfügbar sein. Sie können ihn gerne klonen / teilen und selbst mit Flutter herumspielen. Sobald Sie die Grundlagen verstanden haben, ist Flutter eine Freude und die Community um sie herum ist sehr hilfreich und heißt Neulinge willkommen.

Wenn Sie Fragen, Kommentare oder Vorschläge haben, können Sie mir gerne eine Nachricht senden oder einen Kommentar hinterlassen.

- Nash