Mengenal Widget MaterialApp

MaterialApp

Pemrograman Bergerak Flutter

Sebelumnya di artikel Struktur Dasar Projek dan Mengenal Jenis Widget sudah ada pembahasan sedikit tentang MaterialApp(). Di bagian ini, kita akan bahas lebih spesifik terkait widget ini dan fungsi dalam flutter.

Secara utuh kode projek flutter setelah dihapus komentarnya terlihat

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Hapus semua widget class stateless dan stateful

Menjadi

Hanya menyisakan pondasi aplikasi, yaitu import dan main

Coba bawahnya kita ketikkan widget stateless ( bisa dengan shortcut, ketik stl kemudian tekan bersamaan CTRL + Spasi )

Pilih yang "Flutter Stateless Widget" [ Enter ]

Ubah nama class dengan MyApp

Menyesuaikan dengan yang ada dalam main()

Coba jalankan

Hasilnya akan kosong dengan tanda silang

Ini terjadi karena belum ada kerangka aplikasi / dasar pondasinya. Untuk menambahkan pondasi, pada bagian return const Placeholder(); ganti dengan MaterialApp()

Bila dijalankan, tanda silang sudah tidak ada

Widget MaterialApp() sebagai kerangka memiliki beberapa properti yang wajib digunakan. Daftar dari properti dari widget ini bisa dilihat daftarnya dengan tekan bersamaan CTRL + Spasi

Dari sekian properti, satu properti yang digunakan untuk mengisi kerangka, yaitu home.

Properti ini bisa diisi dengan class yang di extends dengan widget Stateful/Stateless maupun dengan widget Scaffold() langsung.

Langsung widget Scaffold()

Dengan deklarasi widget Stateful/Stateless

🔊 Info

Bagaimana kalau saya tidak menggunakan MaterialApp(), langsung menggunakan Scaffold() atau widget Stateful/less ?

Ini akan menyebabkan galat/error aplikasi

Karena secara logis belum ada tempat untuk menyimpan tetapi sudah ada barang-barang atau kegiatan di luar lingkup.

Sama saja kerangka rumah tidak ada. Namun sudah melakukan dekorasi, membuat ruang-ruang, menyimpan barang bahkan melakukan kegiatan di lokasi tersebut. Aneh bukan ? 😀

Jadi, penggunaan MaterialApp() merupakan KEWAJIBAN!

Bila dipaksa tanpa MaterialApp(), hasilnya

Dengan keterangan error

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building Scaffold(dirty, state: ScaffoldState#6007b(tickers:
tracking 3 tickers)):
No Directionality widget found.
Scaffold widgets require a Directionality widget ancestor.
The specific widget that could not find a Directionality ancestor was:
Scaffold
The ownership chain for the affected widget is: "Scaffold ← DashboardDigiNow ← MyApp ←
_FocusInheritedScope ← _FocusScopeWithExternalFocusNode ← _FocusInheritedScope ← Focus ←
FocusTraversalGroup ← MediaQuery ← _MediaQueryFromView ← ⋯"
Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the
top of your application widget tree. It determines the ambient reading direction and is used, for
example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve
EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.