Erstellen Sie ein Google Play -Entwicklerkonto – Help Center – Pandasuite, MDC -102: Materialstruktur und Layout | Google Codelabs
MDC-102: Materialstruktur und Layout
Contents
- 1 MDC-102: Materialstruktur und Layout
- 1.1 Erstellen Sie ein Google Play -Entwicklerkonto
- 1.2 Erstellen Sie ein Google Play -Entwicklerkonto
- 1.3 MDC-102: Materialstruktur und Layout
- 1.4 Workshop -Ziele
- 1.5 Materialfluttermaterialkomponenten und Subsysteme in diesem Programmierworkshop
- 1.6 2. Konfigurieren Sie die Flutterentwicklungsumgebung
- 1.7 3. Laden Sie die Abfahrts -App für den Programming Workshop herunter
- 1.8 Sie haben bereits den MDC-101-Workshop gefolgt ?
- 1.9 Sie starten von vorne ?
- 1.10 … Oder klonen Sie den Workshop von Github
- 1.11 Wählen Sie den richtigen Zweig
- 1.12 Öffnen Sie das Projekt und führen Sie die Anwendung aus
- 1.13 4. Fügen Sie eine höhere Anwendungsleiste hinzu
- 1.14 Fügen Sie ein Appbar -Widget hinzu
- 1.15 Fügen Sie ein Text -Widget hinzu
- 1.16 Fügen Sie zu Beginn der Linie eine Symbolbutton -Taste hinzu
- 1.17 Aktionen hinzufügen
- 1.18 5. Fügen Sie ein Blatt in ein Netz hinzu
- 1.19 Fügen Sie ein Gridview -Widget hinzu
- 1.20 Setzen Sie den Inhalt ein
- 1.21 6. Erstellen Sie eine Sammlung von Dateien
- 1.22 Erstellen Sie eine Sammlung von Dateien
- 1.23 Produktdaten hinzufügen
- 1.24 7. Glückwunsch !
- 1.25 Folgende Schritte
Materialdesign bietet Navigationsformate, die eine große Benutzerfreundlichkeit garantieren. Eine der sichtbarsten Komponenten ist die obere Anwendungsleiste.
Erstellen Sie ein Google Play -Entwicklerkonto
Informieren Sie Ihre persönlichen Daten, die Adresse Ihrer Wahl und Ihr Passwort.
Akzeptieren Sie die allgemeinen Verkaufsbedingungen (GTC).
Fügen Sie ein schönes Foto von sich hinzu.
Erstellen Sie ein Google Play -Entwicklerkonto
Das Verfahren zum Erstellen eines Google Play Developer -Kontos ist viel einfacher als bei Apple.
Verbinden Sie sich mit Ihrer Google Mail -Adresse.
Akzeptiere den GTC.
Passen Sie die Registrierungsgebühren an: Eine einzige Zahlung von 25 Euro, um alle Anträge Ihrer Wahl zu veröffentlichen !
Informieren Sie die Informationen zu Ihrem Konto: Entwicklername, E -Mail -Adresse und Telefonnummer.
Dies hat Ihre Frage beantwortet ?
Vielen Dank für die Kommentare, dass es ein Problem gab, Ihre Kommentare abzugeben. Bitte versuchen Sie es später erneut.
Letztes Update am 9. November 2021
Assoziierte Artikel
- Erstellen Sie eine Anwendung auf Google Play Console
- Generieren Sie das Android P12 -Zertifikat
- Exportieren Sie die APK- oder AAB -Datei
- Veröffentlichen Sie eine Android -Anwendung
- Veröffentlichen Sie eine Android -App außerhalb des Play Store
- Veröffentlichen Sie im Google Play Store
MDC-102: Materialstruktur und Layout
Materialkomponenten (MDC) helfen Entwicklern, Materialdesign zu implementieren. MDC wurde von einem Team von Ingenieuren und Spezialisten für Benutzererfahrungen bei Google entworfen und bietet Dutzende eleganter und funktionaler Benutzeroberflächenkomponenten. Es ist für Android, iOS, das Web und Flattern verfügbar.Material.Io/entwickeln.
Im MDC-101-Programmierworkshop haben Sie zwei Elemente der Materialkomponenten verwendet, um eine Verbindungsseite zu erstellen: Textfelder und Schaltflächen, die “Ink” -Animationen umfassen. Lassen Sie uns auf diesen Basen unsere Anwendung bereichern, indem wir Navigation, Struktur und Daten hinzufügen.
Workshop -Ziele
In diesem Programming Workshop erstellen Sie einen Startbildschirm für Schrein, Ein E-Commerce-Antrag für den Verkauf von Kleidung und Gegenständen für das Haus. Dieser Bildschirm enthält:
- Eine höhere Anwendungsleiste
- Eine Liste von Produkten in Form eines Netzes
Bitte beachten Sie, dass dieser Programmierworkshop mit Ausnahme von Screenshots durch Material 3 ersetzt wurde. Sie vermitteln dennoch die gleichen Informationen.
Dieser Programming -Workshop ist der zweite der vier Workshops, mit denen Sie eine Bewerbung für ein Produkt namens Sanctuary erstellen können. Wir empfehlen Ihnen, allen Programmierworkshops in der Reihenfolge zu verfolgen, um nach und nach in den Aufgaben voranzukommen. Hier finden Sie Ihre Programmierworkshops:
- MDC-101 Flutter: Grundprinzipien der Materialkomponenten
- MDC-103 Flatter: Verwendung von Themen des Materialdesigns (Farbe, Formen, Erhöhung und Typ)
- MDC-104 Flutter: Fortgeschrittene Materialdesignkomponenten
Materialfluttermaterialkomponenten und Subsysteme in diesem Programmierworkshop
- Oberer, höher
- Gitter
- Karten
In diesem Programming Workshop verwenden Sie die Standardkomponenten, die von Material Flattern bereitgestellt werden. Sie lernen, sie im Abschnitt MDC-103 anzupassen: Verwendung von Themen des Materialdesigns (Farbe, Formen, Erhöhung und Typ).
Wie würden Sie Ihre Erfahrung in der Entwicklung mit Flutter bewerten? ?
2. Konfigurieren Sie die Flutterentwicklungsumgebung
Für diesen Workshop benötigen Sie zwei Software: den Flutter SDK und einen Verlag.
Sie können den Programmierworkshop auf einem der folgenden Geräte ausführen:
- Ein Android- oder physisches iOS -Gerät, das mit Ihrem Computer verbunden und im Entwicklermodus eingestellt ist.
- Der iOS -Simulator (Xcode -Tools zu installieren).
- Der Android -Emulator (der in Android Studio konfiguriert werden muss).
- Ein Browser (Chrome ist zum Debuggen erforderlich).
- Als Windows, Linux oder MacOS -Desktop. Sie müssen Ihre Anwendung auf der Plattform entwickeln, auf der Sie sie bereitstellen möchten. Wenn Sie beispielsweise eine Windows -Desktop -Anwendung entwickeln möchten, müssen Sie diese unter Windows tun, um auf die entsprechende Kompilierungskette zuzugreifen. Erfahren Sie auch über die spezifischen Anforderungen für Betriebssysteme, die auf DOCS detailliert sind.flattern.Dev/Desktop.
3. Laden Sie die Abfahrts -App für den Programming Workshop herunter
Sie haben bereits den MDC-101-Workshop gefolgt ?
Wenn Sie den MDC-101-Programmierworkshop beendet haben, sollte Ihr Code bereit sein, diesen Workshop zu starten. Gehen Sie zur nächsten Stufe: Fügen Sie eine höhere Anwendungsleiste hinzu.
Sie starten von vorne ?
Laden Sie die Abfahrtsanwendung für die Workshop herunter
Die Startanwendung befindet sich in der Materialkomponent-Flutter-Codelabs-102-Starter_and_101-Complete/mdc_100_Series .
… Oder klonen Sie den Workshop von Github
Um diesen Programmierworkshop aus GitHub zu klonen, führen Sie die folgenden Befehle aus:
Git -Klon https: // github.COM/Materialkomponenten/Materialkomponenten-Flutter-Codelabs.GIT-CD-Materialkomponenten-Flutter-Codelabs/MDC_100_Series Git Checkout 102-Starter_and_101-Complete
Für Hilfe finden Sie im Klonenabschnitt von GitHub
Wählen Sie den richtigen Zweig
Die MDC-101-Programmierworkshops bei 104 verlassen sich aufeinander. Wenn Sie also den Code für den MDC-102-Workshop beenden, wird er zum Startcode des MDC-103-Workshops. Der Code ist in mehrere Verzweigungen unterteilt, die Sie mit diesem Befehl die Liste anzeigen können:
Git Branch -List
Um den fertigen Code anzuzeigen .
Öffnen Sie das Projekt und führen Sie die Anwendung aus
- Öffnen Sie das Projekt im Verlag Ihrer Wahl.
- Befolgen Sie die Anweisungen zu dem von Ihnen ausgewählten Verlag. Sie sind auf der Seite “Erste Schritte ausführen” (Erstschritte> Test) zugänglich auf der Seite “Die App ausführen” (Ausführen der Anwendung).
Erfolgreicher Betrieb. Die Seite der Sanctuary-Verbindung aus dem MDC-101-Programmierworkshop muss auf Ihrem Gerät angezeigt werden.
Jetzt, da der Verbindungsbildschirm vorhanden ist, fügen wir der Anwendung einige Produkte hinzu.
4. Fügen Sie eine höhere Anwendungsleiste hinzu
Wenn Sie für den Moment auf die Schaltfläche “Weiter” klicken, wird der Startbildschirm mit der Nachricht angezeigt. “Sie haben es getan!” (Du warst erfolgreich.)). Perfekt. Unser Benutzer hat jedoch nichts zu tun und weiß nicht, wo er sich in der Anwendung befindet. Um Ihnen zu helfen, ist es Zeit, Navigation hinzuzufügen.
Dort Navigation Bezieht sich auf Komponenten, Interaktionen, visuelle Indikatoren und Informationsarchitektur, mit denen Benutzer in einer Anwendung navigieren können. Sie können Inhalte und Funktionen entdecken und einfach Aufgaben ausführen.
Um mehr herauszufinden.
Materialdesign bietet Navigationsformate, die eine große Benutzerfreundlichkeit garantieren. Eine der sichtbarsten Komponenten ist die obere Anwendungsleiste.
Möglicherweise kennen Sie dieses Element unter dem Namen “Navigationsleiste” unter iOS oder einfach “Anwendungsleiste” oder “Header”.
Um den Benutzern einen schnellen Zugriff auf andere Aktionen zu bieten, fügen wir eine höhere Anwendungsleiste hinzu.
Fügen Sie ein Appbar -Widget hinzu
Zuhause.Dart, fügen Sie eine Appbar zu “Scaffold” hinzu und löschen Sie dann die konstete hervorgehoben:
Return const scaffold (// toDo: App -Leiste hinzufügen (102) Appbar: Appbar (// Todo: Fügen Sie Schaltflächen und Titel (102)),
Die Zugabe derAppbar Im Appbar -Feld: Das Gerüst ermöglicht es uns, ein perfektes und kostenloses Layout zu erhalten, sodass die Anwendungsleiste oben auf der Seite und unterhalb des Körpers bleibt.
Gerüst ist ein wichtiges Widget in MaterialApps. Es bietet praktische APIs, um alle Arten von aktuellen Angelegenheiten wie Panels, Benachrichtigungsstangen und Bottom Sheet Elemente “Snackbar” -Meldungsstangen anzuzeigen. Es erleichtert sogar die Platzierung eines schwebenden Aktionsknopfs.
Wenden Sie sich an die Flutter -Dokumentation, um mehr über Gerüst zu erfahren.
Zeichnen Sie das Projekt auf. Sobald der Schrein aktualisiert ist, klicken Sie auf Nächste (Folgende) zum Anzeigen des Startbildschirms.
Das Element ist gut positioniert, aber es fehlt ein Titel.
Fügen Sie ein Text -Widget hinzu
Zuhause.Dart, fügen Sie der Appbar -Anwendungsleiste einen Titel hinzu:
// TODO: App -Bar (102) Appbar: Appbar (// Todo: Fügen Sie Schaltflächen und Titel (102) hinzu: Const Text ('Shrine'), // Todo: Hinzufügen von nachverfolgten Schaltflächen (102) hinzufügen (102)
Zeichnen Sie das Projekt auf.
Möglicherweise haben Sie Variationen für jede Plattform bemerkt. Das Material Design -System berücksichtigt, dass jede Plattform (Android, iOS, Web) unterschiedlich ist und die Erwartungen der Benutzer unterschiedlich sind. Zum Beispiel auf iOS sind die Titel fast immer zentriert. Dies ist das Standardverhalten von UIKIT. Auf Android stehen sie links auf. Wenn Sie einen Emulator oder ein Android -Gerät verwenden, sollte Ihr Titel links ausgerichtet sein. Bei einem Simulator oder einem iOS -Gerät muss es zentriert sein.
Um mehr zu erfahren, wenden Sie sich an diesen Artikel über die Anpassung an verschiedene Plattformen mit Materialdesign.
Viele Anwendungsleisten haben eine Schaltfläche neben dem Titel. Fügen Sie unserer Anwendung ein Menüsymbol hinzu.
Immer zu Hause.DART, Definieren Sie ein IconButton -Element für das führende Feld: der Appbar -Anwendungsleiste. (Platzieren Sie es vor dem Titelfeld: In Übereinstimmung mit dem Start vom Anfang bis zum Ende der Zeile):
// TODO: Fügen Sie Schaltflächen und Titel (102) Fügen.Menü, SemanticLabel: 'Menü',), Onpresse: () < print('Menu button'); >, )),
Zeichnen Sie das Projekt auf.
Das Menüsymbol (auch “Hamburger” genannt) wird am gewünschten Ort angezeigt.
Die Klasse IConbutton ist eine praktische Möglichkeit, Materialsymbole in Ihre Anwendung zu integrieren. Sie verwendet ein Widget Symbol. Flutter hat eine vollständige Sammlung von Ikonen im Klassenzimmer Ikonen. Symbole werden automatisch gemäß “const” -Kanal -Mappings importiert.
Um mehr über die Icons -Klasse zu erfahren, finden Sie in der Flutter -Dokumentation. Weitere Informationen zum Icon -Widget finden Sie in der Flutter -Dokumentation.
Sie können auch Tasten am Ende der Linie hinzufügen. In Flutter werden diese Tasten “Aktionen” bezeichnet, die als “Aktionen” bezeichnet werden.
Bedingungen Anfang Und ENDE Drücken Sie die Bedeutung des Lesens aus, unabhängig von der betreffenden Sprache. Wenn Sie in einer Zungenlesung von links nach rechts arbeiten, wie zum Beispiel Englisch, Anfang bedeutet Nach links Und ENDE bedeutet Nach rechts. In einer Sprache, die wie Arabisch von rechts nach links liest, der Begriff Anfang bedeutet Nach rechts, Und ENDE bedeutet Nach links.
Um mehr über die Umkehrung der Benutzeroberfläche zu erfahren.
Aktionen hinzufügen
Es ist genug Platz für zwei andere Ikonbuttonelemente.
Fügen Sie sie nach dem Titel zur Appbar -Instanz hinzu:
// TODO: Hinzufügen von nachverfolgten Tasten (102) Aktionen: [IconButton (Symbol: const Icon (Symbole.Suche, SemanticLabel: 'Search',), Ontpresd: () < print('Search button'); >, ), Iconbutton (Symbol: const Icon (Symbole.Tune, semanticLabel: 'filter',), onpresd: () < print('Filter button'); >, ),],
Zeichnen Sie das Projekt auf. Ihr Startbildschirm sollte wie folgt auftreten:
Die Anwendung hat jetzt eine Schaltfläche zu Beginn der Zeile, einen Titel und zwei Aktionen rechts. Die Anwendungsleiste wirkt sich auch ausElevation Aufgrund eines leichten Schatten.
In einer Icon -Klasse das Feld SemanticLabel ist eine häufige Möglichkeit, Informationen zum Flattern hinzuzufügen. Es handelt . Sie werden es in vielen Kursen finden.
Die in diesem Feld enthaltenen Informationen ermöglichen es, Informationen über Bildschirmleser über die Rolle dieser Schaltfläche bereitzustellen.
Wenn ein Widget kein semantisches Feld hat: Sie können es in einem Widget zusammenfassen Semantik. Weitere Informationen zum Semantik -Widget finden Sie in der Flattern -Dokumentation.
5. Fügen Sie ein Blatt in ein Netz hinzu
Lassen Sie uns nun, da unsere Anwendung etwas strukturierter ist, ihren Inhalt organisieren, indem wir sie in Dateien platzieren.
DER Karten sind unabhängige Elemente, die den Inhalt und die Aktionen anzeigen, die mit einem bestimmten Thema verbunden sind. Sie bieten eine flexible Möglichkeit, ähnliche Inhalte in Form einer Sammlung zu präsentieren.
Um mehr zu erfahren.
Um mehr über das Karten -Widget (Blatt) zu erfahren, wenden Sie sich an den Artikel über die Erstellung von Layouts in Flutter.
Fügen Sie ein Gridview -Widget hinzu
Beginnen wir zunächst ein Blatt unter der oberen Anwendungsleiste hinzufügen. Derzeit das Widget Karte (Blatt) enthält nicht genügend Informationen, um sich selbst sichtbar zu positionieren. Wir werden es daher in einem Widget zusammenfassen Rasteransicht.
Ersetzen Sie das Zentrum im Körper des Gerüstelements durch ein Gridview -Widget:
// TODO: Fügen Sie eine Gitteransicht hinzu (102) Körper: Gridview.Graf (Crossaxiscount: 2, Polster: const Edgeinsts.Alles (16.0), Childaspectratio: 8.0/9.0, // todo: Erstellen Sie ein Gitter mit Karten (102) Kinder: [Card ()],),)),
Lassen Sie uns diesen Code analysieren. Das Gröber -Widget nennt den Hersteller Count (), da die Anzahl der angezeigten Elemente gezählt werden kann und nicht unendlich ist. Aber er braucht zusätzliche Informationen, um sein Layout zu definieren.
Die Variable Crossaxiscount: Zeigt die Anzahl der Elemente pro Zeile an. Wir wollen zwei Spalten bekommen.
L ‘Transversalachse In Flattern entspricht wir der Achse, dass wir nicht scrollen. Das Gefühl der Scrollen heißt Hauptachse. Wenn Sie vertikale Scrollen verwenden, wie der Standardfall mit GridView, ist die Querachse horizontal.
Weitere Informationen finden Sie auf der Seite, die dem Erstellen von Layouts gewidmet ist.
Das Polsterfeld: Definiert einen freien Speicherplatz auf den vier Seiten des Gridview -Widgets. Natürlich ist dieser Rand aufgrund des Elements oder darunter nicht sichtbar, da für den Moment noch kein Kindergridview neben diesem Element platziert wurde.
Das Kindaspecto -Feld: Identifiziert die Größe der Elemente in Form von Anteilen (Breite auf der Höhe).
Standardmäßig erstellt GridView Blöcke mit identischer Größe.
Wir haben ein Blatt, aber es ist leer. Fügen Sie diesem Blatt Kinder -Widgets hinzu.
Setzen Sie den Inhalt ein
Die Blätter müssen Bereiche für ein Bild, einen Titel und einen sekundären Text enthalten.
Aktualisieren Sie Kinder aus dem Gridview -Widget:
// TODO: Erstellen Sie ein Gitter mit Karten (102) Kinder: [Karte (ClipBehavior: Clip.Antialias, Kind: Säule (Crossaxisalignment: Crossaxisalignment.Start, Kinder: [Aspectratio (Aspectratio: 18.0/11.0, Kind: Bild.Vermögenswert ('Vermögen/Diamant.png '),), Polsterung (Polsterung: const Edgeinsts.von Ltrb (16.0, 12.0, 16.0, 8.0), Kind: Säule (Crossaxisalignment: Crossaxisalignment.Start, Kinder: [Text ('Titel'), const SizedBox (Höhe: 8).0), text ('sekundärer Text'),],),),],))]]]],
Dieser Code fügt ein Spalten -Widget (Spalte) hinzu, mit dem Sie die Widgets von Kindern vertikal haben können.
Der Crossaxisalignment -Parameter: Field gibt den Crossaxisalignment -Wert an.Starten Sie, was bedeutet, “den Text auf dem” Start der Zeile “” Seite “auszurichten”.
Das Widget Seitenverhältnis Definiert die Anteile des angezeigten Bildes unabhängig von der Art des bereitgestellten Bildtyps.
Das Element Polsterung definiert einen Rand für den Text.
Die beiden Widgets Text Einer übereinander wird platziert und durch acht leere Raumpunkte (getrennt (getrennt) (Größenbox)). Wir erstellen ein anderes Element Spalte um ihnen Innenräume zu geben.
Zeichnen Sie das Projekt auf.
In dieser Übersicht können Sie feststellen, dass das Blatt mit einem Rand positioniert ist, seine Ecken abgerundet sind und einen Schatten projiziert (die seine Erhebung darstellen). Die gesamte Form wird im Materialdesignsystem als “Container” bezeichnet (nicht mit der Widget -Klasse, die als Container bezeichnet wird).
Abgesehen vom Behälter sind alle Elemente der Blätter optional im Material. Sie können Header -Text, einen Aufkleber oder einen Avatar, einen Untertiteltext, einen Separatoren und sogar Pickel und Symbole hinzufügen.
Um mehr über den Inhalt der Blätter zu erfahren, wenden Sie sich an diesen Artikel in den Anweisungen zur Materialdesign.
Die Blätter werden in der Regel in einer Sammlung mit anderen Blättern angezeigt. Ordnen Sie sie in Form einer Sammlung in einem Raster an.
6. Erstellen Sie eine Sammlung von Dateien
Wenn mehrere Blätter auf einem Bildschirm vorhanden sind, sind sie in einer oder mehreren Sammlungen gruppiert. Die Dateien einer Sammlung sind koplanar: Sie haben alle die gleiche Erhebung in Ruhe (dh wenn sie nicht ausgewählt oder bewegt werden, was wir hier nicht tun werden).
Erstellen Sie eine Sammlung von Dateien
Für den Moment befindet sich unser Blatt im Kinderfeld: Gridview Grid. Dies führt zu einer großen Menge verschachtelter Code, die schwer zu lesen ist. Lassen Sie uns diesen Teil des Codes in eine Funktion umwandeln, in der es ermöglicht, so viele leere Blätter wie erforderlich zu generieren und eine Liste von Dateien zurückzugeben.
Erstellen Sie eine private Funktion über der Build () -Funktion (denken Sie daran, dass die Funktionen, die mit einer Unterstreichungslinie beginnen, private APIs sind):
// TODO: Erstellen Sie eine Sammlung von Karten (102) Liste _buildgridcards (int Cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ); Rückkehrkarten; >
Weisen Sie die Dateien zu, die im Feld Kinder des Gridview -Widgets generiert wurden. Vergiss nicht Ersetzen Sie alle Elemente, die im Gridview -Widget enthalten sind, durch diesen neuen Code ::
// TODO: Fügen Sie eine Gitteransicht hinzu (102) Körper: Gridview.Graf (Crossaxiscount: 2, Polster: const Edgeinsts.Alles (16.0), Childaspectratio: 8.0/9.0, Kinder: _buildgridcards (10) // ersetzen),
Zeichnen Sie das Projekt auf.
Die Karten sind vorhanden, aber sie zeigen für den Moment nichts an. Es ist an der Zeit gekommen, Produktdaten hinzuzufügen.
Produktdaten hinzufügen
Die Anwendung enthält einige Produkte mit Bildern, Namen und Preisen. Fügen Sie dies den bereits in der Datei vorhandenen Widgets hinzu
Dann zu Hause.Dart, importieren ein neues Paket und einige Dateien für ein Datenmodell:
Paket importieren: Flattern/Material.Dart '; 'Paket importieren: INTL/INTL.Dart '; Modell/Produkt importieren.Dart '; Importieren Sie 'Modell/Products_Repository.Dart ';
Ändern Sie schließlich _buildgridcards (), um Produktinformationen abzurufen, und verwenden Sie diese Daten in den Dateien:
// TODO: Erstellen Sie eine Sammlung von Karten (102) // Ersetzen Sie diese gesamte Methodenliste _buildgridcards (BuildContext -Kontext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Endgültiges Themeedata -Thema = Thema.von (Kontext); Endgültige numberFormat Formatter = numberFormat.Simplecurrent (lokal: Räumlichkeiten.Lokalof (Kontext).tostring ()); Produkte zurückgeben.Karte ((Produkt) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >)).Auflisten (); >
BEMERKTE : Warten Sie, bevor Sie die Zusammenstellung und Ausführung starten. Es bleibt eine Änderung, um vorzunehmen.
Um den Text zu formatieren, verwenden wir Themendaten Themedata Aus dem Wert BuildContext aktuell.
Um mehr über die Formatierung des Textes zu erfahren. Um mehr über die Formatierung eines Themas zu erfahren, fahren Sie nach diesem Programmierworkshop mit MDC-103 fort: Verwendung von Themen des Materialdesigns (Farbe, Formen, Erhöhungen und Typen).
Ändern Sie auch die Funktion Build (), um den Wert zu übertragen BuildContext bei _buildgridcards () vor dem Start der Zusammenstellung:
// TODO: Fügen Sie eine Gitteransicht hinzu (102) Körper: Gridview.Graf (Crossaxiscount: 2, Polster: const Edgeinsts.Alles (16.0), Childaspectratio: 8.0/9.0, Kinder: _buildgridcards (Kontext) // Code ändern),
Starten Sie die heiße Anwendung neu.
Sie können feststellen, dass wir keinen vertikalen Speicherplatz zwischen den Dateien hinzufügen. Weil sie vier Margen von oben und unten haben.
Zeichnen Sie das Projekt auf.
Die erzeugten Daten werden angezeigt, die Bilder sind jedoch von einem unnötigen Raum umgeben. Standardmäßig werden die Bilder mit dem Feld gezeichnet Boxfit definiert .Scaledown (in diesem Fall). Ersetzen Sie diesen Wert durch .Fitwidth, damit sie zoomen und den unnötigen Raum entfernen kann.
Fügen Sie ein Passformfeld hinzu: Wie der Boxfit -Wert.Fitwidth:
// TODO: Passen Sie die Kastengröße an (102) an: Boxfit.Fitwidth,
Unsere Produkte sind jetzt perfekt in der Anwendung angezeigt.
7. Glückwunsch !
Unsere Anwendung bietet einen grundlegenden Betrieb, mit dem der Benutzer vom Verbindungsbildschirm zu einem Startbildschirm übergehen kann, in dem die Produkte angezeigt werden. Einige Codezeilen reichten aus, um eine höhere Anwendungsleiste (mit einem Titel und drei Schaltflächen) und Dateien hinzuzufügen (um den Inhalt unserer Anwendung vorzustellen). Der erhaltene Startbildschirm ist einfach und funktional und verfügt über eine grundlegende Struktur und einen verwendbaren Inhalt.
Die ausgefüllte Version der MDC-102-Anwendung ist in der 103-Starter_and_102-Vervollständigungszweig verfügbar .
Sie können Ihre Version auf der Seite mit der Anwendung dieser Filiale vergleichen.
Folgende Schritte
Mit der Anwendungsleiste, dem Blatt, dem Textfeld und der Schaltfläche oben auf der Seite haben wir jetzt vier Hauptkomponenten der Materialflatternbibliothek verwendet. Um mehr herauszufinden, siehe den Katalog der Materialkomponenten.
Auch wenn unsere Anwendung perfekt funktioniert, spiegelt sie keine Markenidentität oder einen bestimmten Standpunkt wider. Im MDC-103-Workshop: Verwendung von Themen des Materialdesigns (Farbe, Formen, Erhöhungen und Typen) werden wir den Stil dieser Komponenten personalisieren, um eine moderne und dynamische Marke auszudrücken.
Die Verwirklichung dieses Programmierworkshops hat mich um eine Zeit und angemessene Anstrengungen gefragt
Stimme voll und ganz zu
Weder einverstanden noch zu und stimme noch zu
überhaupt nicht einverstanden
Ich möchte weiterhin Materialkomponenten verwenden
Stimme voll und ganz zu
Weder einverstanden noch zu und stimme noch zu
überhaupt nicht einverstanden
Sofern nicht anders angegeben, unterliegt der Inhalt dieser Seite einer Lizenz für Creative Commons Aicome 4.0, und Code -Beispiele unterliegen einer Apache 2 -Lizenz.0. Weitere Informationen finden Sie in den Regeln der Google Developers -Website. Java ist eine eingetragene Marke von Oracle und/oder seine verbundenen Unternehmen.