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 ansprechender digitaler Produkte. Wenn Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten vereint werden, können Produktteams ihr größtes Designpotenzial entfalten.

Die Material-Flutter-Bibliothek enthält Flutter-Widgets, die die Designs von Material Design-Komponenten (MDC) implementieren, um eine einheitliche Nutzererfahrung über Apps und Plattformen hinweg zu schaffen. Da sich das Material Design-System weiterentwickelt, werden diese Komponenten aktualisiert, um eine konsistente, pixelgenaue Implementierung zu gewährleisten, die den Front-End-Entwicklungsstandards von Google entspricht.

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

Umfang

Dieses Codelab ist das erste von vier Codelabs, in denen Sie lernen, wie Sie die E-Commerce-App Shrine erstellen, in der Kleidung und Haushaltswaren verkauft werden. Darin wird gezeigt, wie Sie Komponenten mit Material Flutter an eine beliebige Marke oder einen beliebigen Stil anpassen können.

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

• Ein Bild des Shrine-Logos
• Der Name der App (Shrine)
• Zwei Textfelder, eines für die Eingabe eines Nutzernamens und das andere für ein Passwort
• Zwei Tasten

Android	iOS

Dies ist das erste von vier Codelabs, in denen Sie lernen, wie Sie eine App für ein Produkt namens Shrine erstellen. Wir empfehlen, alle Codelabs in der angegebenen Reihenfolge durchzuarbeiten, da die Aufgaben Schritt für Schritt erklärt werden.Die zugehörigen Codelabs finden Sie unter: MDC-102 Flutter: Material Structure and Layout MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type MDC-104 Flutter: Material Advanced Components

Material-Flutter-Komponenten und ‑Subsysteme in diesem Codelab

• Textfeld
• Schaltfläche
• Tintenwelle (visuelles Feedback für Berührungsereignisse)

In diesem Codelab verwenden Sie die Standardkomponenten von Material Flutter. Wie Sie sie anpassen, erfahren Sie in MDC-103: Material Design Theming with Color, Shape, Elevation and Type.

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

Anfänger Mittelstufe Fortgeschritten

2. Flutter-Entwicklungsumgebung einrichten

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

Sie können das Codelab auf einem der folgenden Geräte ausführen:

• Ein physisches Android- oder iOS-Gerät, das mit Ihrem Computer verbunden ist und auf den Entwicklermodus eingestellt ist.
• Der iOS-Simulator (erfordert die Installation von Xcode-Tools).
• Android Emulator (Einrichtung in Android Studio erforderlich)
• Ein Browser (für das Debugging ist Chrome erforderlich).
• Als Windows-, Linux- oder macOS-Desktopanwendung. Sie müssen auf der Plattform entwickeln, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie unter Windows entwickeln, um auf die entsprechende Build-Kette zuzugreifen. Es gibt betriebssystemspezifische Anforderungen, die auf docs.flutter.dev/desktop ausführlich beschrieben werden.

3. Starter-App für das Codelab herunterladen

Starter-Projekt herunterladen

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

…oder aus 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: Repository von GitHub klonen

Der richtige Branch

Die Codelabs MDC-101 bis 104 bauen aufeinander auf. Wenn Sie den Code für 101 fertiggestellt haben, wird er zum Startcode für 102. Der Code ist auf verschiedene Branches aufgeteilt. Sie können sie alle mit diesem Befehl auflisten:

git branch --list

Den vollständigen Code finden Sie im Branch 102-starter_and_101-complete.

Projekt öffnen und App ausführen

1. Öffnen Sie das Projekt in einem beliebigen Editor.
2. Folgen Sie der Anleitung unter Erste Schritte: Testlauf für den von Ihnen ausgewählten Editor.

Fertig! Der Startcode für die Anmeldeseite von Shrine sollte auf Ihrem Gerät ausgeführt werden. Das Shrine-Logo und der Name „Shrine“ sollten direkt darunter angezeigt werden.

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 der Sie die Änderung implementieren.

Widgets in login.dart

