MaterialApp — apa itu, konfigurasi dan peran widget root

Apa itu MaterialApp di Flutter?

MaterialApp — adalah widget pembungkus yang menginisialisasi Material Design di aplikasi Flutter. Ini adalah akar dari Widget Tree dan menyediakan widget anak akses ke layanan sistem: navigasi, tema, kueri media, dan lokalisasi. Tanpa MaterialApp, aplikasi tidak akan memiliki gaya Material standar dan tidak akan dapat menggunakan widget seperti Scaffold, AppBar, FloatingActionButton, dan BottomNavigationBar.

Apa yang ditambahkan MaterialApp ke Widget Tree

Saat menggunakan MaterialApp, Flutter secara otomatis menambahkan beberapa widget kunci ke akar pohon: Navigator (tumpukan layar untuk navigasi), Theme (skema warna dan gaya), MediaQuery (informasi perangkat), Localizations (string yang dilokalisasi), Directionality (arah teks). Widget ini diimplementasikan sebagai InheritedWidget dan dapat diakses melalui BuildContext di mana saja dalam aplikasi.

Penggunaan dasar

Konfigurasi minimal MaterialApp hanya memerlukan parameter home — widget yang ditampilkan di layar utama. Flutter secara otomatis membungkus home ke dalam Scaffold, jika bukan Scaffold, melalui mekanisme WidgetsBinding. Saat menjalankan aplikasi dengan runApp(MaterialApp(home: MyHomePage())), Flutter membuat Widget Tree root dengan MaterialApp sebagai akar.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

Dalam contoh ini, MaterialApp mengonfigurasi tema dasar (terang dan gelap), judul, dan layar utama. Parameter title digunakan untuk judul jendela (di desktop) dan aksesibilitas. Parameter theme dan darkTheme menentukan tampilan aplikasi dalam mode berbeda.

Struktur dan parameter MaterialApp

MaterialApp menerima lebih dari 30 parameter, yang dibagi ke dalam kategori: pengaturan Material Design, routing, tema, lokalisasi, perilaku kesalahan, dan pengaturan untuk platform tertentu. Mengetahui parameter kunci memungkinkan konfigurasi aplikasi yang fleksibel tanpa menulis kode tambahan.

Parameter konfigurasi utama

Parameter title menetapkan nama aplikasi untuk judul jendela dan aksesibilitas. color menentukan warna aplikasi untuk pengalih tugas di Android. debugShowCheckedModeBanner menyembunyikan banner mode debug di build rilis. showPerformanceOverlay mengaktifkan overlay dengan informasi kinerja. supportDarkTheme menunjukkan apakah aplikasi mendukung tema gelap.

Parameter untuk platform tertentu

MaterialApp menyediakan parameter untuk mengonfigurasi perilaku di berbagai platform: restorationScopeId untuk menyimpan status aplikasi saat restart di Android, scrollBehavior untuk mengonfigurasi perilaku scroll di berbagai sistem operasi, useMaterial3 untuk mengaktifkan Material 3 (Material You). Material 3 menambahkan warna dinamis, komponen baru, dan gaya yang diperbarui.

Tema melalui theme dan darkTheme

Tema — salah satu parameter utama MaterialApp. Parameter theme menerima objek ThemeData yang menentukan palet warna, tipografi, bentuk komponen, dan ikonografi untuk tema terang. Parameter darkTheme — konfigurasi serupa untuk tema gelap. Flutter secara otomatis mengganti tema berdasarkan pengaturan sistem perangkat.

ThemeData: skema warna

ThemeData mencakup primarySwatch (warna utama), colorScheme (skema warna yang diperluas Material 3), brightness (terang atau gelap), fontFamily (font default), textTheme (gaya teks), cardTheme, appBarTheme, buttonTheme, dan puluhan parameter lain untuk mengonfigurasi komponen tertentu. Gunakan colorScheme untuk Material 3 dan primarySwatch untuk Material 2.

Warna dinamis Material 3

Material 3 (Material You) mendukung warna dinamis, yang diekstrak dari wallpaper perangkat di Android 12+. Untuk mengaktifkan, atur useMaterial3: true dan gunakan colorScheme.fromSeed atau colorScheme.fromImageProvider. Warna dinamis secara otomatis menghasilkan palet harmonis dari 5 nada: primary, secondary, tertiary, neutral, dan neutralVariant.

Akses ke tema di widget

Widget apa pun dapat mengakses tema saat ini melalui Theme.of(context). Theme.of mengembalikan ThemeData, dari mana colors, textTheme, dan parameter lainnya dapat diperoleh. Untuk berlangganan perubahan tema (misalnya, saat beralih antara terang dan gelap), gunakan konteks di dalam metode build — Flutter secara otomatis membangun ulang widget saat tema berubah.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Contoh teks bertema",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Dalam contoh ini, Theme.of(context) mendapatkan tema saat ini dari MaterialApp terdekat. Warna latar belakang dan gaya teks secara otomatis sesuai dengan tema saat ini (terang atau gelap). Saat tema diganti, Container dan Text dibangun ulang dengan nilai baru dari ThemeData yang diperbarui.

