Halo teman – teman,
Pernah g sih, lihat ada aplikasi yang memiliki Bottom Navigation Bar, tetapi saat berpindah ke Screen/Page baru Bottom Navigation Bar nya masih tetap ada?

Nah, kali ini kita akan mempelajari bagaimana caranya agar di saat berpindah ke Screen/Page baru Bottom Navigation Bar nya tetap ada. Langkahnya tidak begitu sulit, pertama kita perlu menambahkan dependencies berikut pada pubspec.yaml

Jika sudah, pastikan setiap menambahkan dependencies ataupun ada perubahan di dalam file pubspec.yaml untuk selalu menjalankan pub get.
Semua dependencies yang di perlukan dapat di peroleh pada -> pub.dev

Selanjutnya kita membutuhkan file berikut :

Berikut untuk code file main.dart :

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageNavBottomBar(),
    );
  }
}

Pada main.dart ini kita langsung mengarahkan saat aplikasi running pertama kali akan langsung ke PageNavBottomBar().

Untuk code pada file nav_bottom_bar.dart kita akan menggunakan yang telah kita tambahkan di depencies sebelumnya yaitu widget CustomScaffold, jadi widget ini lah yang akan terus menampilkan NavBottomBar meski sudah berpindah page. Adapun untuk code nya seperti berikut :

import 'package:custom_top_navigator/custom_navigation.dart';

class PageNavBottomBar extends StatefulWidget {
  const PageNavBottomBar({Key? key}) : super(key: key);

  @override
  State<PageNavBottomBar> createState() => _PageNavBottomBarState();
}

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

  final List<Widget> _listPage = [
    PagePertama(),
    PageKedua(),
  ];

  void Tap(int value) {
    setState(() {
      currentPageIndex = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      children: _listPage,
      onItemTap: Tap,
      scaffold: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.blue,
          currentIndex: currentPageIndex,
          onTap: Tap,
          selectedItemColor: Colors.amber,
          showUnselectedLabels: true,
          unselectedItemColor: Colors.grey,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home_sharp, ),
              label: 'Page 1',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.view_compact_outlined,),
              label: 'Page 2',
            ),
          ],
        ),
      ),
    );
  }
}

Berikut code untuk file page1.dart :

class PagePertama extends StatefulWidget {
  const PagePertama({Key? key}) : super(key: key);

  @override
  _PagePertamaState createState() => _PagePertamaState();
}

class _PagePertamaState extends State<PagePertama> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      ),
      body: Container(
        child: Center(
          child: MaterialButton(
            onPressed: (){
              Navigator.push(context, MaterialPageRoute(builder: (_)=>PageSatuDua()));
            },
            color: Colors.amber,
            child: Text('Move to Page 1.2'),
          ),
        ),
      ),
    );
  }
}

File page1.2.dart :

class PageSatuDua extends StatefulWidget {
  const PageSatuDua({Key? key}) : super(key: key);

  @override
  _PageSatuDuaState createState() => _PageSatuDuaState();
}

class _PageSatuDuaState extends State<PageSatuDua> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Container(
          child: Center(
            child: Text('Page Satu Dua'),
          ),
        ),
      ),
    );
  }
}

Untuk page2.dart code nya seperti berikut :

class PageKedua extends StatefulWidget {
  const PageKedua({Key? key}) : super(key: key);

  @override
  _PageKeduaState createState() => _PageKeduaState();
}

class _PageKeduaState extends State<PageKedua> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Center(
            child: Text('Page 2'),
          ),
        ),
      ),
    );
  }
}

Berikut hasil running saat program di jalankan :