AppBar & TabBar

Analogi: Papan Nama Toko dan Etalase Bertingkat

Setiap toko punya papan nama di atas pintu: nama toko, dan mungkin ikon keranjang atau pencarian di sisinya. Di dalam toko, ada sekat antar bagian: makanan di rak kiri, minuman di rak kanan, dan kamu berpindah cukup dengan melangkah. AppBar adalah "papan nama" aplikasimu: bar di paling atas berisi judul dan tombol aksi. TabBar adalah "sekat antar bagian": deretan tab yang bisa digeser untuk berpindah konten tanpa ganti halaman. Keduanya membuat pengguna selalu tahu mereka sedang di mana dan bisa ke mana.

Kenapa AppBar dan TabBar Itu Ada?

Tanpa bar atas yang baku, setiap layar aplikasi akan menaruh judul dan tombol di posisi berbeda-beda, pengguna harus mencari-cari tombol kembali atau pencarian di setiap halaman. Flutter menyelesaikannya lewat Scaffold: ia menyediakan slot khusus appBar yang selalu tampil di posisi yang sama dengan gaya Material yang konsisten (termasuk tombol kembali otomatis saat halaman di-push). TabBar menjawab kebutuhan berbeda: menampilkan beberapa kategori konten dalam satu layar, seperti tab "Makanan" dan "Minuman" di aplikasi pesan antar, tanpa harus bolak-balik membuka halaman baru.

Contoh 1: AppBar dengan Aksi

Scaffold(
  appBar: AppBar(
    title: const Text('Toko Saya'),
    centerTitle: true,
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        tooltip: 'Cari',
        onPressed: () {},
      ),
      IconButton(
        icon: const Icon(Icons.shopping_cart),
        tooltip: 'Keranjang',
        onPressed: () {},
      ),
    ],
  ),
  body: const Center(child: Text('Isi halaman')),
)

title biasanya Text, tapi bisa diisi widget apa pun (misalnya logo). actions adalah daftar tombol di kanan bar, umumnya IconButton. Kalau halaman ini dibuka lewat Navigator.push, Flutter otomatis menambahkan tombol kembali di kiri tanpa kamu menulis kode tambahan.

Catatan teknis: AppBar juga punya properti leading untuk mengganti tombol kiri default, dan backgroundColor untuk warna bar. Tapi untuk konsistensi, biarkan warna mengikuti tema aplikasi kecuali ada alasan desain yang kuat.

Contoh 2: Halaman Bertab yang Realistis

Untuk konten bertab, bungkus Scaffold dengan DefaultTabController. Ia mengatur tab mana yang aktif dan menyinkronkan TabBar dengan TabBarView:

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Menu Warung'),
      bottom: const TabBar(
        tabs: [
          Tab(icon: Icon(Icons.coffee), text: 'Minuman'),
          Tab(icon: Icon(Icons.rice_bowl), text: 'Makanan'),
          Tab(icon: Icon(Icons.cake), text: 'Snack'),
        ],
      ),
    ),
    body: const TabBarView(
      children: [
        Center(child: Text('Daftar minuman')),
        Center(child: Text('Daftar makanan')),
        Center(child: Text('Daftar snack')),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.add),
    ),
  ),
)

TabBar ditaruh di bottom: milik AppBar sehingga tab menempel tepat di bawah judul, sedangkan TabBarView di body menampilkan konten sesuai tab aktif dan bisa digeser dengan swipe. Tab bisa berisi teks saja, ikon saja, atau keduanya.

Kapan TabBar, Kapan BottomNavigationBar?

Pemula sering bingung memilih. Aturannya sederhana: pakai TabBar kalau tab-tabnya adalah kategori dari satu topik yang sama (misalnya kategori menu dalam halaman Menu). Pakai BottomNavigationBar kalau setiap tab adalah halaman utama yang berbeda (Beranda, Cari, Profil). TabBar hidup di dalam satu halaman, BottomNavigationBar berpindah antar halaman.

Kesalahan Umum Pemula

1. Jumlah tab tidak cocok dengan length dan TabBarView

// SALAH: length 2 tapi ada 3 tab -> aplikasi crash saat dibuka
DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: const TabBar(
        tabs: [Tab(text: 'A'), Tab(text: 'B'), Tab(text: 'C')],
      ),
    ),
    body: const TabBarView(
      children: [Text('A'), Text('B'), Text('C')],
    ),
  ),
)

// BENAR: length = jumlah tabs = jumlah children TabBarView
DefaultTabController(
  length: 3,
  // ... sisanya sama
)

Tiga angka ini wajib sama persis: length, jumlah tabs, dan jumlah children TabBarView. Kalau tidak, aplikasi langsung crash dengan error controller.

2. Menaruh TabBar di luar AppBar tanpa controller yang benar. TabBar butuh TabController, yang disediakan DefaultTabController dari widget di atasnya. Kalau kamu menaruh TabBar di body tanpa DefaultTabController yang membungkus, akan muncul error "No TabController found". Solusi: pastikan DefaultTabController membungkus seluruh Scaffold.

3. Mengisi actions dengan Icon biasa, bukan IconButton. Icon tidak bisa ditekan dan tidak punya tooltip. Tombol aksi di AppBar hampir selalu harus IconButton agar bisa ditekan dan terbaca pembaca layar.