Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan membuat fitur bottom navigation pada flutter. Ayo ikuti pembahasannya di bawah ini.

Untuk membuat bottom navigation bar di flutter cukup mudah. Kali ini saya juga akan menjelaskan bagaimana cara membuat indicator bar, jadi nantinya menu yang diklik akan memiliki warna yang berbeda. Selain itu kita juga akan belajar cara menampilkan content yang berbeda setiap klik menu yang berbeda pula.

Ok, sebelum kita masuk tutorial, saya sudah memiliki beberapa tutorial flutter seru yang kalian bisa pelajari secara mendiri atau bisa dijadikan cheatsheet. Berikut beberap link tutorialnnya.

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Membuat Bottom Navigation Bar di Flutter

1. Buatlah sebuah project flutter baru dengan nama bebas. Pada tutorial ini saya sudah menggunakan flutter versi null safety.

2. Buka main.dart lalu ikuti scriptnya seperti di bawah ini. Untuk penjelasan sudah saya sertakan di dalamnya.

    

    import 'package:flutter/material.dart';

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Bottom Navigation',
          home: Home(),
        );
      }
    }
    
    class Home extends StatefulWidget {
      const Home({Key? key}) : super(key: key);
    
      @override
      State<Home> createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
    
      //inisialisasi variabel
      int _currentIndex = 0;
      String _currentMenu = 'Home';
    
      //metod ini akan dijalankna saat diklik
      void _changeSelectedNavBar(int index) {
        setState(() {
          _currentIndex = index;
    
          if (index == 0) {
            _currentMenu = 'Home';
          }else if(index == 1){
            _currentMenu = 'Order';
          }else if(index == 2){
            _currentMenu = 'Inbox';
          }else if(index == 3){
            _currentMenu = 'Account';
          }
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Bottom Navigation"),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Menu yang Aktif",
                  style: TextStyle(fontSize: 20),
                ),
                SizedBox(height: 5,),
                Text(
                  "Index: "+_currentIndex.toString(),
                  style: TextStyle(fontSize: 20),
                ),
                SizedBox(height: 5,),
                Text(
                  "Menu: "+_currentMenu,
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ),
          //membuat bottom navigation
          bottomNavigationBar: BottomNavigationBar(
    
            //membuat item navigasi
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home'
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.assignment),
                label: 'Order'
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.mail),
                label: 'Inbox'
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Account'
              ),
            ],
    
            //currentindex mengikuti baris item bottom navigasi yang diklik
            currentIndex: _currentIndex,
    
            //warna saat item diklik
            selectedItemColor: Colors.blue,
    
            //metode yang dijalankan saat ditap
            onTap: _changeSelectedNavBar,
    
            //agar bottom navigation tidak bergerak saat diklik
            type: BottomNavigationBarType.fixed,
          ),
        );
      }
    }

3. Buka emulator dan jalankan projectnya. Jika berhasil maka tampilannya tampak seperti gambar di bawah ini.

Hasil Akhir

Ok, sekian tutorial flutter kali ini tentang cara membuat bottom navigation bar di flutter. Semoga bermanfaat. Jika ada kesulitan atau kebingungan silahkan tanya langsung di kolom komentar atau tanya langsung di fanspage sahretech.