Öffne login.dart. 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)
          ],
        ),
      ),
    );
  }
}

Sie enthält eine import-Anweisung und zwei neue Klassen:

• Mit der Anweisung import kann die Material-Bibliothek in dieser Datei verwendet werden.
• Die Klasse LoginPage stellt die gesamte im Simulator angezeigte Seite dar.
• Die Funktion build() der Klasse _LoginPageState steuert, wie alle Widgets in unserer Benutzeroberfläche erstellt werden.

Weitere Grundlagen zur Flutter-Benutzeroberfläche und zu Widgets finden Sie in der Einführung in das Flutter-Widget-Framework oder im Codelab Ihre erste Flutter-App schreiben, Teil 1.

4. TextField-Widgets hinzufügen

Zuerst fügen wir unserer Anmeldeseite zwei Textfelder hinzu, in die Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden das TextField-Widget, das ein schwebendes Label anzeigt und einen Touch-Ripple-Effekt aktiviert.

Die Textfelder von Material wurden erheblich verbessert, um die Markenflexibilität zu erhöhen. Die Verbesserungen basieren auf umfangreichen UX-Studien, die eine bessere Nutzerfreundlichkeit und ein besseres visuelles Design zum Ziel haben.

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

Diese Seite ist hauptsächlich mit einer ListView strukturiert, in der die untergeordneten Elemente in einer scrollbaren Spalte angeordnet werden. Wir platzieren die Textfelder unten.

TextField-Widgets hinzufügen

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

// 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 ein decoration:-Feld, das ein InputDecoration-Widget akzeptiert. Das Feld filled: bedeutet, dass der Hintergrund des Textfelds leicht ausgefüllt ist, damit Nutzer den Tipp- oder Berührungsbereich des Textfelds erkennen können. Der obscureText: true-Wert des zweiten Textfelds ersetzt die Eingabe des Nutzers automatisch durch Aufzählungszeichen, was für Passwörter geeignet ist.

Speichern Sie Ihr Projekt (mit der Tastenkombination: Befehl + s). Dadurch wird ein Hot Reload ausgeführt.

Sie sollten jetzt eine Seite mit zwei Textfeldern für Nutzername und Passwort sehen. So sieht die Animation für unverankerte Labels aus:

Android	iOS

Zu den Funktionen von Textfeldern gehören:

• Das Aussehen des TextField-Widgets lässt sich ganz einfach ändern. Geben Sie für das Dekorationsfeld einen InputDecoration-Wert an.
• Im Textfeld wird standardmäßig ein visueller Touch-Effekt (als „Wellen“ oder „Tinte“ bezeichnet) angezeigt.
• FormField ist ein ähnliches Widget mit speziellen Funktionen zum Einbetten von Feldern in Formulare.
• Dokumentation zur TextField-Klasse

5. Schaltflächen hinzufügen

Als Nächstes fügen wir unserer Anmeldeseite zwei Schaltflächen 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 einzige gut sichtbare Schaltfläche enthalten. So wird deutlich, dass andere Schaltflächen weniger wichtig sind. Diese gut sichtbare Schaltfläche steht für die Aktion, die Nutzer am ehesten ausführen sollen, um in unserer App voranzukommen.

Am wenigsten möchten wir, dass sie die Anmeldung abbrechen. Da eine erhöhte Schaltfläche durch ihr erhabenes Erscheinungsbild die Aufmerksamkeit auf sich zieht, sollte sie für die wichtigere Aktion verwendet werden. Im Vergleich dazu wirkt die Schaltfläche mit Klartext links davon weniger hervorgehoben.

Weitere Informationen zur Schaltflächenhierarchie finden Sie in den Material Guidelines im Artikel Schaltflächen.

OverflowBar hinzufügen

Fügen Sie nach den Textfeldern OverflowBar zu den untergeordneten Elementen von 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 Reihe an.

Schaltflächen hinzufügen

Fügen Sie dann der Liste der children 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 haben wir leere Blöcke für die onPressed:-Felder?

