1. Введение
Что такое Material Design и библиотека Material Flutter?
Material Design — это система для создания смелых и красивых цифровых продуктов. Объединяя стиль, брендинг, взаимодействие и анимацию в рамках единого набора принципов и компонентов, продуктовые команды могут реализовать свой максимальный дизайнерский потенциал.
Библиотека Material Flutter включает в себя виджеты Flutter, которые реализуют дизайн компонентов Material Design (сокращенно MDC ) для создания единообразного пользовательского интерфейса в разных приложениях и на разных платформах. По мере развития системы Material Design эти компоненты обновляются, чтобы обеспечить единообразную, идеально точную реализацию в соответствии со стандартами разработки фронтенда Google.
В этом практическом занятии вы создадите страницу авторизации, используя несколько компонентов Material Flutter.
Что вы построите
Этот практический урок — первый из четырех, которые помогут вам создать приложение Shrine , интернет-магазин одежды и товаров для дома. В нем будет показано, как можно настраивать компоненты, чтобы они отражали любой бренд или стиль, используя Material Flutter.
В этом практическом задании вы создадите страницу входа в систему Shrine, которая будет содержать:
- Изображение логотипа храма
- Название приложения (Shrine)
- Два текстовых поля: одно для ввода имени пользователя, другое для пароля.
- Две кнопки
Android | 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" чуть ниже него.
Android | 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позволяет использовать библиотеку Material в этом файле. - Класс
LoginPageпредставляет собой всю страницу, отображаемую в симуляторе. - Функция
build()класса_LoginPageStateуправляет процессом создания всех виджетов в нашем пользовательском интерфейсе.
4. Добавьте виджеты текстового поля.
Для начала добавим на страницу входа два текстовых поля, куда пользователи будут вводить своё имя пользователя и пароль. Мы будем использовать виджет TextField, который отображает плавающую метку и активирует сенсорную рябь.
Эта страница построена преимущественно на основе ListView , который располагает свои дочерние элементы в прокручиваемой колонке. Давайте разместим текстовые поля ниже.
Добавьте виджеты текстового поля.
Добавьте два новых текстовых поля и разделитель после 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 автоматически заменяет вводимый пользователем текст маркерами списка, что подходит для паролей.
Сохраните свой проект (с помощью сочетания клавиш: command + s), что выполнит « горячую перезагрузку» .
Теперь вы должны увидеть страницу с двумя текстовыми полями: «Имя пользователя» и «Пароль»! Обратите внимание на анимацию плавающей метки:
Android | 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)
},
),
Сохраните проект. Под последним текстовым полем должны появиться две кнопки:
Android | iOS |
|
|
Компонент OverflowBar автоматически выполняет работу по компоновке. Он располагает кнопки горизонтально, так что они отображаются рядом друг с другом.
При нажатии кнопки запускается анимация ряби чернил, ничего больше не происходит. Давайте добавим функциональность в анонимные функции onPressed: чтобы кнопка «Отмена» очищала текстовые поля, а следующая кнопка закрывала экран:
Добавить контроллеры редактирования текста
Чтобы появилась возможность очищать значения текстовых полей, мы добавим 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,
);
Это гарантирует, что внешний вид клавиатуры не повлияет на размер главной страницы или её виджетов.
Вот и всё! Сохраните проект. Нажмите «Далее».
У тебя получилось!
Android | iOS |
|
|
Этот экран — отправная точка для нашей следующей практической работы, которую вы будете выполнять в рамках курса MDC-102.
6. Поздравляем!
Мы добавили текстовые поля и кнопки, и нам практически не пришлось заниматься кодом разметки. Компоненты Material для Flutter обладают большим стилем и могут быть размещены на экране практически без усилий.
Следующие шаги
Текстовые поля и кнопки — два основных компонента системы Material, но их гораздо больше! Вы также можете ознакомиться с остальными в каталоге виджетов Material Components .
В качестве альтернативы, перейдите к курсу MDC-102: Структура и компоновка Material Design , чтобы узнать о компонентах, рассматриваемых в курсе MDC-102 для Flutter.