Flutter Bottom Menu: Panduan Lengkap Membuat Navigasi Bawah di Aplikasi Flutter

Fri, March 2025 13:50:42

Navigasi adalah bagian penting dari aplikasi mobile modern, dan salah satu jenis navigasi paling populer adalah Bottom Navigation Menu. Dalam Flutter, kita bisa membuat bottom menu dengan berbagai gaya — mulai dari yang simpel bawaan hingga yang lebih stylish dan interaktif menggunakan package tambahan. Artikel ini akan membahas dua pendekatan utama: BottomNavigationBar (bawaan) dan package tambahan seperti convex_bottom_bar atau persistent_bottom_nav_bar.

1. Apa Itu Bottom Navigation Menu?

Bottom navigation menu adalah bar di bagian bawah aplikasi yang memungkinkan pengguna berpindah antar halaman dengan cepat. Biasanya terdiri dari beberapa ikon dan label teks. Contoh paling umum bisa kamu lihat di aplikasi seperti Instagram atau YouTube.

Flutter menyediakan cara bawaan dan juga paket komunitas untuk membuat navigasi ini lebih menarik.

Bagian 1: Bottom Navigation Bar Bawaan Flutter

2. Membuat Bottom Navigation Bar Dasar

Flutter sudah menyediakan widget BottomNavigationBar. Ini cara paling cepat dan simpel untuk membuat bottom menu.

2.1. Contoh Kode Dasar

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavExample(),
    );
  }
}
class BottomNavExample extends StatefulWidget {
  @override
  State<BottomNavExample> createState() => _BottomNavExampleState();
}
class _BottomNavExampleState extends State<BottomNavExample> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

2.2. Penjelasan Kode

• _currentIndex menyimpan index halaman aktif.
• onTap() memperbarui index saat tombol di-tap.
• _pages berisi halaman yang ditampilkan sesuai index.

2.3. Kustomisasi Tampilan

Kita bisa menambah warna dan efek visual di menu bawaan:

BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  selectedItemColor: Colors.green,
  unselectedItemColor: Colors.grey,
  backgroundColor: Colors.blueAccent,
  type: BottomNavigationBarType.fixed,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Favorites'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

Bagian 2: Bottom Navigation Bar dengan Package Tambahan

Untuk navigasi yang lebih keren, kita bisa pakai package dari komunitas. Dua yang populer adalah convex_bottom_bar dan persistent_bottom_nav_bar.

3. Convex Bottom Bar

convex_bottom_bar menawarkan desain melengkung dan animasi yang lebih modern.

3.1. Install package

Tambahkan ini di pubspec.yaml:

dependencies:
  convex_bottom_bar: ^3.2.0

3.2. Contoh Kode

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Convex Bottom Bar')),
        bottomNavigationBar: ConvexAppBar(
          items: [
            TabItem(icon: Icons.home, title: 'Home'),
            TabItem(icon: Icons.map, title: 'Map'),
            TabItem(icon: Icons.message, title: 'Message'),
          ],
          onTap: (int i) => print('click index=$i'),
        ),
      ),
    );
  }
}

4. Persistent Bottom Navigation Bar

persistent_bottom_nav_bar memungkinkan navigasi tetap bertahan dan lebih elegan.

4.1. Install package

Tambahkan di pubspec.yaml:

dependencies:
  persistent_bottom_nav_bar: ^5.0.2

4.2. Contoh Kode

import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavBarPersistent(),
    );
  }
}
class BottomNavBarPersistent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      screens: [HomePage(), SearchPage(), ProfilePage()],
      items: [
        PersistentBottomNavBarItem(icon: Icon(Icons.home), title: 'Home'),
        PersistentBottomNavBarItem(icon: Icon(Icons.search), title: 'Search'),
        PersistentBottomNavBarItem(icon: Icon(Icons.person), title: 'Profile'),
      ],
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Center(child: Text('Home'));
}
class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Center(child: Text('Search'));
}
class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Center(child: Text('Profile'));
}

Kesimpulan

Sekarang kamu tahu cara membuat bottom navigation menu dari yang dasar hingga yang keren. Pilih metode yang paling cocok dengan proyekmu. Selamat coding! 🚀