Skip to main content

Material Design và Cupertino Widgets trong Flutter

· 4 min read

Flutter cung cấp hai bộ widget chính để tạo giao diện người dùng: Material Design cho Android và Cupertino cho iOS. Bài viết này sẽ giúp bạn hiểu rõ về hai phong cách thiết kế này và cách sử dụng chúng.

1. Material Design​

Material Design là ngôn ngữ thiết kế của Google, được sử dụng chủ yếu cho các ứng dụng Android.

1.1. Các widget Material cơ bản​

AppBar​

AppBar(
  title: const Text('Material App'),
  actions: [
    IconButton(
      icon: const Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: const Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

FloatingActionButton​

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
)

Card​

Card(
  child: ListTile(
    leading: const Icon(Icons.person),
    title: const Text('John Doe'),
    subtitle: const Text('john.doe@example.com'),
    trailing: IconButton(
      icon: const Icon(Icons.edit),
      onPressed: () {},
    ),
  ),
)

BottomNavigationBar​

BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      label: 'School',
    ),
  ],
)

1.2. Material Design Themes​

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    textTheme: const TextTheme(
      headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      bodyText1: TextStyle(fontSize: 16),
    ),
  ),
  home: const MyHomePage(),
)

2. Cupertino Widgets​

Cupertino widgets là bộ widget theo phong cách iOS, cung cấp giao diện native cho người dùng iOS.

2.1. Các widget Cupertino cơ bản​

CupertinoNavigationBar​

CupertinoNavigationBar(
  middle: const Text('Cupertino App'),
  trailing: CupertinoButton(
    child: const Icon(CupertinoIcons.add),
    onPressed: () {},
  ),
)

CupertinoButton​

CupertinoButton(
  color: CupertinoColors.activeBlue,
  child: const Text('Cupertino Button'),
  onPressed: () {},
)

CupertinoListTile​

CupertinoListTile(
  leading: const Icon(CupertinoIcons.person),
  title: const Text('John Doe'),
  subtitle: const Text('john.doe@example.com'),
  trailing: const Icon(CupertinoIcons.chevron_right),
)

CupertinoTabBar​

CupertinoTabBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.settings),
      label: 'Settings',
    ),
  ],
)

2.2. Cupertino Themes​

CupertinoApp(
  theme: const CupertinoThemeData(
    primaryColor: CupertinoColors.systemBlue,
    brightness: Brightness.light,
    textTheme: CupertinoTextThemeData(
      primaryColor: CupertinoColors.systemBlue,
    ),
  ),
  home: const MyHomePage(),
)

3. So sánh Material và Cupertino​

3.1. Điểm khác biệt chính​

Đặc điểmMaterial DesignCupertino
Phong cáchGoogle MaterialApple iOS
Màu sắcĐa dạng, tươi sángTối giản, trung tính
AnimationPhức tạp, mượt màĐơn giản, nhanh
TypographyRobotoSan Francisco
IconographyMaterial IconsSF Symbols

3.2. Khi nào sử dụng cái nào?​

Sử dụng Material Design khi:​

  • Ứng dụng chủ yếu cho Android
  • Cần giao diện phong phú, nhiều animation
  • Muốn tùy chỉnh nhiều về giao diện
  • Cần các widget phức tạp

Sử dụng Cupertino khi:​

  • Ứng dụng chủ yếu cho iOS
  • Cần giao diện đơn giản, tối giản
  • Muốn trải nghiệm native iOS
  • Cần hiệu năng tốt

4. Kết hợp Material và Cupertino​

4.1. Platform-aware widgets​

Widget build(BuildContext context) {
  return Platform.isIOS
      ? CupertinoButton(
          child: const Text('iOS Button'),
          onPressed: () {},
        )
      : ElevatedButton(
          onPressed: () {},
          child: const Text('Android Button'),
        );
}

4.2. Adaptive widgets​

Scaffold(
  appBar: AppBar(
    title: const Text('Adaptive App'),
    actions: [
      IconButton(
        icon: Icon(
          Platform.isIOS
              ? CupertinoIcons.add
              : Icons.add,
        ),
        onPressed: () {},
      ),
    ],
  ),
  body: Center(
    child: Platform.isIOS
        ? const CupertinoActivityIndicator()
        : const CircularProgressIndicator(),
  ),
)

5. Best Practices​

5.1. Thiết kế nhất quán​

  • Chọn một phong cách chính cho ứng dụng
  • Sử dụng các widget phù hợp với platform
  • Duy trì tính nhất quán trong toàn bộ ứng dụng

5.2. Performance​

  • Sử dụng const constructor khi có thể
  • Tránh rebuild không cần thiết
  • Tối ưu hóa animation

5.3. Accessibility​

  • Sử dụng semantic labels
  • Đảm bảo contrast ratio phù hợp
  • Hỗ trợ screen readers

Kết luận​

Material Design và Cupertino widgets là hai công cụ mạnh mẽ trong Flutter để tạo giao diện người dùng. Việc hiểu rõ sự khác biệt và biết khi nào sử dụng cái nào sẽ giúp bạn tạo ra ứng dụng có trải nghiệm người dùng tốt nhất trên cả Android và iOS.

Tài liệu tham khảo: