Widget Material và Cupertino là gì?

Question

Accepted Answer

Flutter cung cấp hai hệ thống thiết kế chính dưới dạng bộ widget: **Material** (Material Design của Google, kiểu Android) và **Cupertino** (kiểu iOS). Chúng cho phép bạn xây dựng UI khớp với ngôn ngữ thiết kế của từng nền tảng, hoặc một giao diện tùy biến nhất quán.

## Widget Material (Material Design)

```dart
// Widget Material tuân theo Material Design của Google (giao diện Android, nhưng dùng được mọi nơi)
MaterialApp(                       // gốc ứng dụng cho ứng dụng Material
  home: Scaffold(                  // cấu trúc trang Material
    appBar: AppBar(title: Text('Material')),
    body: Center(
      child: ElevatedButton(       // button Material
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
)
// Widget Material: Scaffold, AppBar, ElevatedButton, Card, FloatingActionButton, v.v.
```

## Widget Cupertino (kiểu iOS)

```dart
// Widget Cupertino tuân theo ngôn ngữ thiết kế iOS của Apple
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(middle: Text('iOS')),
    child: Center(
      child: CupertinoButton(      // button kiểu iOS
        onPressed: () {},
        child: Text('iOS Button'),
      ),
    ),
  ),
)
// Widget Cupertino: CupertinoButton, CupertinoNavigationBar, CupertinoPicker, v.v.
```

## Lựa chọn và UI thích ứng theo nền tảng

```text
→ MATERIAL → mặc định phổ biến nhất; hoạt động trên mọi nền tảng; hệ thống thiết kế của Google
→ CUPERTINO → cho giao diện iOS chính thống
→ Nhiều ứng dụng chỉ dùng Material ở mọi nơi (nhất quán, đơn giản hơn) — Flutter tự vẽ
  UI riêng, nên Material vẫn chạy tốt trên iOS
→ THÍCH ỨNG THEO NỀN TẢNG → dùng Material trên Android, Cupertino trên iOS (cảm giác native theo nền tảng)
  — tốn công hơn; chọn dựa trên việc giao diện native theo nền tảng có quan trọng không
```

## Tại sao điều này quan trọng

Hiểu widget Material và Cupertino là có giá trị vì chúng là hai hệ thống thiết kế chính của Flutter, cung cấp các widget dùng để xây dựng UI ứng dụng, nên đây là kiến thức nền tảng hữu ích. **Widget Material** (triển khai Material Design của Google, ngôn ngữ thiết kế kiểu Android) là mặc định phổ biến nhất và bao gồm các widget thiết yếu dùng trong hầu hết ứng dụng Flutter (Scaffold cho cấu trúc trang, AppBar, button, Card, FloatingActionButton) — hiểu chúng là cần thiết vì phần lớn ứng dụng Flutter dùng Material. **Widget Cupertino** (triển khai ngôn ngữ thiết kế iOS của Apple) cho phép bạn xây dựng giao diện trông giống iOS chính thống.

Hiểu cả hai, và **cách chọn**, là có giá trị thực tiễn: nhiều ứng dụng đơn giản **dùng Material ở mọi nơi** (nhất quán và đơn giản hơn, và vì Flutter tự vẽ UI riêng, Material vẫn chạy tốt ngay cả trên iOS), trong khi các ứng dụng muốn **giao diện native theo nền tảng** có thể dùng **cách tiếp cận thích ứng theo nền tảng** (Material trên Android, Cupertino trên iOS, mang lại cho mỗi nền tảng cảm giác native của nó với chi phí là tốn công hơn).

Hiểu lựa chọn này — Material nhất quán ở mọi nơi (đơn giản hơn) so với thích ứng theo nền tảng (cảm giác native theo từng nền tảng) — phản ánh một quyết định thiết kế thực tế trong phát triển Flutter.

Biết các bộ widget khả dụng và hệ thống thiết kế của chúng là nền tảng để xây dựng UI trông phù hợp, dù khớp với quy ước của một nền tảng hay trình bày một thiết kế tùy biến nhất quán.

Vì xây dựng UI Flutter cần dùng các bộ widget này (Material là mặc định phổ biến, Cupertino cho styling iOS) và hiểu chúng cùng lựa chọn giữa thiết kế nhất quán vs thích ứng theo nền tảng là hữu ích để tạo ứng dụng trông phù hợp, hiểu widget Material và Cupertino là kiến thức Flutter nền tảng có giá trị — cần thiết để xây dựng UI (đặc biệt là các widget Material phổ biến) và hữu ích để đưa ra quyết định hợp lý về giao diện ứng dụng và quy ước nền tảng, một khía cạnh thực tiễn của phát triển UI Flutter hàng ngày.