Flutter | Membuat bottom navigation bar

Oke pada tulisan kemarin kita sudah membuat form login, selanjutnya setelah kita berhasil login, kita akan diarahkan kehalaman Home.dart, pada halaman ini kita akan membuat bottom navigation yang tujuannya untuk menavigasi kita ke antar halaman.

Pada halaman home kemarin kita hanya menuliskan kata Hello world yang terletak di tengah halaman, Home.dart ini akan kita gunakan sebagai base layout, jadi Home.dart ini memegang bottom navigation

Agar lebih memudahkan dalam melihat class yang akan digunakan, sebaiknya kita tambahkan direktori dengan nama terserah kalian, saya memberi nama navigation hehe, caranya dengan :

Klik kanan pada direktori lib -> new -> package -> beri nama sesuai keinginan kalian

Jika sudah buat file dart juga dengan naman bebas pada package yang baru kalian buat, saya memberi nama file dart ini layout_navbar.dart

Kemudian buat lah class dengan meng-extend statefulWidget dengan cara berikut :

class LayoutNavigationBar extends StatefulWidget {
 @override
 _LayoutNavigationBarState createState() => _LayoutNavigationBarState();
 
 }
class _LayoutNavigationBarState extends State<LayoutNavigationBar> {
}

Jika error tambahkan override daam Class _LayoutNavigationBarState, dan return MaterialApp dan base layout, jika sudah tidak ada yang error tambahkan kode berikut :

bottomNavigationBar: BottomNavigationBar(
  currentIndex: 0,
  items: [
    BottomNavigationBarItem(
      icon: new Icon(Icons.dashboard),
      label: 'ini menu 1'
    ),
    BottomNavigationBarItem(
        icon: new Icon(Icons.dashboard),
        label: 'ini menu 2'
    ),
    BottomNavigationBarItem(
        icon: new Icon(Icons.dashboard),
        label: 'ini menu 3'
    ),
  ],
),

diletakkan didalam body ya, dan di bungkus oleh Scaffold. Jika sudah Kembali ke home.dart dan kita import file navigation dengan nama layout_navbar ini ke home dan kita panggil seperti pada kode dibawah ini :

import 'package:flutter/material.dart';
import 'package:belajar/navigation/layout_navbar.dart';
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: LayoutNavigationBar(),
      ),
    );
  }
}

jika sudah kita coba jalankan :

Dan hasilnya seperti itu, hanya saja kita belum dapat berpindah antara tab-tab yang ada pada bottom navigation bar karena index kita masih 0, selanjutnya kita akan menambahkan index supaya kita bisa berpindah antar tab, Kembali ke class LayoutNavigation bar dan tambahkan kode berikut :

int _currentIndex = 0;
final List<Widget> _children = [];

lalu buat satu method void dengan nama terserah anda, namun saya memberi nama onBarTapped, didalam class LayoutNavigationBar, method onBarTapped ini nantinya akan dipanggil didalam property bottomNavigationBar, untuk kode onBarTapped dapat di copy dari kode dibawah :

void onBarTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}

lalu tambahkan property onTap didalam properties bottomNavigation bar dengan nilai onBarTapped seperti kode dibawah ini :

onTap ini bisa diibaratkan sebagai onClickListener kalai menggunakan native android, property ini yang mendengarkan inputan dari user dan dimana user menekan, lalu pada property currentIndex nilainya ganti menjadi _currentIndex yang telah kita buat sebelumnya seperti gambar dibawah ini :

Nah jika sudah sampai pada tahap diatas kita lanjutkan dengan buat package baru lagi, saya beri nama menu karena package ini berisi class class yang akan mengisi tab tab pada navigation bari, untuk membuat package dapat dengan cara klik kanan pada folder lib -> new -> package -> nama_package

Sehingga strukturnya menjadi seperti ini :

Jika sudah kita bisa simple text saja untuk membedakan 3 menu tersebut dengan kode berikut :

import 'package:flutter/material.dart';
class MenuSatu extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('INI MENU PERTAMA', 
            style: TextStyle(
                fontSize: 26
            ),
          ),
        ),
      ),
    );
  }
}

jika sudah import ketiga file yang baru saja kita buat ke layout_navbar.dart, kemudian pada variabel List<Widget> kita tambahkan nama nama classnya seperti pada gambar berikut :

Selanjutnya tambahkan property bodu diatas property bottomNavigationBar. Property body berisi nilai _children seperti gambar berikut :

Dan cob akita jalankan :

Dan bottom navigation bar berhasil dibuat, hore terima kasih, mohon maaf jika terdapat kata dan penjelasan yang membingungkan 😊