MDC-101 Flutter: Grundlagen zu Materialkomponenten

1. Einführung

Was sind Material Design und die Material Flutter-Bibliothek?

Material Design ist ein System zum Erstellen ausdrucksstarker und ansprechender digitaler Produkte. Indem sie Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten vereinen, können Produktteams ihr größtes Designpotenzial ausschöpfen.

Die Material Flutter-Bibliothek enthält Flutter-Widgets, die das Design von Material Design-Komponenten (MDC) implementieren, um eine einheitliche Nutzererfahrung über Apps und Plattformen hinweg zu schaffen. Im Zuge der Weiterentwicklung des Material Design-Systems werden diese Komponenten gemäß den Frontend-Entwicklungsstandards von Google aktualisiert, um eine konsistente Pixel-perfekte Implementierung sicherzustellen.

In diesem Codelab erstellen Sie eine Anmeldeseite mit verschiedenen Komponenten von Material Flutter.

Inhalt

Dieses Codelab ist das erste von vier Codelabs, in dem du die App Shrine entwickelst. Das ist eine E-Commerce-App für Kleidung und Haushaltswaren. Dabei wird gezeigt, wie Sie Komponenten mit „Material Flutter“ an jede Marke oder jeden Stil anpassen können.

In diesem Codelab erstellst du eine Anmeldeseite für Shrine, die Folgendes enthält:

• Bild des Shrine-Logos
• Der Name der App (Schrein)
• Zwei Textfelder, eines zum Eingeben eines Nutzernamens und eines für ein Passwort
• Zwei Tasten

Android	iOS

Dies ist das erste von vier Codelabs, die dich durch die Entwicklung einer App für ein Produkt namens Shrine führen. Wir empfehlen, alle Codelabs der Reihe nach durchzugehen, während sie die Aufgaben Schritt für Schritt durchgehen.Die zugehörigen Codelabs findest du unter: MDC-102 Flutter: Materialstruktur und Layout MDC-103 Flutter: Material Theming mit Farbe, Form, Höhe und Typ MDC-104 Flutter: Erweiterte Komponenten von Material

Codelab: Material Flutter-Komponenten und -Subsysteme

• Textfeld
• Schaltfläche
• Wellenrauschen (eine visuelle Form des Feedbacks für Touch-Ereignisse)

In diesem Codelab verwenden Sie die von Material Flutter bereitgestellten Standardkomponenten. Wie Sie sie anpassen, erfahren Sie in MDC-103: Material Design Theming with Color, Shape, Elevation and Type (Material Design-Designs mit Farbe, Form, Höhe und Typ).

Wie würden Sie Ihre Erfahrung mit der Flutter-Entwicklung bewerten?

<ph type="x-smartling-placeholder"></ph> Neuling Mittel Kompetent

2. Flutter-Entwicklungsumgebung einrichten

Für dieses Lab benötigen Sie zwei Softwareprogramme: das Flutter SDK und einen Editor.

Sie können das Codelab auf jedem dieser Geräte ausführen:

• Ein physisches Android- oder iOS, das mit Ihrem Computer verbunden ist und sich im Entwicklermodus befindet.
• Den iOS-Simulator (erfordert die Installation von Xcode-Tools).
• Android-Emulator (Einrichtung in Android Studio erforderlich)
• Ein Browser (zur Fehlerbehebung wird Chrome benötigt)
• Als Windows-, Linux- oder macOS-Desktopanwendung Die Entwicklung muss auf der Plattform erfolgen, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie die Entwicklung unter Windows ausführen, damit Sie auf die entsprechende Build-Kette zugreifen können. Es gibt betriebssystemspezifische Anforderungen, die unter docs.flutter.dev/desktop ausführlich beschrieben werden.

3. Codelab-Starter-App herunterladen

Startprojekt herunterladen

Das Startprojekt befindet sich im Verzeichnis material-components-flutter-codelabs-101-starter/mdc_100_series.

...oder von GitHub klonen

Führen Sie die folgenden Befehle aus, um dieses Codelab von GitHub zu klonen:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

Weitere Informationen finden Sie unter Repository von GitHub klonen.

Den richtigen Zweig

Die Codelabs MDC-101 bis 104 bauen aufeinander auf. Wenn Sie also den Code für 101 fertigstellen, wird er zum Startcode für 102! Der Code ist in verschiedene Zweige aufgeteilt, die Sie alle mit diesem Befehl auflisten können:

git branch --list

Den vollständigen Code findest du in der 102-starter_and_101-complete-Filiale.

Projekt öffnen und App ausführen

1. Öffnen Sie das Projekt in einem Editor Ihrer Wahl.
2. Folgen Sie der Anleitung zum Ausführen der App. unter Erste Schritte: Testlauf für den ausgewählten Editor.

Fertig! Der Startcode für die Anmeldeseite von Shrine sollte auf deinem Gerät ausgeführt werden. Du solltest das Logo des Schreins und den Namen „Schrein“ sehen. direkt darunter.

Android	iOS

