1. Giới thiệu
Material Design và thư viện Material Flutter là gì?
Material Design là một hệ thống để xây dựng các sản phẩm kỹ thuật số đẹp mắt và nổi bật. Bằng cách kết hợp kiểu dáng, thương hiệu, hoạt động tương tác và chuyển động theo một bộ nguyên tắc và thành phần nhất quán, các nhóm sản phẩm có thể nhận ra tiềm năng thiết kế lớn nhất của mình.
Thư viện Material Flutter bao gồm các tiện ích Flutter triển khai thiết kế của các thành phần Material Design (MDC viết tắt) để tạo trải nghiệm người dùng nhất quán trên các ứng dụng và nền tảng. Khi hệ thống Material Design phát triển, các thành phần này sẽ được cập nhật để đảm bảo việc triển khai nhất quán và hoàn hảo đến từng pixel, tuân thủ các tiêu chuẩn phát triển giao diện người dùng của Google.
Trong lớp học lập trình này, bạn sẽ xây dựng một trang đăng nhập bằng một số thành phần của Material Flutter.
Sản phẩm bạn sẽ tạo ra
Lớp học lập trình này là lớp học đầu tiên trong số 4 lớp học lập trình hướng dẫn bạn xây dựng một ứng dụng có tên là Shrine, một ứng dụng thương mại điện tử bán quần áo và đồ gia dụng. Ứng dụng này sẽ minh hoạ cách bạn có thể tuỳ chỉnh các thành phần để phản ánh mọi thương hiệu hoặc kiểu dáng bằng Material Flutter.
Trong lớp học lập trình này, bạn sẽ xây dựng một trang đăng nhập cho Shrine có chứa:
- Hình ảnh biểu trưng của Shrine
- Tên ứng dụng (Shrine)
- Hai trường văn bản, một trường để nhập tên người dùng và trường còn lại để nhập mật khẩu
- Hai nút
Android | iOS |
|
|
Các thành phần và hệ thống con Material Flutter trong lớp học lập trình này
- Trường văn bản
- Nút
- Gợn sóng mực (một dạng phản hồi trực quan cho các sự kiện chạm)
Bạn đánh giá mức độ kinh nghiệm của mình về việc phát triển Flutter như thế nào?
2. Thiết lập môi trường phát triển Flutter
Bạn cần có 2 phần mềm để hoàn tất lớp học lập trình này: SDK Flutter và một trình chỉnh sửa.
Bạn có thể chạy lớp học lập trình này bằng bất kỳ thiết bị nào sau đây:
- Một thiết bị Android hoặc iOS thực tế được kết nối với máy tính và được đặt ở chế độ Nhà phát triển.
- Trình mô phỏng iOS (yêu cầu cài đặt các công cụ Xcode).
- Trình mô phỏng Android (yêu cầu thiết lập trong Android Studio).
- Một trình duyệt (Chrome là trình duyệt bắt buộc để gỡ lỗi).
- Dưới dạng ứng dụng dành cho máy tính Windows, Linux hoặc macOS. Bạn phải phát triển trên nền tảng mà bạn định triển khai. Vì vậy, nếu muốn phát triển một ứng dụng dành cho máy tính Windows, bạn phải phát triển trên Windows để truy cập vào chuỗi bản dựng thích hợp. Có các yêu cầu cụ thể về hệ điều hành được trình bày chi tiết trên docs.flutter.dev/desktop.
3. Tải ứng dụng khởi đầu của lớp học lập trình xuống
Dự án khởi đầu nằm trong thư mục material-components-flutter-codelabs-101-starter/mdc_100_series.
...hoặc sao chép dự án đó từ GitHub
Để sao chép lớp học lập trình này từ GitHub, hãy chạy các lệnh sau:
git clone https://github.com/material-components/material-components-flutter-codelabs.git cd material-components-flutter-codelabs/mdc_100_series git checkout 101-starter
Mở dự án và chạy ứng dụng
- Mở dự án trong trình chỉnh sửa mà bạn chọn.
- Làm theo hướng dẫn để "Chạy ứng dụng" trong Bắt đầu: Chạy thử trình chỉnh sửa mà bạn chọn.
Thành công! Mã khởi đầu cho trang đăng nhập của Shrine sẽ chạy trên thiết bị của bạn. Bạn sẽ thấy biểu trưng Shrine và tên "Shrine" ngay bên dưới.
Android | iOS |
|
|
Hãy xem mã.
Tiện ích trong login.dart
Mở tệp login.dart. Tệp này sẽ chứa nội dung sau:
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)
],
),
),
);
}
}
Lưu ý rằng tệp này chứa một câu lệnh import và 2 lớp mới:
- Câu lệnh
importcho phép sử dụng thư viện Material trong tệp này. - Lớp
LoginPageđại diện cho toàn bộ trang hiển thị trong trình mô phỏng. - Hàm
build()của lớp_LoginPageStatekiểm soát cách tạo tất cả các tiện ích trong giao diện người dùng của chúng ta.
4. Thêm tiện ích TextField
Để bắt đầu, chúng ta sẽ thêm 2 trường văn bản vào trang đăng nhập, nơi người dùng nhập tên người dùng và mật khẩu. Chúng ta sẽ sử dụng tiện ích TextField, tiện ích này hiển thị nhãn nổi và kích hoạt hiệu ứng gợn sóng khi chạm.
Trang này được cấu trúc chủ yếu bằng ListView, sắp xếp các phần tử con trong một cột có thể cuộn. Hãy đặt các trường văn bản bên dưới.
Thêm tiện ích TextField
Thêm 2 trường văn bản mới và một khoảng cách sau 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,
),
Mỗi trường văn bản có một trường decoration: lấy một tiện ích InputDecoration. Trường filled: có nghĩa là nền của trường văn bản được tô màu nhẹ để giúp mọi người nhận ra vùng đích chạm của trường văn bản. Giá trị obscureText: true của trường văn bản thứ hai sẽ tự động thay thế dữ liệu đầu vào mà người dùng nhập bằng dấu chấm, phù hợp với mật khẩu.
Lưu dự án của bạn (bằng tổ hợp phím: command + s) để thực hiện Tải lại nóng.
Bây giờ, bạn sẽ thấy một trang có 2 trường văn bản cho Tên người dùng và Mật khẩu! Hãy xem ảnh động nhãn nổi:
Android | iOS |
|
|
5. Thêm nút
Tiếp theo, chúng ta sẽ thêm 2 nút vào trang đăng nhập: "Huỷ" và "Tiếp theo". Chúng ta sẽ sử dụng 2 loại tiện ích nút: TextButton và ElevatedButton.
Thêm OverflowBar
Sau các trường văn bản, hãy thêm OverflowBar vào các phần tử con của 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 sắp xếp các phần tử con theo hàng.
Thêm nút
Sau đó, hãy thêm 2 nút vào danh sách children của 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)
},
),
Lưu dự án. Trong trường văn bản cuối cùng, bạn sẽ thấy 2 nút xuất hiện:
Android | iOS |
|
|
OverflowBar xử lý công việc bố cục cho bạn. Nút này đặt các nút theo chiều ngang để chúng xuất hiện cạnh nhau.
Khi chạm vào một nút, hiệu ứng gợn sóng mực sẽ bắt đầu mà không gây ra bất kỳ điều gì khác. Hãy thêm chức năng vào các hàm onPressed: ẩn danh để nút huỷ xoá các trường văn bản và nút tiếp theo đóng màn hình:
Thêm TextEditingControllers
Để có thể xoá các giá trị của trường văn bản, chúng ta sẽ thêm TextEditingControllers để kiểm soát văn bản của các trường này.
Ngay bên dưới phần khai báo lớp _LoginPageState, hãy thêm các trình điều khiển dưới dạng biến final.
// TODO: Add text editing controllers (101)
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
Trên trường controller: của trường văn bản đầu tiên, hãy đặt _usernameController:
// TODO: Add TextField widgets (101)
// [Name]
TextField(
controller: _usernameController,
Trên trường controller: của trường văn bản thứ hai, hãy đặt _passwordController:
// TODO: Add TextField widgets (101)
// [Password]
TextField(
controller: _passwordController,
Chỉnh sửa onPressed
Thêm một lệnh để xoá từng trình điều khiển trong hàm onPressed: của TextButton:
// TODO: Clear the text fields (101)
_usernameController.clear();
_passwordController.clear();
Lưu dự án. Bây giờ, khi bạn nhập nội dung nào đó vào các trường văn bản, việc nhấn vào nút huỷ sẽ xoá từng trường.
Biểu mẫu đăng nhập này đang ở trạng thái tốt! Hãy chuyển người dùng đến phần còn lại của ứng dụng Shrine.
POP
Để đóng chế độ xem này, chúng ta muốn pop (hoặc xoá) trang này (mà Flutter gọi là tuyến) khỏi ngăn xếp điều hướng.
Trong hàm onPressed: của ElevatedButton, hãy bật tuyến gần đây nhất từ Navigator:
// TODO: Show the next page (101)
Navigator.pop(context);
Cuối cùng, hãy mở home.dart và đặt resizeToAvoidBottomInset thành false trong 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,
);
Việc này đảm bảo rằng giao diện của bàn phím không làm thay đổi kích thước của trang chủ hoặc các tiện ích của trang chủ.
Vậy là xong! Lưu dự án. Hãy nhấp vào "Tiếp theo".
Thật tuyệt!
Android | iOS |
|
|
Màn hình này là điểm xuất phát cho lớp học lập trình tiếp theo mà bạn sẽ thực hiện trong MDC-102.
6. Xin chúc mừng!
Chúng ta đã thêm các trường văn bản và nút, đồng thời hầu như không phải xem xét mã bố cục. Thành phần Material cho Flutter có nhiều kiểu dáng và có thể được đặt trên màn hình gần như không cần nỗ lực.
Các bước tiếp theo
Trường văn bản và nút là 2 thành phần cốt lõi trong Hệ thống Material, nhưng còn nhiều thành phần khác! Bạn cũng có thể khám phá phần còn lại trong danh mục tiện ích Thành phần Material.
Ngoài ra, hãy chuyển đến MDC-102: Cấu trúc và bố cục Material Design để tìm hiểu về các thành phần được đề cập trong MDC-102 cho Flutter.