1. Введение
Что такое Material Design и библиотека Material Flutter?
Material Design — это система для создания смелых и красивых цифровых продуктов. Объединив стиль, брендинг, взаимодействие и движение в рамках единого набора принципов и компонентов, продуктовые команды могут реализовать свой величайший дизайнерский потенциал.
Библиотека Material Flutter включает виджеты Flutter, которые реализуют дизайн компонентов Material Design (сокращенно MDC ) для создания единообразного пользовательского опыта в приложениях и платформах. По мере развития системы Material Design эти компоненты обновляются, чтобы обеспечить единообразную реализацию с точностью до пикселя в соответствии со стандартами внешней разработки Google.
В этой кодовой лаборатории вы создадите страницу входа в систему, используя несколько компонентов Material Flutter.
Что ты построишь
Эта лаборатория кода — первая из четырех лабораторий кода, которые помогут вам создать приложение под названием Shrine — приложение для электронной коммерции, которое продает одежду и товары для дома. Он продемонстрирует, как вы можете настраивать компоненты, чтобы они отражали любой бренд или стиль, используя Material Flutter.
В этой лаборатории кода вы создадите страницу входа в Shrine, содержащую:
- Изображение логотипа Shrine
- Название приложения (Святыня)
- Два текстовых поля: одно для ввода имени пользователя, другое для пароля.
- Две кнопки
Андроид | iOS |
|
|
Компоненты и подсистемы Material Flutter в этой кодовой лаборатории
- Текстовое поле
- Кнопка
- Пульсация чернил (визуальная форма обратной связи для событий касания)
Как бы вы оценили свой уровень опыта разработки Flutter?
2. Настройте среду разработки Flutter.
Для выполнения этой лабораторной работы вам понадобятся два программного обеспечения — Flutter SDK и редактор .
Вы можете запустить кодовую лабораторию, используя любое из этих устройств:
- Физическое устройство Android или iOS , подключенное к вашему компьютеру и переведенное в режим разработчика.
- Симулятор iOS (требуется установка инструментов Xcode).
- Эмулятор Android (требуется установка в Android Studio).
- Браузер (для отладки необходим Chrome).
- В качестве настольного приложения для Windows , Linux или macOS . Вы должны разрабатывать на платформе, на которой планируете развернуть. Итак, если вы хотите разработать классическое приложение для Windows, вам необходимо разработать его в Windows, чтобы получить доступ к соответствующей цепочке сборки. Существуют требования, специфичные для операционной системы, которые подробно описаны на docs.flutter.dev/desktop .
3. Загрузите стартовое приложение Codelab.
Стартовый проект находится в каталоге material-components-flutter-codelabs-101-starter/mdc_100_series .
...или клонируйте его с GitHub
Чтобы клонировать эту кодовую лабораторию из GitHub, выполните следующие команды:
git clone https://github.com/material-components/material-components-flutter-codelabs.git cd material-components-flutter-codelabs/mdc_100_series git checkout 101-starter
Откройте проект и запустите приложение
- Откройте проект в любом редакторе.
- Следуйте инструкциям «Запустить приложение» в разделе «Начало работы: тест-драйв» для выбранного вами редактора.
Успех! На вашем устройстве должен быть запущен стартовый код для страницы входа в Shrine. Вы должны увидеть логотип Shrine и название «Shrine» чуть ниже него.
Андроид | iOS |
|
|
Давайте посмотрим на код.
Виджеты в login.dart
Откройте login.dart . Он должен содержать это:
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)
],
),
),
);
}
}
Обратите внимание, что он содержит оператор import и два новых класса:
- Оператор
importпозволяет использовать библиотеку материалов в этом файле. - Класс
LoginPageпредставляет всю страницу, отображаемую в симуляторе. - Функция
build()класса_LoginPageStateконтролирует создание всех виджетов в нашем пользовательском интерфейсе.
4. Добавьте виджеты TextField
Для начала мы добавим на нашу страницу входа в систему два текстовых поля, где пользователи вводят свое имя пользователя и пароль. Мы будем использовать виджет TextField, который отображает плавающую метку и активирует сенсорную пульсацию.
Эта страница структурирована в основном с помощью ListView , который упорядочивает свои дочерние элементы в прокручиваемом столбце. Разместим текстовые поля ниже.
Добавьте виджеты TextField
Добавьте два новых текстовых поля и разделитель после 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,
),
Каждое текстовое поле имеет поле decoration: которое принимает виджет InputDecoration . filled: поле означает, что фон текстового поля слегка заполнен, чтобы помочь людям распознать целевую область касания или касания текстового поля. Значение obscureText: true второго текстового поля автоматически заменяет вводимые пользователем данные маркерами, что подходит для паролей.
Сохраните проект (нажатием клавиши: команда + s), который выполнит горячую перезагрузку .
Теперь вы должны увидеть страницу с двумя текстовыми полями для имени пользователя и пароля! Посмотрите анимацию плавающей метки:
Андроид | iOS |
|
|
5. Добавьте кнопки
Далее мы добавим на нашу страницу входа две кнопки: «Отмена» и «Далее». Мы будем использовать два типа виджетов кнопок: TextButton и ElevatedButton .
Добавьте OverflowBar
После текстовых полей добавьте OverflowBar к дочерним элементам 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 располагает своих дочерних элементов в ряд.
Добавьте кнопки
Затем добавьте две кнопки в список children 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)
},
),
Сохраните проект. Под последним текстовым полем вы увидите две кнопки:
Андроид | iOS |
|
|
OverflowBar выполняет работу по макету за вас. Кнопки располагаются горизонтально, поэтому они располагаются рядом.
Прикосновение к кнопке запускает анимацию пульсации чернил, не вызывая никаких других действий. Добавим функциональность в анонимные функции onPressed: чтобы кнопка отмены очищала текстовые поля, а следующая кнопка закрывала экран:
Добавить TextEditingControllers
Чтобы можно было очищать значения текстовых полей, мы добавим TextEditingControllers для управления их текстом.
Прямо под объявлением класса _LoginPageState добавьте контроллеры в качестве final переменных.
// TODO: Add text editing controllers (101)
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
В поле controller: первого текстового поля установите _usernameController :
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
В поле controller: второго текстового поля теперь установите _passwordController :
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
Редактировать при нажатии
Добавьте команду для очистки каждого контроллера в функции onPressed: TextButton:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
Сохраните проект. Теперь, когда вы вводите что-то в текстовые поля, нажатие кнопки «Отмена» снова очищает каждое поле.
Эта форма входа в систему находится в хорошем состоянии! Давайте познакомим наших пользователей с остальной частью приложения Shrine.
Поп
Чтобы закрыть это представление, мы хотим вытащить (или удалить) эту страницу (которую Flutter называет маршрутом ) из стека навигации.
В функции onPressed: ElevatedButton выберите самый последний маршрут из навигатора:
// TODO: Show the next page (101)
Navigator.pop(context);
Наконец, откройте home.dart и установите resizeToAvoidBottomInset значение false в 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,
);
Это гарантирует, что внешний вид клавиатуры не изменит размер домашней страницы или ее виджетов.
Вот и все! Сохраните проект. Идем дальше и нажимаем «Далее».
Вы сделали это!
Андроид | iOS |
|
|
Этот экран является отправной точкой для нашей следующей лаборатории кода, над которой вы будете работать в MDC-102.
6. Поздравляем!
Мы добавили текстовые поля и кнопки, и нам почти не пришлось думать о коде макета. Материальные компоненты для Flutter очень стильные и их можно легко разместить на экране.
Следующие шаги
Текстовые поля и кнопки — это два основных компонента в системе материалов, но их гораздо больше! Остальное вы также можете изучить в каталоге виджетов Material Components .
Альтернативно, перейдите к MDC-102: Структура и макет проектирования материалов , чтобы узнать о компонентах, описанных в MDC-102 для Flutter.