Flutter MaterialApp

View Categories

Flutter MaterialApp

MaterialApp adalah class atau widget bawaan pada Flutter yang biasanya menjadi komponen utama atau inti dari aplikasi Flutter. Widget MaterialApp merupakan pembungkus dari widget Material lainnya, sehingga kita dapat mengakses semua komponen dan widget lain yang disediakan oleh SDK Flutter seperti Text, DropdownButton, AppBar, Scaffold, ListView, StatelessWidget, StatefulWidget, IconButton, TextField, Padding, ThemeData, dan lainnya. Selain itu, dengan menggunakan class MaterialApp, kita dapat mengakses banyak widget lainnya yang dapat digunakan untuk membuat aplikasi yang menarik dan mengikuti panduan Material Design.

Constructor dari Class MaterialApp

const MaterialApp(
{Key key,
GlobalKey navigatorKey,
Widget home,
Map<String, WidgetBuilder> routes: const <String, WidgetBuilder>{},
String initialRoute,
RouteFactory onGenerateRoute,
InitialRouteListFactory onGenerateInitialRoutes,
RouteFactory onUnknownRoute,
List navigatorObservers: const [],
TransitionBuilder builder,
String title: '',
GenerateAppTitle onGenerateTitle,
Color color,
ThemeData theme,
ThemeData darkTheme,
ThemeData highContrastTheme,
ThemeData highContrastDarkTheme,
ThemeMode themeMode: ThemeMode.system,
Locale locale,
Iterable localizationsDelegates,
LocaleListResolutionCallback localeListResolutionCallback,
LocaleResolutionCallback localeResolutionCallback,
Iterable supportedLocales: const [Locale('en', 'US')],
bool debugShowMaterialGrid: false,
bool showPerformanceOverlay: false,
bool checkerboardRasterCacheImages: false,
bool checkerboardOffscreenLayers: false,
bool showSemanticsDebugger: false,
bool debugShowCheckedModeBanner: true,
Map<LogicalKeySet, Intent> shortcuts,
Map<Type, Action> actions}
)

Properti dari Class MaterialApp 

Widget MaterialApp merupakan salah satu widget utama di Flutter yang digunakan untuk membuat aplikasi dengan Material Design. Beberapa properti yang terdapat pada widget MaterialApp adalah sebagai berikut:

  • action: Properti ini menerima object Map<Type, Action<Intent>> yang mengontrol intent keys.
  • backButtonDispatcher: Properti ini menentukan bagaimana mengatasi tombol kembali (back button).
  • checkerboardRasterCacheImage: Properti ini menerima object boolean. Jika diatur ke true, maka akan menampilkan “checkerboarding” (papan catur) pada gambar cache raster.
  • color: Properti ini mengontrol warna utama yang digunakan dalam aplikasi.
  • darkTheme: Properti ini menyediakan data tema untuk tema gelap untuk aplikasi.
  • debugShowCheckedModeBanner: Properti ini menerima object boolean untuk menentukan apakah menampilkan banner debug atau tidak.
  • debugShowMaterialGird: Properti ini menerima object boolean. Jika diatur ke true, maka akan menampilkan grid dasar dari material app.
  • highContrastDarkTheme: Properti ini menyediakan data tema untuk tema kontras tinggi.
  • home: Properti ini menerima object widget untuk ditampilkan pada rute default aplikasi.
  • initialRoute: Properti ini menerima object string untuk memberi nama rute pertama di mana navigator dibangun.
  • locale: Properti ini mengontrol pengaturan lokal/bahasa untuk MaterialApp.
  • localizationsDelegate: Properti ini menyediakan delegasi untuk pengaturan lokal/bahasa.
  • navigatorObserver: Properti ini menerima object GlobalKey<NavigatorState> untuk menghasilkan kunci saat membangun navigator.
  • onGenerateInitialRoutes: Properti ini menerima object InitialRouteListFactory typedef untuk menghasilkan rute awal.
  • onGenerateRoute: Properti ini menerima object RouteFactory dan digunakan saat aplikasi dinavigasi ke rute bernama.
  • onGenerateTitle: Sifat ini menerima object RouteFactory typedef untuk menghasilkan judul string untuk aplikasi jika disediakan.
  • onUnknownRoute: Properti onUnknownRoute mengambil object RouteFactory typedef untuk memberikan rute dalam kasus metode lain gagal.
  • routeInformationParse: Properti routeInformationParser menyimpan object RouteInformationParser<T> untuk mengubah informasi routing dari routeInformationProvider menjadi tipe data generik.
  • routeInformationProvider: Properti routeInformationProvider mengambil object class RouteInformationProvider. Properti ini bertanggung jawab untuk menyediakan informasi routing.
  • routeDelegate: Properti routeDelegate mengambil object RouterDelegate<T> untuk mengkonfigurasi widget yang diberikan.
  • routes: Properti routes mengambil object LogicalKeySet class untuk mengontrol routing tingkat teratas aplikasi.
  • shortcuts: Properti shortcuts mengambil object LogicalKeySet class untuk menentukan pintasan keyboard untuk aplikasi.
  • showPerformanceOverlay: Properti showPerformanceOverlay mengambil nilai boolean untuk mengaktifkan atau menonaktifkan overlay kinerja.
  • showSemantisDebugger: Properti showSemanticsDebugger mengambil nilai boolean. Jika diatur ke true, properti ini menunjukkan beberapa informasi yang dapat diakses.
  • supportedLocales: Properti supportedLocales menyimpan lokal yang digunakan dalam aplikasi dengan mengambil object Iterable<E> class.
  • theme: Properti theme mengambil object ThemeData class untuk menggambarkan tema untuk MaterialApp.
  • themeMode: Properti themeMode menyimpan object enum ThemeMode untuk memutuskan tema untuk aplikasi material.
  • title: Properti title mengambil object string untuk memutuskan deskripsi satu baris dari aplikasi untuk perangkat.
  • navigatorObservers: Properti ini menyimpan object List<NavigatorObserver> untuk membuat daftar pengamat untuk navigator.

 

