MDC-101 Flutter: Kiến thức cơ bản về thành phần Material

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ố nổi bật và đẹp mắt. Bằng cách kết hợp phong cách, 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 (viết tắt là MDC) để 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à chính xác đế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ẽ tạo 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

Đây là lớp học lập trình đầu tiên trong số 4 lớp học lập trình 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. Nội dung 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ẽ tạo một trang đăng nhập cho Shrine có chứa:

• Hình ảnh biểu trưng của Shrine
• Tên của ứ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

Đây là lớp học lập trình đầu tiên trong số 4 lớp học lập trình hướng dẫn bạn cách tạo một ứng dụng cho sản phẩm có tên là Shrine. Bạn nên thực hiện tất cả các lớp học lập trình theo thứ tự vì chúng sẽ hướng dẫn bạn từng bước thực hiện các nhiệm vụ.Bạn có thể tìm thấy các lớp học lập trình có liên quan tại: MDC-102 Flutter: Cấu trúc và bố cục của Material MDC-103 Flutter: Tuỳ chỉnh giao diện Material với màu sắc, hình dạng, độ nâng và kiểu chữ MDC-104 Flutter: Các thành phần nâng cao của Material

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 mực (một dạng phản hồi trực quan cho các sự kiện chạm)

Trong lớp học lập trình này, bạn sẽ sử dụng các thành phần mặc định do Material Flutter cung cấp. Bạn sẽ tìm hiểu cách tuỳ chỉnh các thành phần này trong MDC-103: Giao diện Material Design với màu sắc, hình dạng, độ cao và kiểu chữ.

Bạn đánh giá thế nào về mức độ kinh nghiệm của mình trong việc phát triển bằng Flutter?

Người mới bắt đầu Trung cấp Thành thạ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 thành bài thực hành này: Flutter SDK 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 đượ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 (bạn cần cài đặt các công cụ Xcode).
• Trình mô phỏng Android (cần thiết lập trong Android Studio).
• Một trình duyệt (bạn cần có Chrome để gỡ lỗi).
• Dưới dạng ứng dụng máy tính cho 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 máy tính cho 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ó những 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 xuống

Tải dự án ban đầu xuống

Dự án ban đầu nằm trong thư mục material-components-flutter-codelabs-101-starter/mdc_100_series.

...hoặc sao chép 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

Để được trợ giúp thêm: Sao chép kho lưu trữ trên GitHub

Nhánh bên phải

Các lớp học lập trình MDC-101 đến 104 được xây dựng lần lượt dựa trên nhau. Vì vậy, khi bạn hoàn tất mã cho 101, mã đó sẽ trở thành mã khởi đầu cho 102! Mã được chia thành nhiều nhánh và bạn có thể liệt kê tất cả các nhánh bằng lệnh sau:

git branch --list

Để xem mã nguồn hoàn chỉnh, hãy xem nhánh 102-starter_and_101-complete.

Mở dự án và chạy ứng dụng

1. Mở dự án trong trình chỉnh sửa mà bạn chọn.
2. Làm theo hướng dẫn để "Chạy ứng dụng" trong phần Bắt đầu: Lái thử cho trình chỉnh sửa 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 của Shrine và tên "Shrine" ngay bên dưới.

Android	iOS

Hãy xem mã này.

Các việc cần làm trong mã bao gồm các số (101, 102, v.v.). Đây là những số tham chiếu đến lớp học lập trình mà bạn sẽ triển khai thay đổi.

Tiện ích trong login.dart

Mở tệp login.dart. Nội dung 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)
          ],
        ),
      ),
    );
  }
}

Lưu ý rằng nó chứa một câu lệnh import và hai lớp mới:

• Câu lệnh import cho 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 _LoginPageState kiểm soát cách tạo tất cả các tiện ích trong giao diện người dùng.

Để tìm hiểu thêm về những kiến thức cơ bản về giao diện người dùng Flutter và tiện ích, bạn có thể tham gia Chuyến tham quan Khung tiện ích Flutter hoặc làm lớp học lập trình Viết ứng dụng Flutter đầu tiên, phần 1.

4. Thêm tiện ích TextField

Để bắt đầu, chúng ta 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. Chúng ta sẽ sử dụng tiện ích TextField, tiện ích này sẽ hiển thị một nhãn nổi và kích hoạt hiệu ứng gợn sóng khi chạm.

Các trường văn bản của Material đã được nâng cấp đáng kể để cải thiện tính linh hoạt của thương hiệu, với những điểm cải tiến dựa trên nghiên cứu sâu rộng về trải nghiệm người dùng (UX) nhằm nâng cao khả năng sử dụng và thiết kế trực quan.

Tìm hiểu thêm về các trường văn bản mới trong bài viết Nguyên tắc của Material.

Trang này chủ yếu được cấu trúc bằng một 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 khoảng trống 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 đều có một trường decoration: nhận 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ạt để 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ế nội dung đầu vào 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 thao tác Tải lại nhanh.

