MaterialApp dan Scaffold: Kerangka Aplikasi

MaterialApp: akar aplikasi

Setiap aplikasi Flutter butuh satu widget root, dan untuk gaya Material Design itu adalah MaterialApp. Ia menyediakan navigasi, tema, dan localisasi untuk seluruh aplikasi.

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Kasir',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: const HalamanUtama(),
    );
  }
}

Properti penting: title untuk nama aplikasi, theme untuk gaya global, home untuk halaman pertama, dan debugShowCheckedModeBanner: false untuk menghilangkan banner DEBUG yang mengganggu saat demo.

Scaffold: kerangka tiap halaman

Scaffold adalah kerangka layout Material: app bar di atas, body di tengah, floating action button mengambang, drawer di samping, dan bottom navigation di bawah.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kasir'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {},
          ),
        ],
      ),
      body: const Center(child: Text('Isi halaman di sini')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Kapan Scaffold tidak dipakai?

Tidak semua halaman butuh Scaffold. Splash screen full-screen atau halaman onboarding custom kadang cukup memakai Container atau Stack langsung. Tapi untuk 90 persen halaman aplikasi biasa, Scaffold adalah titik awal yang benar karena ia juga menangani keyboard, safe area, dan snackbar dengan benar.

Catatan teknis: Widget seperti SnackBar, Drawer, atau showBottomSheet butuh Scaffold sebagai ancestor. Error umum "Scaffold.of() called with a context that does not contain a Scaffold" muncul saat kamu memakai context yang posisinya di atas Scaffold, misalnya context dari widget yang me-return Scaffold itu sendiri. Solusinya: bungkus body dengan Builder untuk dapat context baru, atau pindahkan widget pemanggil ke dalam body.