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
BÀI 5: TÌM HIỂU CHUYÊN SÂU VỀ LANGUAGE SWITCHING TRONG FLUTTER
1. Language Switching là gì? Trong một ứng dụng hỗ trợ nhiều ngôn ngữ, việc có sẵn các bản dịch chưa đủ để tạo ra trải nghiệm đa ngôn ngữ hoàn chỉnh. Ứng dụng còn cần xác định ngôn ngữ nào sẽ được sử dụng và cho phép thay đổi ngôn ngữ khi cần thiết. […]
TÌM HIỂU CHUYÊN SÂU VỀ UTC & LOCAL TIME CONVERSION TRONG FLUTTER
1. UTC & Local Time Conversion là gì? Trong một ứng dụng Flutter, thời gian xuất hiện ở rất nhiều chức năng như ngày tạo tài khoản, thời gian đặt hàng, lịch sử giao dịch, lịch hẹn, thời gian gửi thông báo và thời hạn của chương trình khuyến mãi. Khi ứng dụng chỉ chạy […]
TÌM HIỂU CHUYÊN SÂU VỀ DATE / NUMBER / CURRENCY FORMATTING TRONG FLUTTER
1. Date / Number / Currency Formatting là gì? Trong một ứng dụng Flutter, dữ liệu thường được lưu trữ và xử lý dưới dạng số, ngày giờ hoặc các kiểu dữ liệu có cấu trúc. Tuy nhiên, dữ liệu dùng để tính toán không nhất thiết giống với cách dữ liệu được hiển thị […]
TÌM HIỂU CHUYÊN SÂU VỀ LOCALIZATION (l10n) TRONG FLUTTER
1. Localization (l10n) là gì? Khi một ứng dụng được sử dụng ở nhiều quốc gia, sự khác biệt không chỉ nằm ở ngôn ngữ mà còn ở cách người dùng đọc ngày tháng, số, tiền tệ, đơn vị đo lường và các thông tin trên giao diện. Ví dụ, một ứng dụng bán hàng […]
TÌM HIỂU CHUYÊN SÂU VỀ INTERNATIONALIZATION (i18n) TRONG FLUTTER
1. Internationalization (i18n) là gì? Trong quá trình phát triển ứng dụng, lập trình viên thường xây dựng giao diện bằng một ngôn ngữ ban đầu, chẳng hạn như tiếng Việt. Khi ứng dụng được sử dụng bởi người dùng ở nhiều quốc gia, việc chỉ hỗ trợ một ngôn ngữ có thể khiến người […]
TÌM HIỂU CHUYÊN SÂU VỀ APP RELEASE & DEPLOYMENT TRONG FLUTTER
1. App Release & Deployment là gì? Trong quá trình phát triển ứng dụng Flutter, sau khi hoàn thành các chức năng, lập trình viên cần đưa ứng dụng đến người dùng thực tế. Ví dụ, một nhóm đã xây dựng xong ứng dụng bán hàng với những chức năng như đăng nhập, xem sản […]
Khoá học lập trình game con rắn cho trẻ em 