Lúc này, 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! Xem ảnh động nhãn nổi:

Android	iOS

Các tính năng của TextField bao gồm:

• Bạn có thể dễ dàng thay đổi giao diện của tiện ích TextField. Đối với trường trang trí, hãy chỉ định một giá trị InputDecoration.
• Theo mặc định, trường văn bản sẽ hiển thị phản hồi khi chạm (gọi là hiệu ứng gợn sóng hoặc "mực").
• FormField là một tiện ích tương tự có các tính năng đặc biệt để nhúng các trường vào Biểu mẫu.
• Tài liệu về lớp TextField

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ẽ dùng 2 loại tiện ích nút: TextButton và ElevatedButton.

Lựa chọn giữa nút văn bản và nút nổi

Tại sao không chỉ hiển thị hai nút có trạng thái nâng lên? Mỗi loại nút cho biết những hành động nào quan trọng hơn những hành động khác.

Bố cục phải chứa một nút nổi bật duy nhất. Điều này giúp người dùng thấy rõ rằng các nút khác có tầm quan trọng thấp hơn. Nút nổi bật này thể hiện hành động mà chúng tôi muốn người dùng thực hiện nhất để chuyển sang bước tiếp theo trong ứng dụng.

Hành động mà chúng tôi không muốn họ thực hiện nhất là huỷ đăng nhập. Vì nút nâng lên thu hút sự chú ý bằng hình thức nổi, nên bạn nên dùng nút này cho hành động quan trọng hơn. Để so sánh, nút văn bản thuần tuý ở bên trái trông ít được nhấn mạnh hơn.

Tìm hiểu thêm về hệ thống phân cấp nút trong bài viết Nút của Nguyên tắc về Material.

Thêm OverflowBar

Sau các trường văn bản, hãy thêm OverflowBar vào các thành phần 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 các 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) 
      },
    ),

Tại sao chúng ta có các khối trống cho các trường onPressed:?

Nếu chúng ta truyền giá trị rỗng, các nút sẽ bị vô hiệu hoá. Sẽ không có phản hồi về thao tác chạm và chúng tôi không thể nắm được hành vi đã bật của chúng. Việc sử dụng các khối trống sẽ ngăn chặn việc vô hiệu hoá các khối đó.

Để biết thêm thông tin về các nút và hoạt động tương tác của các nút đó, hãy xem bài viết Thêm tính năng tương tác vào ứng dụng.

Lưu dự án. Bạn sẽ thấy 2 nút xuất hiện bên dưới trường văn bản cuối cùng:

Android	iOS

OverflowBar sẽ xử lý công việc bố trí cho bạn. Thao tác này sẽ đặ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, ảnh độ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 TextEditingController

Để 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 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 khi nhấn

Thêm một lệnh để xoá từng bộ đ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, việc nhấn vào nút huỷ sẽ xoá từng trường một lần nữa.

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.

Độ chi tiết

Để đóng chế độ xem này, chúng ta muốn pop (hoặc xoá) trang này (Flutter gọi là route) khỏi ngăn xếp điều hướng.

Navigator duy trì một ngăn xếp các tuyến đường giống như UINavigationController trên iOS. Việc đẩy một tuyến đường sẽ đặt tuyến đường đó lên đầu ngăn xếp. Thao tác bật ngăn xếp sẽ xoá tuyến đường được thêm gần đây nhất. Trong app.dart của ứng dụng, việc gọi initialRoute: '/login', sẽ thêm màn hình đăng nhập vào Navigator.

Tìm hiểu về tuyến đường và chế độ chỉ đường trong phần Kiến thức cơ bản về chế độ chỉ đường.

Trong hàm onPressed: của ElevatedButton, hãy bật tuyến đường 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 rồi đặ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 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 của chúng ta, tức là MDC-102.

Giới thiệu về nút:

• Ngoài TextButton và ElevatedButton, còn có OutlinedButton, FloatingActionButton IconButton và nhiều nút khác.

6. Xin chúc mừng!

Chúng tôi đã thêm các trường văn bản và nút mà hầu như không cần phải xem xét mã bố cục. 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 mà hầu như không tốn công sức.

Ứng dụng MDC-101 hoàn chỉnh có trong nhánh 102-starter_and_101-complete.

Bạn có thể kiểm thử phiên bản ứng dụng của mình với ứng dụng trong nhánh đó.

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 thành phần còn lại trong danh mục các tiện ích Thành phần Material.

Ngoài ra, hãy xem 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.

Lớp học lập trình tiếp theo

Tôi đã hoàn thành lớp học lập trình này trong một khoảng thời gian hợp lý và không tốn nhiều công sức

Hoàn toàn đồng ý Đồng ý Trung lập Không đồng ý Hoàn toàn không đồng ý

Tôi muốn tiếp tục sử dụng Thành phần Material trong tương lai

Hoàn toàn đồng ý Đồng ý Không đồng ý cũng không phản đối Không đồng ý Hoàn toàn không đồng ý