Sehen wir uns den Code an.

Die TODOs im Code enthalten Zahlen (101, 102 usw.). Diese beziehen sich auf die Codelab-Nummer, in die du die Änderung implementierst.

Widgets in login.dart

login.dart öffnen. Sie sollte Folgendes enthalten:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

Beachten Sie, dass sie eine import-Anweisung und zwei neue Klassen enthält:

• Die Anweisung import ermöglicht die Verwendung der Material-Bibliothek in dieser Datei.
• Die Klasse LoginPage stellt die gesamte Seite dar, die im Simulator angezeigt wird.
• Die Funktion build() der Klasse _LoginPageState steuert, wie alle Widgets in unserer UI erstellt werden.

Weitere Informationen zu den Grundlagen der Flutter-UI und zu den Widgets finden Sie im Überblick über das Flutter Widget Framework oder im Codelab Write Your First Flutter App, Teil 1.

4. TextField-Widgets hinzufügen

Zunächst fügen wir zwei Textfelder zu unserer Anmeldeseite hinzu, in die die Nutzer ihren Nutzernamen und ihr Passwort eingeben. Wir verwenden das TextField-Widget, das eine unverankerte Beschriftung anzeigt und eine Berührungswelle aktiviert.

Die Textfelder von Material wurden erheblich verbessert, um die Markenflexibilität zu verbessern. Ergänzt wurde dies durch umfassende Forschung zur Nutzererfahrung (UX-Forschung) für eine bessere Nutzerfreundlichkeit und ein besseres visuelles Design.

Weitere Informationen zu den neuen Textfeldern finden Sie im Artikel Material Richtlinien.

Diese Seite wird hauptsächlich mit einer ListView strukturiert, wobei die untergeordneten Elemente in einer scrollbaren Spalte angeordnet sind. Fügen wir nun Textfelder unten ein.

TextField-Widgets hinzufügen

Fügen Sie zwei neue Textfelder und ein Leerzeichen nach const SizedBox(height: 120.0) hinzu.

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

Die Textfelder haben jeweils das Feld decoration:, für das ein InputDecoration-Widget verwendet wird. Das Feld „filled:“ bedeutet, dass der Hintergrund des Textfeldes leicht ausgefüllt ist, damit die Nutzer den Bereich mit der Antippung oder Berührung des Textfeldes erkennen können. Der Wert obscureText: true des zweiten Textfeldes ersetzt die vom Nutzer eingegebene Eingabe automatisch durch Aufzählungszeichen, die für Passwörter geeignet sind.

Speichern Sie Ihr Projekt mit der Tastenkombination Befehl + S, wodurch ein Hot Refresh durchgeführt wird.

Es sollte nun eine Seite mit zwei Textfeldern für Nutzername und Passwort angezeigt werden. Sehen Sie sich die Animation für unverankerte Labels an:

Android	iOS

Zu den Funktionen von TextField gehören:

• Das Aussehen des TextField-Widgets lässt sich leicht ändern. Geben Sie für das Feld „decoration“ einen InputDecoration-Wert an.
• Im Textfeld wird standardmäßig das Berührungsfeedback angezeigt, das als Wellenform oder als Tinte bezeichnet wird.
• FormField ist ein ähnliches Widget, das spezielle Funktionen zum Einbetten von Feldern in Google Formulare bietet.
• Dokumentation zur TextField-Klasse

5. Schaltflächen hinzufügen

Als Nächstes fügen wir zwei Schaltflächen zu unserer Anmeldeseite hinzu: "Abbrechen". und „Weiter“. Wir verwenden zwei Arten von Schaltflächen-Widgets: TextButton und ElevatedButton.

Zwischen Text- und erhöhten Schaltflächen wählen

Warum werden nicht einfach zwei erhöhte Schaltflächen angezeigt? Jeder Schaltflächentyp gibt an, welche Aktionen wichtiger sind als andere.

Ein Layout sollte eine einzelne auffällige Schaltfläche enthalten. Dadurch wird deutlich, dass andere Schaltflächen weniger wichtig sind. Diese auffällige Schaltfläche repräsentiert die Aktion, die unsere Nutzer am ehesten ausführen sollen, um durch unsere App zu gelangen.

Die Maßnahme, die wir nicht tun sollten, ist das Abbrechen der Anmeldung. Da eine erhöhte Taste die Aufmerksamkeit der Nutzer mit ihrem erhöhten Erscheinungsbild auf sich zieht, sollte sie für die wichtigere Aktion verwendet werden. Im Vergleich dazu wirkt die Nur-Text-Schaltfläche links davon weniger hervorgehoben.

Weitere Informationen zur Schaltflächenhierarchie findest du im Artikel Schaltflächen in den Materialrichtlinien.

Überlaufleiste hinzufügen

Fügen Sie nach den Textfeldern den OverflowBar zu den untergeordneten Elementen der ListView hinzu:

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

Die OverflowBar ordnet ihre untergeordneten Elemente in einer Zeile an.

Schaltflächen hinzufügen

