Scaffold: apa itu, struktur dan widget Flutter

Apa itu Scaffold di Flutter

Scaffold — widget-kompositor dari pustaka Material Design yang membentuk struktur visual dasar layar. Ia mengimplementasikan pola aplikasi Material standar: panel atas, badan layar, menu samping, dan tombol mengambang. Tidak seperti Container yang hanya mengatur ukuran dan gaya, Scaffold mengelola seluruh layar sebagai satu sistem terpadu.

Setiap aplikasi Flutter yang dibangun berdasarkan Material Design dimulai dengan MaterialApp, di dalamnya setiap layar dibungkus dalam Scaffold. Scaffold-lah yang memastikan tampilan AppBar yang benar di semua perangkat, dengan mempertimbangkan SafeArea untuk iPhone X dan yang lebih baru. Ia juga bertanggung jawab atas urutan z: Drawer ditampilkan di atas body, dan SnackBar — di atas seluruh antarmuka, tetapi di bawah jendela dialog.

Menurut Flutter API Reference (2026) resmi, Scaffold adalah kondisi wajib untuk berfungsinya widget seperti SnackBar, BottomSheet dan PersistentBottomSheet dengan benar. Tanpa Scaffold, komponen-komponen ini melempar pengecualian karena mereka bergantung pada InheritedWidget Scaffold.of untuk mengakses konteks Scaffold. Oleh karena itu, menempatkan konten apapun langsung di Container alih-alih Scaffold adalah kesalahan umum pengembang pemula yang mengakibatkan hilangnya fungsionalitas Material.

Scaffold dalam hierarki widget

Dalam aplikasi Flutter tipikal, Scaffold berada di dalam MaterialApp, biasanya di bawah WidgetsApp atau CupertinoApp dalam pengembangan lintas platform. MaterialApp membuat Navigator dan tema, sedangkan Scaffold menentukan struktur layar saat ini. Setiap layar dapat memiliki Scaffold sendiri dengan AppBar, Drawer dan BottomNavigationBar yang unik, memungkinkan penyesuaian antarmuka yang fleksibel untuk halaman tertentu.

Untuk kustomisasi mendalam, Scaffold dapat dikombinasikan dengan NestedScrollView — ini memungkinkan implementasi efek gulir yang kompleks, misalnya AppBar yang menghilang dengan efek paralaks. Namun dalam sebagian besar kasus, Scaffold standar dengan propertinya sudah cukup untuk membangun layar siap produksi.

Struktur Scaffold: bagian kunci kerangka

Scaffold terdiri dari beberapa zona wajib dan opsional, masing-masing bertanggung jawab atas bagian antarmuka tertentu. Mari kita periksa setiap bagian secara terpisah untuk memahami bagaimana mereka saling berinteraksi.

AppBar — panel atas

AppBar — panel atas layar yang menampilkan judul, tombol navigasi, dan tindakan. Ia secara otomatis mendapatkan tinggi yang benar yaitu 56dp dan mempertimbangkan SafeArea untuk perangkat dengan poni. Di AppBar dapat disematkan TabBar untuk mengganti tab menggunakan properti bottom.

Drawer — menu samping

Drawer — panel yang meluncur dari kiri dan menyediakan navigasi melalui bagian-bagian aplikasi. Scaffold secara otomatis menambahkan ikon hamburger di AppBar jika properti drawer diatur. Drawer dapat berisi DrawerHeader, ListView dengan item menu, dan informasi pengguna.

BottomNavigationBar — navigasi bawah

BottomNavigationBar — panel di bagian bawah layar untuk beralih antar bagian utama. Ini berisi 2 hingga 5 ikon dengan label dan mendukung Material 3 dengan indikasi aktif melalui NavigationBar. Scaffold menempatkannya di bagian bawah layar, secara otomatis menggeser body ke atas agar konten tidak tertutupi.

FloatingActionButton — tombol mengambang

FloatingActionButton — tombol bundar yang ditempatkan di sudut kanan bawah layar. Ini digunakan untuk tindakan utama di layar, misalnya menambahkan entri baru atau mengirim pesan. Scaffold mendukung beberapa FAB dengan animasi diperluas melalui properti extended.

Body — konten utama

Body — area pusat layar tempat konten utama ditempatkan. Sebagai body dapat berupa widget apapun: Column, ListView, GridView, Stack atau komposisi kustom. Scaffold secara otomatis menghitung tinggi body dengan mempertimbangkan AppBar, BottomNavigationBar, dan SafeArea, yang menghilangkan kebutuhan penyesuaian ukuran manual.

Properti utama Scaffold

Scaffold menyediakan lebih dari 30 properti untuk mengonfigurasi tampilan dan perilaku layar. Di antaranya ada properti wajib (body) dan opsional yang mengelola jarak, latar belakang, dan status keyboard. Memahami setiap properti membantu menyesuaikan antarmuka secara tepat sesuai kebutuhan desain.

Properti resizeToAvoidBottomInset sangat penting saat bekerja dengan formulir: ketika diatur ke true (default), Scaffold secara otomatis mengecilkan body saat keyboard muncul agar bidang input tetap terlihat. Ini menghilangkan kebutuhan untuk menulis listener keyboard kustom. Untuk skenario kustom dengan SingleChildScrollView, properti dapat dinonaktifkan.

Contoh penggunaan Scaffold dalam aplikasi

Mari kita lihat contoh praktis Scaffold dengan set lengkap komponen Material. Kode membuat layar dengan AppBar, Drawer, BottomNavigationBar, FloatingActionButton dan SnackBar — struktur khas aplikasi seluler di Flutter.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Aplikasi Saya'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Pengaturan'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Tindakan selesai')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Dalam contoh, NavigationBar dari Material 3 digunakan sebagai pengganti BottomNavigationBar yang sudah usang. Scaffold secara otomatis menghubungkan semua bagian: saat Drawer dibuka, SnackBar disembunyikan; saat tab diganti, body diperbarui; dan FloatingActionButton tetap di tempatnya. ScaffoldMessenger menjamin tampilan SnackBar bahkan dengan beberapa Scaffold dalam hierarki.

Scaffold dan Material 3: fitur konfigurasi

Material 3 (M3) — adalah evolusi Material Design, yang diperkenalkan oleh Google pada tahun 2023. Scaffold di M3 mendapat sejumlah perubahan: widget NavigationBar baru menggantikan BottomNavigationBar, dukungan Dynamic Color melalui ColorScheme.fromSeed, dan rekomendasi yang diperbarui untuk jarak dan tinggi komponen. Beralih ke M3 tidak memerlukan penggantian Scaffold — cukup perbarui tema aplikasi.

Untuk mengaktifkan Material 3 dalam proyek, Anda perlu mengatur useMaterial3: true di ThemeData. Scaffold secara otomatis menyesuaikan tampilan visual: jarak menjadi lebih besar (24dp bukan 16dp), warna dihitung ulang dari warna seed, dan FloatingActionButton mendapatkan ukuran lebih besar dengan sudut membulat. Sementara itu, semua properti Scaffold yang ada tetap berfungsi.

Menurut Material Design 3 Specification (2026), disarankan menggunakan NavigationBar dengan tiga hingga lima item daripada BottomNavigationBar. Scaffold mendukung kedua varian, tetapi NavigationBar memberikan dukungan lebih baik untuk adaptabilitas dan Material You di perangkat Pixel.

Konfigurasi Scaffold untuk Material 3

Untuk berfungsinya Scaffold dengan M3 dengan benar, cukup perbarui tema dan ganti BottomNavigationBar dengan NavigationBar. Warna akan dihitung secara otomatis melalui ColorScheme.fromSeed, dan Scaffold akan menyesuaikan jarak dengan standar baru. Jika perlu, Anda dapat menimpa backgroundColor secara langsung.