1. Giới thiệu
Trong Flutter, Material và Cupertino là hai bộ widget được sử dụng để xây dựng giao diện người dùng. Mỗi bộ có phong cách thiết kế riêng, giúp lập trình viên tạo ra các thành phần giao diện như nút bấm, thanh điều hướng, thanh tiêu đề, hộp thoại và công tắc.
Material Design là phong cách thiết kế do Google phát triển, thường được sử dụng trong các ứng dụng Android. Trong khi đó, Cupertino cung cấp các widget có giao diện theo phong cách của Apple, thường thấy trên các ứng dụng iOS.
Việc tìm hiểu Material và Cupertino giúp lập trình viên biết cách lựa chọn các thành phần giao diện phù hợp với mục tiêu thiết kế ứng dụng.
2. Material trong Flutter
Material là bộ widget trong Flutter giúp xây dựng giao diện theo phong cách Material Design của Google. Bộ widget này cung cấp nhiều thành phần giao diện có sẵn, giúp lập trình viên tiết kiệm thời gian thay vì phải tự xây dựng mọi thành phần từ đầu.
Một số widget Material thường gặp:
MaterialApp: Tạo ứng dụng sử dụng hệ thống giao diện Material.Scaffold: Cung cấp khung bố cục cơ bản cho một màn hình.AppBar: Tạo thanh tiêu đề ở phía trên màn hình.ElevatedButton: Tạo nút bấm có hiệu ứng nổi.TextField: Tạo ô nhập dữ liệu.FloatingActionButton: Tạo nút hành động nổi trên giao diện.
Ví dụ, khi xây dựng ứng dụng bán sữa, lập trình viên có thể sử dụng Scaffold để tạo khung trang, AppBar để hiển thị tên cửa hàng và ElevatedButton để tạo nút thêm sản phẩm vào giỏ hàng.
Nhờ các widget có sẵn, việc xây dựng giao diện trở nên nhanh chóng và dễ quản lý hơn.
3. Cupertino trong Flutter
Cupertino là bộ widget trong Flutter được thiết kế theo phong cách giao diện của Apple, giúp ứng dụng có các thành phần quen thuộc với người dùng iPhone và iOS.
Tương tự Material, Cupertino cung cấp nhiều widget có sẵn để lập trình viên sử dụng khi xây dựng giao diện.
Một số widget Cupertino thường gặp:
CupertinoApp: Tạo ứng dụng sử dụng phong cách giao diện Cupertino.CupertinoPageScaffold: Cung cấp khung bố cục cơ bản cho một màn hình theo phong cách iOS.CupertinoNavigationBar: Tạo thanh điều hướng theo phong cách iOS.CupertinoButton: Tạo nút bấm theo phong cách iOS.CupertinoSwitch: Tạo công tắc bật/tắt theo phong cách iOS.CupertinoAlertDialog: Tạo hộp thoại thông báo theo phong cách iOS.
Ví dụ, nếu muốn ứng dụng bán sữa có giao diện gần với ứng dụng trên iPhone, lập trình viên có thể sử dụng CupertinoNavigationBar để tạo thanh điều hướng và CupertinoButton để tạo nút bấm theo phong cách Apple.
Cupertino giúp ứng dụng có giao diện phù hợp hơn với phong cách thiết kế quen thuộc của hệ sinh thái iOS.
4. Sự khác nhau giữa Material và Cupertino
Material và Cupertino đều cung cấp các widget có sẵn để xây dựng giao diện trong Flutter, nhưng khác nhau chủ yếu ở phong cách thiết kế.
Material hướng đến phong cách Material Design của Google, thường gặp trong các ứng dụng Android. Cupertino hướng đến phong cách giao diện của Apple, thường gặp trên iOS.
Ví dụ, cùng là một nút bấm nhưng ElevatedButton có thiết kế theo Material, còn CupertinoButton có thiết kế theo phong cách iOS. Lập trình viên có thể lựa chọn widget phù hợp với giao diện mong muốn.
Ngoài ra, Flutter cho phép sử dụng kết hợp widget Material và Cupertino trong cùng một ứng dụng khi cần thiết. Vì vậy, lập trình viên không bắt buộc phải chỉ sử dụng một bộ widget duy nhất.
5. Khi nào nên sử dụng Material và Cupertino?
Material phù hợp khi muốn xây dựng giao diện theo phong cách Material Design hoặc cần tận dụng các widget Material có sẵn để phát triển ứng dụng.
Cupertino phù hợp khi muốn giao diện có phong cách gần với các ứng dụng iOS và tạo cảm giác quen thuộc cho người dùng iPhone.
Trong thực tế, việc lựa chọn phụ thuộc vào yêu cầu của dự án, đối tượng người dùng và thiết kế giao diện đã được xác định. Đối với ứng dụng hỗ trợ cả Android và iOS, lập trình viên có thể lựa chọn một phong cách thống nhất hoặc kết hợp cả hai bộ widget tùy theo yêu cầu.
6. Kết luận
Material và Cupertino là hai bộ widget quan trọng trong Flutter, giúp lập trình viên xây dựng giao diện người dùng nhanh chóng và thuận tiện hơn. Material cung cấp các thành phần giao diện theo phong cách Google Material Design, còn Cupertino cung cấp các thành phần theo phong cách Apple iOS.
Hiểu được đặc điểm và cách sử dụng hai bộ widget này giúp lập trình viên lựa chọn thành phần giao diện phù hợp, đồng thời xây dựng ứng dụng có bố cục rõ ràng và trải nghiệm sử dụng tốt hơn.
Bài viết khác
Tìm hiểu về Flutter Layout và Responsive U
1. Flutter Layout là gì? Flutter Layout là cách sắp xếp và bố trí các thành phần giao diện trong ứng dụng. Khi xây dựng một ứng dụng Flutter, chúng ta thường cần hiển thị nhiều thành phần như văn bản, hình ảnh, nút bấm và danh sách sản phẩm. Vì vậy, cần sắp xếp […]
Tìm hiểu về Flutter: StatefulWidget và StatelessWidget
Trong Flutter, Widget là thành phần dùng để xây dựng giao diện của ứng dụng, chẳng hạn như văn bản, nút bấm, hình ảnh hoặc các thành phần hiển thị khác. Trong đó, StatelessWidget và StatefulWidget là hai loại Widget cơ bản mà người học Flutter cần nắm rõ. 1. StatelessWidget StatelessWidget là loại Widget […]
Tìm hiểu về Flutter Widget Fundamentals
Widget trong Flutter là gì? Widget là thành phần cơ bản nhất được sử dụng để xây dựng giao diện trong Flutter. Mỗi thành phần trên màn hình như văn bản, hình ảnh, nút bấm, danh sách, khoảng cách hoặc toàn bộ một màn hình đều có thể được biểu diễn bằng Widget. Thay […]
Tìm hiểu về Isolate & Concurrency
Isolate là gì? Trong Dart, Isolate là một vùng thực thi độc lập, có bộ nhớ riêng và Event Loop riêng. Mỗi Isolate có thể thực hiện công việc mà không trực tiếp chia sẻ bộ nhớ với Isolate khác. Có thể hiểu đơn giản: Isolate là cách Dart thực hiện các tác vụ […]
Lập trình bất đồng bộ với Future, async, await.
Lập trình bất đồng bộ là gì? Lập trình bất đồng bộ (Asynchronous Programming) là cách tổ chức chương trình cho phép một tác vụ mất thời gian được thực hiện mà không cần chặn toàn bộ chương trình trong thời gian chờ. Trong ứng dụng thực tế, có nhiều công việc cần thời […]
Tìm hiểu về Null Safety
Null Safety là gì? Null Safety là một cơ chế an toàn kiểu dữ liệu được Dart sử dụng để hạn chế các lỗi liên quan đến giá trị null trong chương trình. Null Safety được đưa vào Dart nhằm giúp lập trình viên xác định rõ một biến có thể chứa null hay […]
Khoá học lập trình game con rắn cho trẻ em 