Füge dann der children-Liste von OverflowBar zwei Schaltflächen hinzu:

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

Warum gibt es leere Blöcke für die onPressed:-Felder?

Bei der Übergabe von null werden die Schaltflächen deaktiviert. Es gäbe kein Feedback zur Kontaktaufnahme und wir konnten keine Vorstellung davon bekommen, welches Verhalten aktiviert wurde. Wenn Sie leere Blöcke verwenden, können diese nicht deaktiviert werden.

Weitere Informationen zu Schaltflächen und ihren Interaktionen finden Sie unter Interaktive Elemente zu Ihrer App hinzufügen.

Projekt speichern. Unter dem letzten Textfeld sollten zwei Schaltflächen angezeigt werden:

Android	iOS

OverflowBar übernimmt das Layout für Sie. Dabei werden die Schaltflächen horizontal angeordnet, sodass sie nebeneinander erscheinen.

Durch das Berühren einer Schaltfläche wird eine Wellenanimation ausgelöst, ohne dass etwas anderes passiert. Als Nächstes fügen wir den anonymen onPressed:-Funktionen Funktionen hinzu, sodass die Textfelder mit der Schaltfläche „Abbrechen“ gelöscht werden und die Schaltfläche „Weiter“ den Bildschirm schließt:

TextEditingControllers hinzufügen

Um das Löschen der Textfelder fügen wir TextEditingControllers hinzu, um den Text zu steuern.

Fügen Sie die Controller direkt unter der Deklaration der Klasse _LoginPageState als final-Variablen hinzu.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

Legen Sie im ersten Textfeld im Feld controller: den Wert _usernameController fest:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

Legen Sie jetzt im zweiten Textfeld im Feld controller: den Wert _passwordController fest:

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

OnPressed bearbeiten

Fügen Sie einen Befehl hinzu, um die einzelnen Controller in der Funktion onPressed: der TextButton-Schaltfläche zu löschen:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

Projekt speichern. Wenn Sie jetzt etwas in die Textfelder eingeben und auf „Abbrechen“ klicken, werden alle Felder wieder gelöscht.

Bei diesem Anmeldeformular ist alles in Ordnung. Kommen wir nun zum Rest der Shrine App.

Pop

Um diese Ansicht zu schließen, soll diese Seite (die Flutter bezeichnet eine Route) aus dem Navigationsstapel einbehalten (oder entfernen).

Navigator verwaltet wie UINavigationController unter iOS einen Stapel von Routen. Durch Senden einer Route wird sie oben im Stapel platziert. Durch das Pop-up des Stapels wird die zuletzt hinzugefügte Route entfernt. Durch Aufrufen von initialRoute: '/login', in app.dart unserer App wird der Anmeldebildschirm dem Navigator hinzugefügt.

Unter Navigationsgrundlagen erfahren Sie mehr über Routen und Navigation.

Über die onPressed:-Funktion von ElevatedButton können Sie die neueste Route aus dem Navigator übernehmen:

        // TODO: Show the next page (101) 
        Navigator.pop(context);

Öffnen Sie schließlich home.dart und setzen Sie resizeToAvoidBottomInset im Scaffold auf false:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

Dadurch wird sichergestellt, dass die Darstellung der Tastatur nicht die Größe der Startseite oder ihrer Widgets ändert.

Fertig! Projekt speichern. Klicken Sie auf „Weiter“.

Geschafft!

Android	iOS

Dieser Bildschirm ist der Ausgangspunkt für unser nächstes Codelab, an dem Sie in MDC-102 arbeiten werden.

Über Schaltflächen:

• Neben TextButton und ElevatedButton gibt es auch OutlinedButton, FloatingActionButton IconButton und mehr.

6. Glückwunsch!

Wir haben Textfelder und Schaltflächen hinzugefügt und mussten kaum den Layoutcode berücksichtigen. Material Components for Flutter sind elegant gestaltet und können fast mühelos auf dem Bildschirm platziert werden.

Die fertige MDC-101-Anwendung ist im 102-starter_and_101-complete-Zweig verfügbar.

Sie können Ihre Version der Anwendung mit der Anwendung in diesem Zweig testen.

Weiteres Vorgehen

Textfelder und Schaltflächen sind zwei Kernkomponenten im Material System, es gibt aber noch viel mehr! Weitere Informationen finden Sie auch im Katalog der Materialkomponenten-Widgets.

Rufen Sie alternativ MDC-102: Material Design Structure and Layout auf, um mehr über die in MDC-102 für Flutter abgedeckten Komponenten zu erfahren.

Nächstes Codelab

Ich konnte dieses Codelab mit angemessenem Zeit- und Arbeitsaufwand abschließen

<ph type="x-smartling-placeholder"></ph> Stimme vollkommen zu Stimme zu Weder zufrieden noch unzufrieden Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material Components weiterhin verwenden.

<ph type="x-smartling-placeholder"></ph> Stimme vollkommen zu Stimme zu Weder zufrieden noch unzufrieden Stimme nicht zu Stimme überhaupt nicht zu