Wenn wir „null“ übergeben, werden die Schaltflächen deaktiviert. Es gäbe kein Feedback zu Berührungen und wir könnten uns kein gutes Bild von ihrem aktivierten Verhalten machen. Wenn Sie leere Blöcke verwenden, werden sie nicht deaktiviert.

Weitere Informationen zu Schaltflächen und ihren Interaktionen finden Sie unter Interaktivität in Ihre App einbauen.

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

Android	iOS

Das OverflowBar übernimmt die Layoutarbeit für Sie. Die Schaltflächen werden horizontal positioniert, sodass sie nebeneinander angezeigt werden.

Wenn Sie eine Schaltfläche berühren, wird eine Farbreaktion ausgelöst, ohne dass etwas anderes passiert. Wir fügen den anonymen onPressed:-Funktionen Funktionen hinzu, sodass mit der Schaltfläche „Abbrechen“ die Textfelder gelöscht werden und mit der Schaltfläche „Weiter“ der Bildschirm geschlossen wird:

TextEditingController hinzufügen

Damit die Werte der Textfelder gelöscht werden können, fügen wir TextEditingControllers hinzu, um den Text zu steuern.

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

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

Legen Sie im Feld controller: des ersten Textfelds _usernameController fest:

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

Legen Sie nun im Feld controller: des zweiten Textfelds _passwordController fest:

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

onPressed bearbeiten

Fügen Sie einen Befehl hinzu, um jeden Controller in der Funktion onPressed: von TextButton 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 die Felder wieder geleert.

Dieses Anmeldeformular ist in Ordnung. Wir leiten unsere Nutzer zur restlichen Shrine App weiter.

Pop

Um diese Ansicht zu schließen, müssen wir diese Seite (die in Flutter als Route bezeichnet wird) aus dem Navigationsstapel entfernen.

Navigator verwaltet einen Stapel von Routen, genau wie UINavigationController unter iOS. Wenn Sie eine Route pushen, wird sie oben im Stapel platziert. Durch Popping des Stacks wird die zuletzt hinzugefügte Route entfernt. In app.dart unserer App wird durch Aufrufen von initialRoute: '/login', der Anmeldebildschirm zum Navigator hinzugefügt.

Weitere Informationen zu Routen und Navigation finden Sie unter Navigation – Grundlagen.

Rufen Sie in der onPressed:-Funktion von ElevatedButton die letzte Route aus dem Navigator ab:

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

Öffnen Sie schließlich home.dart und legen Sie für resizeToAvoidBottomInset den Wert false in Scaffold fest:

    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,
    );

So wird sichergestellt, dass sich das Erscheinungsbild der Tastatur nicht auf die Größe der Startseite oder ihrer Widgets auswirkt.

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

Geschafft!

Android	iOS

Dieser Bildschirm ist der Ausgangspunkt für unser nächstes Codelab, das Sie in MDC-102 bearbeiten.

Schaltflächen:

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

6. Glückwunsch!

Wir haben Textfelder und Schaltflächen hinzugefügt und mussten uns kaum um Layoutcode kümmern. Material-Komponenten für Flutter bieten viel Stil und lassen sich fast mühelos auf dem Bildschirm platzieren.

Die fertige MDC-101-App ist im 102-starter_and_101-complete-Branch verfügbar.

Sie können Ihre Version der App mit der App in diesem Branch vergleichen.

Weiteres Vorgehen

Textfelder und Schaltflächen sind zwei Kernkomponenten des Material-Systems, aber es gibt noch viele weitere. Die restlichen finden Sie im Katalog der Material-Komponenten-Widgets.

Alternativ können Sie sich MDC-102: Material Design Structure and Layout ansehen, um mehr über die in MDC-102 für Flutter behandelten Komponenten zu erfahren.

Nächstes Codelab

Ich konnte dieses Codelab in angemessener Zeit und mit angemessenem Aufwand durcharbeiten.

Stimme vollkommen zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material Components auch in Zukunft verwenden.

Stimme voll und ganz zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu