AppBar — apa itu, pengaturan dan widget Flutter

Apa itu AppBar di Flutter

AppBar — adalah komponen Material standar dari panel atas yang ditampilkan di bagian atas Scaffold. Ini berisi judul layar, tombol navigasi (biasanya ikon hamburger atau panah “Kembali”) dan tindakan — ikon yang membuka pencarian, pengaturan, atau fungsi lainnya. AppBar secara otomatis menyesuaikan dengan platform: di Android menggunakan Material bottom-shadow standar, di iOS — desain yang lebih datar dengan transparansi.

AppBar mengimplementasikan antarmuka PreferredSizeWidget, yang berarti tingginya tetap dan diketahui sebelum pembangunan. Secara default, tinggi AppBar adalah 56dp di Android dan 44dp di iOS dalam orientasi potret, dengan mempertimbangkan SafeArea di atas. Fitur ini memungkinkan Scaffold untuk menghitung terlebih dahulu ruang yang tersedia untuk body, menghindari pengomposisian ulang saat rendering.

Menurut Flutter Material Library Guide (2026), AppBar telah melalui beberapa iterasi: di Flutter 1.x adalah wadah sederhana dengan teks, di Flutter 2.x mendapat dukungan untuk Material 3 dan flexibleSpace, dan di Flutter 3.x — integrasi dengan System UI (warna bilah status, transparansi). AppBar modern mendukung Dynamic Color dari Material You pada perangkat Android 12+.

Struktur AppBar: properti dan parameter

AppBar menyediakan serangkaian parameter yang mengontrol setiap bagian dari panel atas. Memahami properti ini memungkinkan penyesuaian panel yang fleksibel untuk setiap kebutuhan desain tanpa membuat solusi khusus.

Title dan leading: pengaturan judul dan navigasi

Properti title menerima widget apa pun, tetapi yang paling sering digunakan adalah Text dengan pengaturan gaya melalui TextStyle. Untuk judul panjang, disarankan untuk membungkus title dalam Flexible agar teks terpotong dengan benar saat ruang terbatas. Properti leading secara otomatis diganti dengan BackButton saat beralih ke layar bersarang melalui Navigator.push, jika tidak ditentukan secara eksplisit.

Actions: penempatan ikon tindakan

Daftar actions berisi widget yang diratakan ke tepi kanan AppBar. Setiap elemen tidak boleh lebih lebar dari 48dp (standar Material Design). Untuk mengelompokkan tindakan, gunakan PopupMenuButton — ini menyembunyikan opsi yang kurang penting dalam menu dropdown dan mematuhi rekomendasi Material tentang kepadatan antarmuka.

Kustomisasi AppBar: gaya, warna dan perilaku

AppBar mendukung kustomisasi mendalam melalui properti warna, bayangan, dan margin. Tampilan dasar diwarisi dari tema aplikasi, tetapi setiap properti dapat diganti secara individual. Mari kita lihat skenario pengaturan utama.

Warna latar belakang AppBar diatur melalui backgroundColor. Jika tidak ditentukan, appBarTheme dari ThemeData digunakan. Di Material 3, warna AppBar dihitung secara otomatis dari ColorScheme.primary, tetapi dapat diganti untuk layar tertentu. Untuk AppBar transparan (sering digunakan di profil), atur backgroundColor: Colors.transparent dengan elevation: 0.

Properti elevation mengontrol bayangan di bawah AppBar. Nilai 0 menghilangkan bayangan, menciptakan efek panel “datar”, yang relevan untuk Material 3. Nilai 4 memberikan bayangan standar Material Design. Untuk kontrol bayangan khusus, gunakan shadowColor — warna bayangan yang memisahkan panel secara visual dari konten.

Untuk mengontrol warna teks di AppBar, gunakan foregroundColor. Properti ini memengaruhi warna judul, ikon, dan teks di actions. Saat backgroundColor diubah, foregroundColor kontras secara otomatis dipilih, tetapi dapat diatur secara paksa untuk desain non-standar.

SliverAppBar: versi animasi dari AppBar

SliverAppBar — adalah perpanjangan dari AppBar untuk digunakan di dalam CustomScrollView, yang mendukung animasi saat scroll: menciut (collapsing), efek paralaks, dan menyemat (pinned). Berbeda dengan AppBar standar, SliverAppBar adalah widget sliver dan dapat mengubah ukuran secara dinamis tergantung pada posisi scroll.

Mode utama SliverAppBar ditentukan oleh kombinasi properti pinned, floating, dan snap. Dalam mode pinned, panel selalu terlihat di bagian atas layar. Dalam mode floating, muncul saat scroll ke belakang. Kombinasi floating + snap menciptakan perilaku panel “lekat” yang muncul dengan scroll ke atas sekecil apa pun, sering digunakan di feed berita.

Menurut Flutter API SliverAppBar (2026), untuk menggunakan SliverAppBar, Anda perlu mengganti ListView atau Column biasa dengan CustomScrollView dengan widget sliver. Scaffold tetap berfungsi dengan benar, tetapi properti appBar Scaffold harus null — SliverAppBar ditempatkan di dalam CustomScrollView sebagai sliver pertama.

Contoh pengaturan AppBar di aplikasi

Mari kita lihat contoh AppBar dengan pencarian, menu dropdown, dan TabBar. Kode ini menunjukkan konfigurasi tipikal panel atas di aplikasi Flutter produksi.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalog'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Pengaturan')),
          const PopupMenuItem(value: 'about', child: Text('Tentang Aplikasi')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Dalam contoh, AppBar berisi judul terpusat, tombol pembuka Drawer di kiri, ikon pencarian, dan menu dropdown di kanan. TabBar di bottom memungkinkan perpindahan antar kategori produk. Konfigurasi ini mencakup sebagian besar skenario aplikasi seluler: navigasi, pencarian, opsi tambahan, dan perpindahan antar bagian — semuanya dalam satu panel atas.