Routing dan navigasi di MaterialApp

MaterialApp mengintegrasikan Navigator — navigator tumpukan yang mengelola transisi antar layar. Parameter initialRoute, routes, dan onGenerateRoute menentukan bagaimana Flutter memproses navigasi. Navigator.push dan Navigator.pushReplacement memungkinkan perpindahan layar secara terprogram, dan Navigator.pop — kembali ke layar sebelumnya.

Rute bernama (routes)

Parameter routes menerima Map, di mana kuncinya adalah nama rute (string), dan nilainya adalah fungsi yang membuat widget untuk layar. Rute bernama berguna untuk navigasi statis: '/' (rute root) biasanya sesuai dengan home, '/settings', '/profile' — layar lainnya. Navigator.pushNamed(context, '/settings') menavigasi ke layar pengaturan.

Pembuatan rute (onGenerateRoute)

onGenerateRoute — adalah fungsi yang dipanggil ketika rute tidak ditemukan di routes. Fungsi ini menerima RouteSettings dan mengembalikan MaterialPageRoute. Pendekatan ini berguna untuk navigasi dinamis, ketika rute bergantung pada data (misalnya, /user/42). onGenerateRoute menguraikan nama rute, mengekstrak parameter, dan membuat layar yang sesuai.

Tautan dalam dan named routing

Untuk mendukung tautan dalam (deep links), gunakan parameter onGenerateInitialRoute dan onGenerateRoute bersama-sama. Tautan dalam memungkinkan membuka layar tertentu aplikasi melalui URL (misalnya, https://example.com/promo). Flutter memproses tautan dalam di Android (melalui intent filters) dan iOS (melalui universal links) dan meneruskan jalur ke onGenerateRoute.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

Dalam contoh ini, onGenerateRoute memproses rute dinamis dengan format /user/42. Jika rute tidak ditemukan di routes statis dan tidak cocok dengan pola dinamis, Flutter menampilkan halaman kesalahan yang dapat dikonfigurasi melalui onUnknownRoute.

Lokalisasi dan internasionalisasi

MaterialApp menyediakan dukungan lokalisasi bawaan melalui parameter localizationsDelegates dan supportedLocales. LocalizationsDelegates memuat string yang dilokalisasi, dan supportedLocales menentukan bahasa apa yang didukung aplikasi. Flutter secara otomatis mendeteksi bahasa perangkat dan memuat sumber daya yang dilokalisasi sesuai.

Konfigurasi supportedLocales dan localizationsDelegates

Parameter supportedLocales menerima daftar Locale yang didukung aplikasi: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — daftar delegasi yang memuat string yang dilokalisasi. Untuk Material Design, tambahkan GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, dan GlobalCupertinoLocalizations.delegate.

Lokalisasi string aplikasi

Untuk melokalisasi string Anda sendiri, gunakan kelas AppLocalizations yang dibuat melalui flutter_localizations atau paket intl. AppLocalizations menyediakan metode statis untuk mengakses string yang dilokalisasi: AppLocalizations.of(context)!.helloMessage. MaterialApp secara otomatis meneruskan Localizations ke Widget Tree, membuatnya dapat diakses melalui konteks.

• flutter_localizations — paket resmi untuk lokalisasi widget Material dan string sistem.
• intl — paket untuk internasionalisasi: pemformatan angka, tanggal, mata uang, dan pluralisasi.
• File ARB — format penyimpanan string yang dilokalisasi yang digunakan oleh flutter_localizations dan intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter menyediakan tiga widget root untuk platform berbeda: MaterialApp (Material Design untuk Android dan web), CupertinoApp (gaya iOS), dan WidgetsApp (widget dasar tanpa gaya). Pilihan widget root menentukan tampilan seluruh aplikasi dan ketersediaan komponen platform.

MaterialApp: pilihan universal

MaterialApp cocok untuk sebagian besar aplikasi berkat dukungan Material Design yang terlihat bagus di Android, web, dan desktop. Material Design menyediakan pustaka komponen yang kaya: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog, dan banyak lainnya. MaterialApp juga mendukung Material 3 dengan warna dinamis.

CupertinoApp: gaya iOS

CupertinoApp menggunakan Cupertino Design sesuai dengan Human Interface Guidelines dari Apple. Ini menyediakan CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar, dan komponen bergaya iOS lainnya. Gunakan CupertinoApp untuk aplikasi iOS atau aplikasi yang mengikuti gaya Apple di semua platform.

WidgetsApp: root minimal

WidgetsApp — adalah widget root dasar tanpa gaya. Ini menambahkan Navigator, MediaQuery, dan Localizations, tetapi tidak menyediakan tema atau komponen Material/Cupertino. WidgetsApp cocok untuk sistem desain kustom, game, atau aplikasi dengan gaya sendiri di mana Material atau Cupertino berlebihan.