Display BottomNavbar throughout the whole application instagram like

Question

I have a homepage that includes an AppBar a bottomnavbar and a body to which I pass a list of widgets (pages) I want the navbar to navigate to when I click on its icons. I want to be able to display my bottomnavbar even in pages that are not included in the list .

Example when I click on a list tile it takes me to another details page , my navbar disappears I want the whole home page (appbar, bottomnavbar,...) to be static throughout the whole app without having to call each component on its own in my pages just like instagram style.

Here's my home page

class Home extends StatefulWidget {

  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {

  @override
  Widget build(BuildContext context) {
    var pages = [
      MyQrqc(),
      NoDataUI(),

    ];
    int index = 0;
    var _appPageController = PageController();

    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar:  PreferredSize(
            preferredSize: Size.fromHeight(70.0), child: CustomAppBar()),
        body: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: PageView(
            children: pages,
            onPageChanged: (index) {
              setState(() {
                index = index;
              });
            },
            controller: _appPageController,

          ),
        ),

        bottomNavigationBar:  ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(17.0),
            topRight: Radius.circular(17.0),
          ),
          child: BottomAppBar(
            clipBehavior: Clip.antiAlias, //bottom navigation bar on scaffold
            color: Colors.transparent,
            shape: CircularNotchedRectangle(), //shape of notch
            notchMargin:
            5, //notche margin between floating button and bottom appbar
            child: Mainmenu(currentIndex: index, appPageController: _appPageController,),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          backgroundColor: kPrimaryLightColor,
          onPressed: () {

            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MyQrqc()),
            );

          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

and this is my main menu page :

import 'package:deepnrise/Screens/qrqc/mes_qrqc_view.dart';
import 'package:deepnrise/constants/colors.dart';
import 'package:deepnrise/services/auth_services.dart';
import 'package:deepnrise/utils/size_config.dart';
import 'package:flutter/material.dart';
import 'package:deepnrise/services/settings/settings_service.dart';
import 'package:flutter_svg/flutter_svg.dart';

class Mainmenu extends StatefulWidget {
  int currentIndex = 0;
  var appPageController = PageController();


  Mainmenu({Key? key, required this.currentIndex,required this.appPageController}) : super(key: key);
  @override

  CustomNavBar createState() => CustomNavBar();
}

class CustomNavBar extends State<Mainmenu> {

  @override
  Widget build(BuildContext context) {

    setBottomBarIndex(index) {
      setState(() {
        widget.currentIndex = index;
      });
      widget.appPageController.animateToPage(index,
          duration: Duration(milliseconds: 500), curve: Curves.ease);
    }

    SizeConfig.init(context);
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [kPrimaryColor, kPrimaryLightColor],
          begin: Alignment.topLeft,
          end: Alignment.topRight,
          stops: [0.1, 0.8],
          tileMode: TileMode.clamp,
        ),
      ),
      child: Wrap(
      //children inside bottom appbar

        alignment: WrapAlignment.spaceAround,

      children: <Widget>[
        const SizedBox(
          width: 30,
        ),
        IconButton(
          icon: Image.asset("assets/icons/menuIcon2.png"),
          onPressed: () {
            setBottomBarIndex(0);
          },
        ),
        const SizedBox(
          width: 20,
        ),
        IconButton(
          icon: Image.asset("assets/icons/menuIcon1.png"),
          onPressed: () {

            setBottomBarIndex(1);
          },
        ),
        const SizedBox(
          width: 50,
        ),
        IconButton(
          icon: const Icon(
            Icons.person,
            color: Colors.white,
          ),
          onPressed: () {
            setBottomBarIndex(2);

          },
        ),
        const SizedBox(
          width: 20,
        ),
        IconButton(
          icon: Image.asset("assets/icons/menuIcon3.png"),
          onPressed: () {
            setBottomBarIndex(3);

          },
        ),
        const SizedBox(
          width: 20,
        ),
      ],
    ),

    );
  }
}

Answer 1

Here, First you need to create one file for BottomNavigationBar,

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

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

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  //For changing the screen
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  //This is a screens list which you want to navigate through BottomNavigationBar
  final List<Widget> _children = [
    const HomeScreen(),
    const ProfileScreen()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 32.0,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white54,
        currentIndex: _selectedIndex,
        backgroundColor: Colors.black,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
            label: "Home",
            icon: Icon(Icons.list),
          ),
          BottomNavigationBarItem(
            label: "Profile",
            icon: Icon(Icons.person),
          ),
        ],
        onTap: _onItemTapped,
      ),
    );
  }
}

Then, You can create another screens like HomeScreen, ProfileScreen etc.

So, By using this code HomePage to be static throughout the whole app without having to call each component in any screen.

Answer 2

To show the bottom navbar on all screens, one way is to use PageView with the bottom navbar. Another way is to use persistent_bottom_nav_bar