1. Einführung
Was sind Material Design und die Material Flutter-Bibliothek?
Material Design ist ein System zum Erstellen ansprechender und attraktiver digitaler Produkte. Durch die Kombination von Stil, Branding, Interaktion und Bewegung mit einheitlichen Prinzipien und Komponenten können Produktteams ihr größtes Designpotenzial entfalten.
Die Material Flutter-Bibliothek enthält Flutter-Widgets, die die Designs von Material Design-Komponenten (MDC, kurz für Material Design Components) implementieren, um eine einheitliche Nutzererfahrung in allen Apps und auf allen Plattformen 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.
Was Sie erstellen
Dieses Codelab ist das erste von vier Codelabs, in denen Sie eine App namens Shrine erstellen. Dabei handelt es sich um eine E-Commerce-App, in der Kleidung und Haushaltswaren verkauft werden. Sie erfahren, wie Sie Komponenten mit Material Flutter an jede Marke oder jeden Stil anpassen können.
In diesem Codelab erstellen Sie eine Anmeldeseite für Shrine, die Folgendes enthält:
- Ein Bild des Shrine-Logos
- Den Namen der App (Shrine)
- Zwei Textfelder, eines für die Eingabe eines Nutzernamens und das andere für ein Passwort
- Zwei Schaltflächen
Android | iOS |
|
|
Material Flutter-Komponenten und -Subsysteme in diesem Codelab
- Textfeld
- Schaltfläche
- Ink-Ripple-Effekt (visuelles Feedback für Touch-Ereignisse)
Wie würden Sie Ihre Erfahrung mit der Flutter-Entwicklung bewerten?
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 für den Entwicklermodus eingerichtet wurde.
- Der iOS-Simulator (erfordert die Installation von Xcode-Tools).
- Der Android-Emulator (erfordert die Einrichtung in Android Studio).
- Ein Browser (Chrome ist für das Debugging erforderlich).
- Als Windows-, Linux- oder macOS-Desktopanwendung. Sie müssen auf der Plattform entwickeln, auf der Sie die Anwendung bereitstellen möchten. Wenn Sie also eine Windows-Desktopanwendung entwickeln möchten, müssen Sie unter Windows entwickeln, um auf die entsprechende Build-Kette zuzugreifen. Es gibt betriebssystemspezifische Anforderungen, die unter docs.flutter.dev/desktop ausführlich beschrieben werden.
3. Starter-App für das Codelab 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 aus 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
Projekt öffnen und App ausführen
- Öffnen Sie das Projekt in Ihrem bevorzugten Editor.
- Folgen Sie der Anleitung unter „App ausführen“ in Erste Schritte: Testlauf für Ihren ausgewählten Editor.
Fertig! Der Startercode für die Anmeldeseite von Shrine sollte auf Ihrem Gerät ausgeführt werden. Sie sollten das Shrine-Logo und direkt darunter den Namen „Shrine“ sehen.
Android | iOS |
|
|
Sehen wir uns den Code an.
Widgets in login.dart
Öffnen Sie 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
import-Anweisung kann die Material-Bibliothek in dieser Datei verwendet werden. - Die Klasse
LoginPagestellt die gesamte Seite dar, die im Simulator angezeigt wird. - Die
build()-Funktion der Klasse_LoginPageStatesteuert, wie alle Widgets in der UI erstellt werden.
4. TextField-Widgets hinzufügen
Zuerst fügen wir unserer Anmeldeseite zwei Textfelder hinzu, in denen Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden das TextField-Widget, das ein unverankertes Label anzeigt und einen Touch-Ripple-Effekt aktiviert.
Diese Seite ist hauptsächlich mit einer ListView strukturiert, die ihre untergeordneten Elemente in einer scrollbaren Spalte anordnet. Wir platzieren die Textfelder darunter.
TextField-Widgets hinzufügen
Fügen Sie nach const SizedBox(height: 120.0) zwei neue Textfelder und einen Abstandshalter 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 ein Feld decoration:, das ein InputDecoration -Widget verwendet. Das Feld filled: bedeutet, dass der Hintergrund des Textfelds leicht gefüllt ist, damit Nutzer den Tipp- oder Touch-Zielbereich des Textfelds besser erkennen. Der Wert obscureText: true 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 eine Hot-Reload-Funktion ausgeführt.
Sie sollten jetzt eine Seite mit zwei Textfeldern für „Nutzername“ und „Passwort“ sehen. Sehen Sie sich die Animation des unverankerten Labels an:
Android | iOS |
|
|
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.
OverflowBar hinzufügen
Fügen Sie nach den Textfeldern die 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 Reihe an.
Schaltflächen hinzufügen
Fügen Sie dann der Liste der children der 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)
},
),
Speichern Sie Ihr Projekt. Unter dem letzten Textfeld sollten zwei Schaltflächen angezeigt werden:
Android | iOS |
|
|
Die OverflowBar übernimmt die Layoutarbeit für Sie. Sie positioniert die Schaltflächen horizontal, sodass sie nebeneinander angezeigt werden.
Wenn Sie auf eine Schaltfläche tippen, wird eine Ink-Ripple-Animation ausgelöst, ohne dass etwas anderes passiert. Fügen wir den anonymen onPressed:-Funktionen Funktionalität hinzu, damit die Schaltfläche „Abbrechen“ die Textfelder löscht und die Schaltfläche „Weiter“ den Bildschirm schließt:
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 Klasse _LoginPageState als final-Variablen hinzu.
// TODO: Add text editing controllers (101)
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
Legen Sie für das Feld controller: des ersten Textfelds _usernameController fest:
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
Legen Sie für das Feld controller: des zweiten Textfelds jetzt _passwordController fest:
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
„onPressed“ bearbeiten
Fügen Sie der Funktion onPressed: des TextButton einen Befehl hinzu, um jeden Controller zu löschen:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
Speichern Sie Ihr Projekt. Wenn Sie jetzt etwas in die Textfelder eingeben, werden alle Felder durch Tippen auf „Abbrechen“ wieder gelöscht.
Dieses Anmeldeformular ist in guter Form. Wir leiten unsere Nutzer zum Rest der Shrine-App weiter.
Pop
Um diese Ansicht zu schließen, möchten wir diese Seite (die in Flutter als Route bezeichnet wird) aus dem Navigationsstack entfernen.
Entfernen Sie in der Funktion onPressed: des ElevatedButton die letzte Route aus dem Navigator:
// 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,
);
So wird sichergestellt, dass sich das Aussehen der Tastatur nicht auf die Größe der Startseite oder ihrer Widgets auswirkt.
Geschafft! Speichern Sie Ihr Projekt. Klicken Sie auf „Weiter“.
Geschafft!
Android | iOS |
|
|
Dieser Bildschirm ist der Ausgangspunkt für unser nächstes Codelab, das Sie in MDC-102 bearbeiten.
6. Glückwunsch!
Wir haben Textfelder und Schaltflächen hinzugefügt und mussten uns kaum mit Layoutcode beschäftigen. Material Components für Flutter bieten viel Stil und lassen sich fast mühelos auf dem Bildschirm platzieren.
Weiteres Vorgehen
Textfelder und Schaltflächen sind zwei Kernkomponenten des Material-Systems, aber es gibt noch viele mehr. Sie können auch den Rest im Widget-Katalog der Material Components erkunden.
Alternativ können Sie unter MDC-102: Struktur und Layout in Material mehr über die Komponenten erfahren, die in MDC-102 für Flutter behandelt werden.