Apakah widget Material dan Cupertino?

Question

Accepted Answer

Flutter menyediakan dua sistem desain utama sebagai set widget: **Material** (Material Design Google, gaya Android) dan **Cupertino** (gaya iOS). Mereka memungkinkan Anda membangun UI yang sesuai dengan bahasa desain setiap platform, atau tampilan kustom yang konsisten.

## Widget Material (Material Design)

```dart
// Material widgets follow Google's Material Design (Android look, but usable anywhere)
MaterialApp(                       // the app root for Material apps
  home: Scaffold(                  // Material page structure
    appBar: AppBar(title: Text('Material')),
    body: Center(
      child: ElevatedButton(       // Material button
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
)
// Material widgets: Scaffold, AppBar, ElevatedButton, Card, FloatingActionButton, etc.
```

## Widget Cupertino (gaya iOS)

```dart
// Cupertino widgets follow Apple's iOS design language
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(middle: Text('iOS')),
    child: Center(
      child: CupertinoButton(      // iOS-style button
        onPressed: () {},
        child: Text('iOS Button'),
      ),
    ),
  ),
)
// Cupertino widgets: CupertinoButton, CupertinoNavigationBar, CupertinoPicker, etc.
```

## Memilih dan UI adaptif platform

```text
→ MATERIAL → most common default; works on all platforms; Google's design system
→ CUPERTINO → for an authentic iOS look
→ Many apps just use Material everywhere (consistent, simpler) — Flutter draws its own
  UI, so Material works fine on iOS too
→ PLATFORM-ADAPTIVE → use Material on Android, Cupertino on iOS (native feel per platform)
  — more effort; choose based on whether platform-native look matters
```

## Mengapa itu penting

Memahami widget Material dan Cupertino berharga karena mereka adalah dua sistem desain utama Flutter, menyediakan widget yang digunakan untuk membangun UI aplikasi, jadi itu adalah pengetahuan dasar yang berguna. **Widget Material** (menerapkan Material Design Google, bahasa desain gaya Android) adalah yang paling umum secara default dan mencakup widget penting yang digunakan di sebagian besar aplikasi Flutter (Scaffold untuk struktur halaman, AppBar, tombol, Cards, FloatingActionButton) — memahaminya diperlukan karena sebagian besar aplikasi Flutter menggunakan Material. **Widget Cupertino** (menerapkan bahasa desain iOS Apple) memungkinkan Anda membangun antarmuka yang benar-benar terlihat seperti iOS.

Memahami keduanya, dan **cara memilih**, sangat berharga secara praktis: banyak aplikasi hanya **menggunakan Material di mana-mana** (konsisten dan lebih sederhana, dan karena Flutter menggambar UI-nya sendiri, Material bekerja dengan baik bahkan di iOS), sementara aplikasi yang menginginkan **tampilan asli platform** dapat menggunakan **pendekatan adaptif platform** (Material di Android, Cupertino di iOS, memberikan setiap platform tampilannya yang asli dengan biaya upaya lebih besar).

Memahami pilihan ini — Material konsisten di mana-mana (lebih sederhana) versus adaptif platform (tampilan asli per platform) — mencerminkan keputusan desain nyata dalam pengembangan Flutter.

Mengenal set widget yang tersedia dan sistem desain mereka adalah dasar untuk membangun UI yang terlihat sesuai, baik mencocokkan konvensi platform atau menyajikan desain kustom yang konsisten.

Karena membangun UI Flutter memerlukan penggunaan set widget ini (Material menjadi default umum, Cupertino untuk styling iOS) dan memahami mereka dan pilihan antara desain konsisten versus adaptif platform berguna untuk membuat aplikasi yang terlihat sesuai, memahami widget Material dan Cupertino adalah pengetahuan Flutter yang berharga, dasar — diperlukan untuk membangun UI (terutama widget Material yang ada di mana-mana) dan berguna untuk membuat keputusan yang tepat tentang tampilan aplikasi dan konvensi platform, aspek praktis pengembangan UI Flutter sehari-hari.