Halo teman – taman, pernah g sih lihat aplikasi yang mana di NavigationBottomBar nya, bukannya tampil sebagai page di Icon yang kita klik melainkan berpindah sebagai page yang berbeda. Contohnya saja pada aplikasi e-money seperti DANA, saat kita klik menu History di NavigationBottomBar nya kita akan di alihkan ke page yang berbeda.

Nah, kali ini kita akan membuat agar di saat NavigationBottomBar yang kita klik berpindah ke page yang berbeda.
Pertama kita membutuhkan beberap file berikut :

Untuk file nav_bottom_bar.dart umumnya akan seperti ini

class PageNavBottomBar extends StatefulWidget {
  @override
  _PageNavBottomBarState createState() => _PageNavBottomBarState();
}

class _PageNavBottomBarState extends State<PageNavBottomBar> {
  int page = 0;

  var _listPage = [
    Page1(),
    Page2(),
    Page3(),
  ];

  void Tap(int index) {
    setState(() {
      page = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _listPage[page],
      bottomNavigationBar: BottomAppBar(
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
          ),
          unselectedLabelStyle: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          backgroundColor: Colors.white,
          unselectedItemColor: Color(0xff727272),
          selectedItemColor: Colors.black,
          onTap: Tap,
          currentIndex: page,
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.home_sharp,
                // color: Color(0xff3d3d3d),
              ),
              label: 'Page 1',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.view_compact_outlined,
                // color: Color(0xff3d3d3d),
              ),
              label: 'Page 2',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.volunteer_activism,
                // color: Color(0xff3d3d3d),
              ),
              label: 'Page 3',
            ),
          ],
        ),
      ),
    );
  }
}

Sehingga saat dijalankan akan tampil seperti berikut :

Sekarang kita akan membuat pada page 2 akan berpindah sebagai page baru, kita hanya perlu memasukkan _ listPage ke dalam initState(){} seperti berikut :

var _listPage = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _listPage = [
      Page1(),
      Page2(),
      Page3(),
    ];
  }

Selanjutnya kita akan mengganti fungsi onTap di dalam BottomAppBar menjadi seperti berikut :

onTap: (index) {
            if (index == 1) {
              Navigator.push(
                  context, MaterialPageRoute(builder: (_) => Page2()));
            } else {
              Tap(index);
            }
          },

Jika sudah, maka dapat kita jalankan kembali dan saat menekan pada BottomBar Page 2, maka akan berpindah sebagai page yang berbeda, tetapi kita akan tetap berada di posisi NavigationBottomBar terakhir.
Berikut untuk hasilnya :