1. Giới thiệu
Material Design và thư viện Material Flutter là gì?
Material Design là hệ thống để tạo các sản phẩm kỹ thuật số đẹp mắt và ấn tượng. Bằng cách hợp nhất phong cách, cách xây dựng thương hiệu, sự 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 phụ trách sản phẩm có thể phát hiện ra tiềm năng thiết kế lớn nhất của họ.
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 (gọi tắt là MDC) nhằm tạo ra trải nghiệm nhất quán cho người dùng 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 cũng được cập nhật để đảm bảo triển khai pixel hoàn hảo một cách nhất quán, 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 cách sử dụ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 sẽ hướng dẫn bạn cách tạo 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. Video này sẽ minh hoạ cách bạn có thể tuỳ chỉnh các thành phần để thể hiện thương hiệu hoặc phong cách bất kỳ 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 Đền chứa:
- Hình ảnh biểu trưng của Đền thờ
- Tên ứng dụng (Đền)
- 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
- Hiệu ứng 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á thế nào về mức độ kinh nghiệm của mình khi phát triển Flutter?
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 thành phòng thí nghiệm này – Flutter SDK và trình chỉnh sửa.
Bạn có thể chạy lớp học lập trình bằng bất kỳ thiết bị nào sau đây:
- Một thiết bị Android hoặc iOS thực kết nối với máy tính của bạn và được đặt ở Chế độ nhà phát triển.
- Trình mô phỏng iOS (yêu cầu cài đặt công cụ Xcode).
- Trình mô phỏng Android (yêu cầu thiết lập trong Android Studio).
- Trình duyệt (cần có Chrome để gỡ lỗi).
- Dưới dạng ứng dụng Windows, Linux hoặc macOS. Bạn phải phát triển trên nền tảng mà bạn dự định triển khai. Vì vậy, nếu muốn phát triển một ứng dụng Windows dành cho máy tính, bạn phải phát triển trên Windows để truy cập vào chuỗi bản dựng phù hợp. Có các yêu cầu cụ thể theo hệ điều hành được đề cập 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
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 tệp trên 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 phần Bắt đầu: Dùng thử cho 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 phải đang chạy trên thiết bị của bạn. Bạn sẽ thấy biểu trưng Đền thờ và tên "Đền" ngay bên dưới nó.
Android | iOS |
|
|
Hãy cùng xem mã.
Tiện ích trong login.dart
Mở tệp login.dart. Mã này phải có:
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)
],
),
),
);
}
}
Hãy lưu ý rằng tệp này chứa 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ả tiện ích trong giao diện người dùng.
4. Thêm tiện ích TextField
Để bắt đầu, chúng tôi sẽ thêm hai 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 của họ. Chúng ta sẽ sử dụng tiện ích TextField, hiển thị nhãn nổi và kích hoạt hiệu ứng gợn sóng 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 các tiện ích TextField
Thêm hai trường văn bản mới và một dấu 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: chứa tiện ích InputDecoration. Trường filled: có nghĩa là nền của trường văn bản được điền nhẹ để giúp mọi người nhận ra vùng đích nhấn hoặc 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ế nội dung mà người dùng nhập bằng dấu đầu dòng (phù hợp với mật khẩu).
Lưu dự án (bằng tổ hợp phím: Command + s) để thực hiện quá trình Tải lại nóng.
Bây giờ, bạn sẽ thấy một trang có hai trường văn bản cho Tên người dùng và Mật khẩu! Xem ảnh động nhãn nổi:
Android | iOS |
|
|
5. Thêm nút
Tiếp theo, chúng ta sẽ thêm hai 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à RaisedButton.
Thêm OverflowBar
Sau các trường văn bản, hãy thêm OverflowBar vào 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 trong một hàng.
Thêm nút
Sau đó, thêm hai 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 hai nút xuất hiện:
Android | iOS |
|
|
OverflowBar xử lý công việc bố cục cho bạn. Thao tác này sẽ định vị các nút theo chiều ngang để chúng xuất hiện cạnh nhau.
Thao tác chạm vào nút sẽ khởi động ảnh động gợn sóng 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 TextEditControllers
Để có thể xoá các trường văn bản các giá trị khác, chúng ta sẽ thêm TextEditingControllers để kiểm soát văn bản.
Ngay trong phần khai báo của lớp _LoginPageState, hãy thêm các bộ đ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 lệnh để xoá từng tay đ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. Giờ đây, khi bạn nhập nội dung vào các trường văn bản, thao tác nhấn huỷ sẽ xoá từng trường một lần nữa.
Biểu mẫu đăng nhập này đã sẵn sàng! Hãy chuyển người dùng đến phần còn lại của ứng dụng Shrine.
Độ chi tiết
Để loại bỏ chế độ xem này, chúng ta cần bật (hoặc xoá) trang này (mà Flutter gọi là tuyến) ra khỏi ngăn xếp điều hướng.
Trong hàm onPressed: của Nâng cao Nút, hãy bật tuyến gần đây nhất từ Trình điều hướng:
// 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,
);
Thao tác này đảm bảo 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 tiếp tục và nhấp vào "Tiếp theo".
Các bạn đã làm được!
Android | iOS |
|
|
Màn hình này là điểm khởi đầu 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 mà hầu như không phải xem xét mã bố cục. Thành phần Material cho Flutter có rất nhiều kiểu dáng và có thể được đặt trên màn hình gần như một cách dễ dàng.
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 nữa! Bạn cũng có thể khám phá các phần còn lại trong danh mục tiện ích Thành phần Material.
Ngoài ra, bạn có thể truy cập MDC-102: Material Design Structure and Layout (Cấu trúc và bố cục Material Design) để tìm hiểu các thành phần được đề cập trong MDC-102 dành cho Flutter.