How to make Bottom Navigation Bar in Flutter

Hello Folks! Pada kali ini kita akan mempelajari gimana sih cara membuat Bottom Navigation Bar di Flutter. Sebelumnya udah pada tau kan apa itu Bottom Navigation Bar?

Jadi Bottom Navigation Bar adalah adalah Widget yang terdapat pada bagian bawah aplikasi yang digunakan untuk berpindah dari halaman satu ke yang lainnya. Biasanya Widget ini terdiri dari tiga sampai dengan lima komponen yang mana jika di klik akan membawa kita ke halaman laninnya. Selain itu untuk tampilan, Bottom Navigation Bar terdiri dari beberapa mode yaitu dalam bentuk label teks, icon, atau keduanya. Nah, udah pada tau kan, mari kita lanjut cara membuat Bottom Navigation Bar.

Pertama-tama

  1.  tambahkan code berikut pada file bottombar_menu.dart 
import ‘package:flutter/material.dart’;
import ‘package:flutter_tutorial/NavigationMenu/page_widget.dart’;

class PageHomeBottomMenu extends StatefulWidget {
  @override
  _PageHomeBottomMenuState createState() => _PageHomeBottomMenuState();
}

class _PageHomeBottomMenuState extends State<PageHomeBottomMenu> {
  int currentIndex = 0;

  final List<Widget> _listColorMenu = [
    PageWidget(Colors.brown),
    PageWidget(Colors.orangeAccent),
    PageWidget(Colors.white12)
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(‘Page Bottom Bar’, style: TextStyle(color: Colors.black),),
        backgroundColor: Colors.white,
      ),

      body: _listColorMenu[currentIndex],

      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        backgroundColor: Colors.white,
        currentIndex: currentIndex,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home,color: Colors.black,),
              title: Text(‘Home’)
          ),

          BottomNavigationBarItem(
              icon: Icon(Icons.message,color: Colors.black),
              title: Text(‘Message’)
          ),

          BottomNavigationBarItem(
              icon: Icon(Icons.person,color: Colors.white,),
              title: Text(‘Person’)
          )
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

Dapat kita lihat pada code diatas terdapat list yang mana list tersebut lah yang merupakan halaman-halaman yang akan ditampilkan. pada praktek kali ini kita menggunakan container saja terlebih dahulu, teman-teman bisa mengembangkannya menjadi halaman-halaman atau page aplikasi sesuai yang diinginkan. Setelah membuat List selanjutnya kita widget Bottom NavigationBar beserta item dan pada body kita panggil list yang kita tambahkan tadi. lalu deklarasikan pada properti currentIndex yang ada pada BottomNavigationBar. Dan jangan lupa untuk menambahkan method onTabTapped.

  1. Lalu untuk berpindah halaman ketika diklik kita dapat membuat file baru dan setelah itu dipanggil atau di deklarasikan pada homepage diatas. karena praktik kali ini kita hanya akan menggunakan satu file saja dan ketika berpindah halaman hanya akan menampilkan perbedaan warna pada container. Berikut kodingan untuk file page_widget.dart
import ‘package:flutter/material.dart’;

class PageWidget extends StatelessWidget {
  final Color color;

  PageWidget(this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
    );
  }
}

Output:

OK, Sekian tutorial kali ini, Semoga dapat membantu ^.^

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here