Contoh:

Berikut ini adalah kode sederhana dalam bahasa Dart untuk membuat sebuah layar dengan AppBar yang memiliki judul “Nextgen Tutorial”.

import 'package:flutter/material.dart';

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

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

@override
Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Nextgen Tutorial',
	theme: ThemeData(primarySwatch: Colors.purple),
	darkTheme: ThemeData(primarySwatch: Colors.grey),
	color: Colors.amberAccent,
	supportedLocales: {const Locale('en', ' ')},
	debugShowCheckedModeBanner: false,
	home: Scaffold(
		appBar: AppBar(title: const Text('Nextgen Tutorial')),
	),
	);
}
}

Output:

Tangkapan layar aplikasi flutter yang berisi appbar dengan text nextgen tutorial

Di sini, kita dapat melihat bahwa teks yang telah ditetapkan di judul AppBar ditampilkan di bagian atas. Warna tema default yang telah didefinisikan pada kode adalah ungu, seperti yang telah kita atur sebelumnya. Fungsi runApp() akan memanggil widget NGTapp, yang mengembalikan widget MaterialApp. Widget MaterialApp menentukan tema, localization, judul, widget home, dan lain sebagainya.

Penjelasan Output :
  • import statement: Pernyataan impor digunakan untuk mengimpor pustaka yang disediakan oleh Flutter SDK. Di sini, kami telah mengimpor file ‘material.dart’ sehingga dapat menggunakan semua widget Flutter yang mengimplementasikan desain material.
  • main() function: Seperti bahasa pemrograman lainnya, kami juga memiliki fungsi utama di mana pernyataan yang akan dieksekusi saat aplikasi dimulai ditulis. Tipe pengembalian fungsi utama adalah ‘void’.
  • runApp(Widget widget) function: Fungsi runApp(Widget widget) mengambil widget sebagai argumen dan menetapkannya pada layar. Fungsi ini memberikan batasan pada widget agar sesuai dengan layar dan membuat widget yang diberikan menjadi widget root aplikasi dengan widget lain sebagai anaknya. Di sini, digunakan MaterialApp sebagai widget root di mana dalam widget root akan ditentukan widget lainnya.
  • MaterialApp() widget: Kami telah membahas MaterialApp di awal. Mari kita lihat berbagai properti dari widget MaterialApp
  • title: Properti ‘title’ digunakan untuk memberikan deskripsi singkat tentang aplikasi kepada pengguna. Ketika pengguna menekan tombol aplikasi terbaru di ponsel, teks yang diproses di judul ditampilkan.
  • theme: Properti ‘theme’ digunakan untuk memberikan tema default ke aplikasi seperti warna tema aplikasi. Untuk ini, kami menggunakan class atau widget bawaan bernama ThemeData(). Di widget ThemeData(), dapat dituliskan properti yang berbeda terkait tema. Di sini, digunakan ‘primarySwatch’ untuk menentukan warna tema default aplikasi dan memilih warna dengan menggunakan class Colors dari library material. Di ThemeData(), ditentukan beberapa properti lain seperti TextTheme, Brightness (Dapat mengaktifkan tema gelap dengan ini), AppBarTheme, dan lainnya.
  • home: Properti ‘home’ digunakan untuk rute default aplikasi, yang berarti widget yang didefinisikan di dalamnya akan ditampilkan saat aplikasi dimulai secara normal. Di sini, ditentukan widget Scaffold di dalam properti ‘home’. Di dalam Scaffold, kami mendefinisikan berbagai properti seperti appBar, body, floatingActionButton, backgroundColor, dll. Sebagai contoh, di properti ‘appBar’, digunakan widget AppBar() dan memasukkan ‘Nextgen Tutorial’ sebagai judul, yang akan ditampilkan di bagian atas aplikasi tepatnya di appbar.
  • Properti lain dalam MaterialApp() adalah ‘debugShowCheckedModeBanner’ (digunakan untuk menghapus tag debug di sudut atas), ‘darkTheme’ (untuk meminta mode gelap dalam aplikasi), ‘color’ (untuk warna primer aplikasi), ‘routes’ (untuk tabel routing aplikasi), ‘themeMode’ (untuk menentukan tema mana yang akan digunakan), dan ‘supportedLocales’ (berisi daftar bahasa yang didukung aplikasi), dan lainnya.

Kesimpulan

Dalam artikel ini, kita membahas tentang widget MaterialApp yang mengelompokkan seluruh widget Material lainnya, seperti Scaffold, AppBar, Drawer, dan sebagainya. Dengan menggunakan widget MaterialApp, Anda dapat membuat aplikasi dengan Material Design. Kami juga membahas constructor dan properti dari widget MaterialApp agar Anda dapat memahami bagaimana mencapai tampilan dan fungsi yang diinginkan dengan menggunakan widget MaterialApp di Flutter.

Tutorial sebelumnya : Flutter Scaffold
Tutorial setelahnya : Flutter Drawer
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan