Apa itu widget Material dan Cupertino?

Question

Accepted Answer

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

## Material widgets (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.
```

## Cupertino widgets (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 yang adaptif terhadap 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 ini penting

Memahami widget Material dan Cupertino bernilai karena keduanya adalah dua sistem desain utama Flutter, menyediakan widget yang digunakan untuk membangun UI aplikasi, sehingga merupakan pengetahuan dasar yang berguna. **Widget Material** (mengimplementasikan Material Design dari Google, bahasa desain gaya Android) adalah default paling umum dan mencakup widget esensial yang digunakan dalam sebagian besar aplikasi Flutter (Scaffold untuk struktur halaman, AppBar, tombol, Cards, FloatingActionButton) — memahaminya diperlukan karena mayoritas aplikasi Flutter menggunakan Material. **Widget Cupertino** (mengimplementasikan bahasa desain iOS Apple) memungkinkan Anda membangun antarmuka yang terlihat autentik iOS.

Memahami keduanya, dan **cara memilih**, sangat berguna secara praktis: banyak aplikasi hanya **menggunakan Material di mana-mana** (konsisten dan lebih sederhana, dan karena Flutter menggambar UI-nya sendiri, Material berfungsi 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 yang 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.

Mengetahui kumpulan widget yang tersedia dan sistem desainnya adalah dasar untuk membangun UI yang terlihat sesuai, baik sesuai dengan konvensi platform atau menyajikan desain kustom yang konsisten.

Karena membangun UI Flutter memerlukan penggunaan kumpulan widget ini (Material menjadi default umum, Cupertino untuk gaya iOS) dan memahaminya serta pilihan antara desain konsisten versus adaptif platform berguna untuk membuat aplikasi yang terlihat sesuai, memahami widget Material dan Cupertino adalah pengetahuan Flutter dasar yang bernilai — diperlukan untuk membangun UI (terutama widget Material yang ada di mana-mana) dan berguna untuk membuat keputusan suara tentang penampilan aplikasi dan konvensi platform, aspek praktis dari pengembangan UI Flutter sehari-hari.