1. Wprowadzenie
Czym są Material Design i biblioteka Material Flutter?
Material Design to system tworzenia atrakcyjnych i funkcjonalnych produktów cyfrowych. Łącząc styl, branding, interakcje i ruch w spójny zestaw zasad i komponentów, zespoły produktowe mogą w pełni wykorzystać swój potencjał projektowy.
Biblioteka Material Flutter zawiera widżety Fluttera, które implementują projekty komponentów Material Design (w skrócie MDC), aby zapewnić spójny interfejs użytkownika w aplikacjach i na platformach. Wraz z rozwojem systemu Material Design te komponenty są aktualizowane, aby zapewnić spójną implementację z dokładnością do piksela, zgodnie ze standardami Google dotyczącymi tworzenia interfejsu.
W tym ćwiczeniu utworzysz stronę logowania za pomocą kilku komponentów Material Flutter.
Co utworzysz
Te warsztaty to pierwsze z 4 szkoleń, które pomogą Ci w utworzeniu aplikacji Shrine – aplikacji e-commerce do sprzedaży odzieży i artykułów gospodarstwa domowego. Pokazujemy, jak dostosować komponenty, aby odzwierciedlały dowolną markę lub styl za pomocą Material Flutter.
W tym ćwiczeniu utworzysz stronę logowania do aplikacji Shrine, która będzie zawierać:
- Obraz logo Shrine
- Nazwa aplikacji (Shrine)
- Dwa pola tekstowe: jedno do wpisania nazwy użytkownika, a drugie do wpisania hasła.
- 2 przyciski
Android | iOS |
|
|
Komponenty i podsystemy Material Flutter w tym laboratorium
- Pole tekstowe
- Przycisk
- Efekt fali atramentu (wizualna forma potwierdzenia zdarzeń dotknięcia)
Jak oceniasz swój poziom doświadczenia w programowaniu w Flutterze?
2. Konfigurowanie środowiska programistycznego Fluttera
Aby ukończyć ten moduł, potrzebujesz 2 programów: pakietu SDK Flutter i edytora.
Codelab możesz uruchomić na dowolnym z tych urządzeń:
- fizyczne urządzenie z Android lub iOS podłączone do komputera i ustawione w trybie deweloperskim;
- Symulator iOS (wymaga zainstalowania narzędzi Xcode).
- Android Emulator (wymaga konfiguracji w Android Studio).
- przeglądarka (do debugowania wymagana jest Chrome);
- Jako aplikacja komputerowa na Windows, Linux lub macOS. Musisz tworzyć aplikację na platformie, na której zamierzasz ją wdrożyć. Jeśli chcesz opracować aplikację na komputery z systemem Windows, musisz to zrobić na komputerze z tym systemem, aby mieć dostęp do odpowiedniego łańcucha kompilacji. Istnieją wymagania dotyczące poszczególnych systemów operacyjnych, które są szczegółowo opisane na stronie docs.flutter.dev/desktop.
3. Pobierz aplikację startową do ćwiczeń z programowania
Projekt początkowy znajduje się w katalogu material-components-flutter-codelabs-101-starter/mdc_100_series.
...lub sklonuj go z GitHub
Aby skopiować ten codelab 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
Otwórz projekt i uruchom aplikację
- Otwórz projekt w wybranym edytorze.
- Postępuj zgodnie z instrukcjami w sekcji „Uruchamianie aplikacji” w artykule Wprowadzenie: testowanie dotyczącym wybranego edytora.
Gotowe! Kod startowy strony logowania Shrine powinien być uruchomiony na Twoim urządzeniu. Powinno się wyświetlić logo Shrine i nazwa „Shrine” tuż pod nim.
Android | iOS |
|
|
Przyjrzyjmy się kodowi.
Widżety w login.dart
Otwórz login.dart. Powinien zawierać te informacje:
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 korzystanie z biblioteki Material w tym pliku. - Klasa
LoginPagereprezentuje całą stronę wyświetlaną w symulatorze. - Funkcja
_LoginPageStateklasybuild()określa sposób tworzenia wszystkich widżetów w naszym interfejsie.
4. Dodawanie widżetów TextField
Na początek dodamy do strony logowania 2 pola tekstowe, w których użytkownicy będą wpisywać nazwę użytkownika i hasło. Użyjemy widżetu TextField, który wyświetla pływającą etykietę i aktywuje efekt fali po dotknięciu.
Ta strona jest zbudowana głównie z użyciem widżetu ListView, który rozmieszcza elementy podrzędne w kolumnie z możliwością przewijania. Umieśćmy pola tekstowe poniżej.
Dodaj widżety TextField
Po polu const SizedBox(height: 120.0) dodaj 2 nowe pola tekstowe i spację.
// 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 pole tekstowe ma pole decoration:, które przyjmuje widżet InputDecoration. Pole filled: oznacza, że tło pola tekstowego jest lekko wypełnione, aby ułatwić użytkownikom rozpoznanie docelowego elementu dotykowego pola tekstowego. Wartość obscureText: true w drugim polu tekstowym automatycznie zastępuje wpisywane przez użytkownika znaki kropkami, co jest odpowiednie w przypadku haseł.
Zapisz projekt (za pomocą skrótu klawiszowego: command + s), co spowoduje szybkie ponowne wczytanie.
Powinna się teraz wyświetlić strona z 2 polami tekstowymi: Nazwa użytkownika i Hasło. Sprawdź animację etykiety pływającej:
Android | iOS |
|
|
5. Dodawanie przycisków
Następnie dodamy do strony logowania 2 przyciski: „Anuluj” i „Dalej”. Użyjemy 2 rodzajów widżetów przycisków: TextButton i ElevatedButton.
Dodawanie paska OverflowBar
Po polach tekstowych dodaj OverflowBar do elementów podrzędnych 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)
],
),
Komponent OverflowBar rozmieszcza elementy podrzędne w rzędzie.
Dodawanie przycisków
Następnie dodaj 2 przyciski do listy children urządzenia 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. Ustawia przyciski w poziomie, dzięki czemu są wyświetlane obok siebie.
Dotknięcie przycisku powoduje animację rozchodzenia się atramentu, ale nie wywołuje żadnych innych działań. Dodajmy do funkcji anonimowych onPressed: funkcje, dzięki którym przycisk anulowania będzie czyścić pola tekstowe, a przycisk Dalej będzie zamykać ekran:
Dodawanie elementów TextEditingController
Aby umożliwić wyczyszczenie wartości pól tekstowych, dodamy TextEditingControllers do kontrolowania ich tekstu.
Bezpośrednio pod deklaracją klasy _LoginPageState dodaj kontrolery jako zmienne final.
// TODO: Add text editing controllers (101)
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
W polu controller: pierwszego pola tekstowego ustaw _usernameController:
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
W polu controller: drugiego pola tekstowego ustaw teraz _passwordController:
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
Edytuj onPressed
Dodaj polecenie, aby wyczyścić każdy kontroler w funkcji onPressed: elementu TextButton:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
Zapisz projekt. Teraz, gdy wpiszesz coś w polach tekstowych, naciśnięcie przycisku anulowania ponownie wyczyści każde pole.
Ten formularz logowania jest w dobrym stanie. Przekierujmy użytkowników do pozostałych części aplikacji Shrine.
Wyostrzenie
Aby zamknąć ten widok, musimy usunąć (lub zamknąć) tę stronę (którą Flutter nazywa trasą) ze stosu nawigacji.
W funkcji onPressed: ElevatedButton usuń z Navigatora ostatnią trasę:
// TODO: Show the next page (101)
Navigator.pop(context);
Na koniec otwórz home.dart i ustaw resizeToAvoidBottomInset na false w 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 zmieni rozmiaru strony głównej ani jej widżetów.
To wszystko. Zapisz projekt. Kliknij „Dalej”.
Udało się!
Android | iOS |
|
|
Ten ekran jest punktem początkowym do kolejnych zajęć z programowania, które odbędą się w ramach kursu MDC-102.
6. Gratulacje!
Dodaliśmy pola tekstowe i przyciski, a kod układu nie wymagał od nas większej uwagi. Komponenty Material Design dla Fluttera mają wiele stylów i można je umieszczać na ekranie niemal bez wysiłku.
Dalsze kroki
Pola tekstowe i przyciski to 2 główne komponenty systemu Material, ale jest ich znacznie więcej. Pozostałe znajdziesz w katalogu widżetów Material Components.
Możesz też zapoznać się z artykułem MDC-102: Struktura i układ Material Design, aby dowiedzieć się więcej o komponentach omówionych w MDC-102 dla Fluttera.