1. Wprowadzenie
Czym są Material Design i biblioteka Material Flutter?
Material Design to system do tworzenia odważnych i atrakcyjnych produktów cyfrowych. Łącząc styl, budowanie marki, interakcję i ruch w ramach spójnego zestawu zasad i komponentów, zespoły zajmujące się poszczególnymi produktami i usługami mogą w pełni wykorzystać swój potencjał projektowy.
Biblioteka Material Flutter zawiera widżety Flutter, które wykorzystują projekty komponentów Material Design (w skrócie MDC), aby zapewnić użytkownikom spójne wrażenia w różnych aplikacjach i na różnych platformach. W miarę rozwoju systemu Material Design komponenty te są aktualizowane, aby zapewnić spójną, idealną implementację pikselową oraz zgodność ze standardami Google dotyczącymi projektowania interfejsów.
W ramach tego ćwiczenia w programie utworzysz stronę logowania, korzystając z kilku komponentów Material Flutter.
Co utworzysz
To pierwsze z czterech ćwiczeń z programowania, które poprowadzą Cię przez proces tworzenia aplikacji o nazwie Shrine – aplikacji e-commerce do sprzedaży odzieży i artykułów gospodarstwa domowego. Pokażemy też, jak za pomocą Material Flutter dostosować komponenty, aby pasowały do dowolnej marki lub stylu.
W ramach tego ćwiczenia w Codelabs utworzysz stronę logowania do Shrine, która zawiera:
- Obraz logo Shrine
- Nazwa aplikacji (świątynia)
- Dwa pola tekstowe, jedno na wpisanie nazwy użytkownika, a drugie na hasło.
- Dwa przyciski
Android | iOS |
|
|
Komponenty i podsystemy Material Flutter dostępne w tym ćwiczeniu z programowania
- Pole tekstowe
- Przycisk
- Marszczenie atramentu (wizualna forma informacji zwrotnych po zdarzeniach dotknięcia)
Jak oceniasz swój poziom doświadczenia w programowaniu w usłudze Flutter?
2. Konfigurowanie środowiska programistycznego Flutter
Aby ukończyć ten moduł, potrzebujesz 2 oprogramowania: pakietu SDK Flutter i edytora.
Ćwiczenie z programowania możesz uruchomić na dowolnym z tych urządzeń:
- Fizyczne urządzenie z Androidem lub iOS podłączone do komputera i ustawione w trybie programisty.
- Symulator iOS (wymaga zainstalowania narzędzi Xcode).
- Emulator Androida (wymaga skonfigurowania Android Studio).
- Przeglądarka (do debugowania wymagany jest Chrome).
- Aplikacja komputerowa w systemie Windows, Linux lub macOS Programowanie należy tworzyć na platformie, na której zamierzasz wdrożyć usługę. Jeśli więc chcesz opracować aplikację komputerową dla systemu Windows, musisz to zrobić w tym systemie, aby uzyskać dostęp do odpowiedniego łańcucha kompilacji. Istnieją wymagania związane z konkretnymi systemami operacyjnymi, które zostały szczegółowo omówione na stronie docs.flutter.dev/desktop.
3. Pobierz aplikację startową w Codelabs
Projekt startowy znajduje się w katalogu material-components-flutter-codelabs-101-starter/mdc_100_series.
...lub skopiuj je z GitHuba
Aby skopiować to ćwiczenia z programowania z GitHuba, uruchom te polecenia:
git clone https://github.com/material-components/material-components-flutter-codelabs.git cd material-components-flutter-codelabs/mdc_100_series git checkout 101-starter
Otwieranie projektu i uruchamianie aplikacji
- Otwórz projekt w wybranym edytorze.
- Postępuj zgodnie z instrukcjami „Uruchom aplikację” w artykule Rozpocznij: jazdę próbną dla wybranego edytora.
Gotowe! Kod startowy strony logowania Shrine powinien być uruchomiony na Twoim urządzeniu. Powinny pojawić się logo i nazwa „Shrine”. poniżej.
Android | iOS |
|
|
Spójrzmy na kod.
Widżety w: login.dart
Otwórz aplikację login.dart. Powinien zawierać ten tekst:
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)
],
),
),
);
}
}
Zwróć uwagę, że zawiera on instrukcję import i 2 nowe klasy:
- Instrukcja
importumożliwia używanie w tym pliku biblioteki Material. - Klasa
LoginPagereprezentuje całą stronę wyświetlaną w symulatorze. - Funkcja
build()klasy_LoginPageStateokreśla sposób tworzenia wszystkich widżetów w interfejsie użytkownika.
4. Dodawanie widżetów pól tekstowych
Na początek dodamy do naszej strony logowania dwa pola tekstowe, w których użytkownicy wpiszą swoją nazwę użytkownika i hasło. Wykorzystamy widżet TextField, który wyświetla pływającą etykietę i aktywuje falowanie dotyku.
Struktura tej strony opiera się głównie na elemencie ListView, który znajduje się w kolumnie, którą można przewijać. Umieśćmy poniżej pola tekstowe.
Dodawanie widżetów pól tekstowych
Dodaj dwa nowe pola tekstowe i spację po const SizedBox(height: 120.0).
// 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,
),
Każde z pól tekstowych ma pole decoration:, które przyjmuje widżet InputDecoration. Pole filled: oznacza, że tło tego pola jest delikatnie wypełnione, by ułatwić użytkownikom rozpoznanie obszaru docelowego dotyku. Wartość obscureText: true w drugim polu tekstowym automatycznie zastępuje dane wpisane przez użytkownika listą punktowaną, która jest odpowiednia dla haseł.
Zapisz projekt (naciskając klawisze Command + S), co spowoduje uruchomienie ponownego wczytywania.
Powinna wyświetlić się strona z 2 polami tekstowymi: Nazwa użytkownika i Hasło. Zobacz animację pływającej etykiety:
Android | iOS |
|
|
5. Dodaj przyciski
Następnie dodamy do naszej strony logowania dwa przyciski: „Anuluj” i „Dalej”. Wykorzystamy 2 rodzaje widżetów przycisków: TextButton i ElevatedButton.
Dodawanie paska OverflowBar
Po polach tekstowych dodaj OverflowBar do elementów podrzędnych elementu ListView:
// TODO: Add button bar (101)
OverflowBar(
alignment: MainAxisAlignment.end,
// TODO: Add a beveled rectangular border to CANCEL (103)
children: <Widget>[
// TODO: Add buttons (101)
],
),
OverflowBar – elementy podrzędne rozmieszczone w rzędzie.
Dodawanie przycisków
Następnie dodaj 2 przyciski do listy children aplikacji OverflowBar:
// 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)
},
),
Zapisz projekt. Pod ostatnim polem tekstowym powinny pojawić się 2 przyciski:
Android | iOS |
|
|
OverflowBar zajmuje się układem za Ciebie. Przyciski są umieszczone w poziomie, dzięki czemu są wyświetlane obok siebie.
Kliknięcie przycisku inicjuje animację fali atramentu, nie powodując żadnych innych efektów. Dodajmy taką funkcję do anonimowych funkcji onPressed:, tak aby przycisk anulowania wyczyścił pola tekstowe, a następnie przycisk Dalej zamknął ekran:
Dodawanie kontrolera TextEditingControllers
Aby można było wyczyścić pola tekstowe, Dodamy obiekty TextEditingControllers, by kontrolować ich tekst.
Pod deklaracją klasy _LoginPageState dodaj kontrolery jako zmienne final.
// TODO: Add text editing controllers (101)
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
W polu controller: w pierwszym polu tekstowym ustaw _usernameController:
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
W polu controller: w drugim polu tekstowym ustaw teraz _passwordController:
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
Edytuj onPressed
Dodaj polecenie, aby wyczyścić wszystkie kontrolery w funkcji onPressed: TextButton:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
Zapisz projekt. Gdy wpiszesz coś w polach tekstowych, naciśnięcie Anuluj spowoduje wyczyszczenie każdego z nich.
Ten formularz logowania jest w dobrym stanie. Przenieśmy użytkowników do pozostałej części aplikacji Shrine.
Wyostrzenie
Aby zamknąć ten widok, chcemy wypełnić (lub usunąć) tę stronę (która nazywa trasę) ze stosu nawigacji.
W funkcji onPressed: ElevatedButton uzupełnij najnowszą trasę z nawigatora:
// TODO: Show the next page (101)
Navigator.pop(context);
Na koniec otwórz aplikację home.dart i ustaw resizeToAvoidBottomInset na false w pliku Scaffold:
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,
);
Dzięki temu wygląd klawiatury nie wpływa na rozmiar strony głównej ani jej widżetów.
Znakomicie. Zapisz projekt. Kliknij „Dalej”.
Udało się!
Android | iOS |
|
|
Ten ekran stanowi punkt wyjścia do kolejnego ćwiczenia w programowaniu, nad którym będziesz pracować w ramach MDC-102.
6. Gratulacje!
Dodaliśmy pola tekstowe i przyciski, dzięki czemu prawie nie trzeba było uwzględniać kodu układu. Komponenty Material Design do Flutter mają wiele stylów i można je prawie bez problemu umieszczać na ekranie.
Dalsze kroki
Pola tekstowe i przyciski to 2 główne elementy systemu Material System, ale jest ich znacznie więcej. Możesz też przejrzeć pozostałe w katalogu widżetów Material Komponenty.
Możesz też zapoznać się z artykułem MDC-102: Material Design Struktura i układ, aby dowiedzieć się więcej o komponentach omówionych w formacie MDC-102 w przypadku technologii Flutter.