Dalam Flutter, “navbar” adalah istilah yang umumnya merujuk pada navigation bar atau AppBar, yang merupakan komponen UI (antarmuka pengguna) yang sering digunakan di bagian atas atau bawah aplikasi untuk menampilkan judul, tombol aksi, dan menu navigasi. Ada beberapa jenis navbar yang umum digunakan dalam Flutter, tetapi pada kesempatan kali ini kita akan bahas Bottom Navbar atau bisa juga kita sebut navigation bar pada bagian bawah aplikasi, tampilannya adalah seperti ini.

Fungsi utama dari navbar di Flutter adalah untuk memfasilitasi navigasi dan interaksi pengguna di dalam aplikasi. Navbar memungkinkan pengguna untuk berpindah antar halaman atau screen dengan mudah. Ini membantu pengguna dalam menjelajahi konten atau fitur aplikasi tanpa kebingungan.

Pada berbagai tutorial, untuk menampilkan bottom navigation bar kita akan direkomendasikan untuk menggunakan widget NavigationBar yang merupakan bagian dari package Material 3. NavigationBar ini mempunyai sifat tidak persisten, yang artinya ketika kita berpindah screen maka navigation bar tersebut akan tidak tampil pada screen tersebut. Bisa dilihat pada video di bawah ini.

Menurut saya ada beberapa kelebihan dan kekurangan dari sifatnya ini yaitu,

Kelebihan: dengan menghilangkan bottom navbar, screen akan bertambah ruang kosong yang memungkinkan untuk lebih banyak menampilkan data yang diinginkan.
Kekurangan: navigasi ke screen yang lainnya akan membutuhkan langkah tambahan, seperti pada video di atas, ketika seorang pengguna sudah berada pada screen Detail Transactions dan dia ingin berpindah ke screen Home, dia perlu pecet tombol back terlebih dahulu baru ketika bottom navbar-nya sudah muncul, dia bisa pencet icon Home, sedangkan kalau bottom navbar persisten, dia bisa pencet icon Home secara langsung.

Hal ini merupakan preferensi dan menyesuaikan kebutuhan aplikasi seperti apa yang ingin teman-teman buat. Kalau memang teman-teman membutuhkan bottom navbar yang persisten, teman-teman tidak bisa menggunakan widget NavigationBar, tetapi menggunakan widget CupertinoTabBar yang merupakan bagian dari package Cupertino. Untuk cara penggunaanya teman-teman bisa merujuk ke halaman dokumentasi resminya di sini.

Hasilnya adalah seperti ini, kita bisa amati bahwa bottom navbar akan selalu persisten berada di bawah walaupun telah berpindah-pindah screen.

Untuk bisa menggunakan kombinasi Cupertino & Material kita perlu menambahkan ini pada main.dart file.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:demo/screens/navigation.dart';

void main() => runApp(const MainApp());

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      localizationsDelegates: <LocalizationsDelegate<dynamic>>[
        DefaultMaterialLocalizations.delegate,
        DefaultWidgetsLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
      ],
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: NavigationScreen(),
    );
  }
}

Karena parent widget menggunakan CupertinoApp maka ketika kita mau menggunakan widget Material kita perlu membungkus widget tersebut dengan menggunakan widget Material, seperti ini.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: Column(
          children: [...],
        ),
      ),
    );
  }
}

Semoga bermanfaat, terima kasih sudah mampir dan sampai jumpa di kesempatan yang lainnya.