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,
        ),
      ],
    ),

    );
  }
}

Solution

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.

Comments

[Islam TALBI]

Thank you so much can I change it's colour , shape ...

[Abhishek Doshi]

Yes, there is a param called decoration.

[Islam TALBI]

Thank you so much , is there any detailed tutorial on how to use it please ?

[Abhishek Doshi]

Couldn't find any tutorial but here's the example: pub.dev/packages/persistent_bottom_nav_bar/example

[Abhishek Doshi]

If this solves your issue. Feel free to upvote the answer too

[Islam TALBI]

I approved the answer but since am new to stack overflow I am unable to vote

[Islam TALBI]

Hello thank you for your answer , that's what I am doing , but I don't know how I can call my homepage in all my pages since i'am using PageView widget in the body of my homepage to display pages in navbar routes , how can I call it in all the pages ? Thank you for your help

[Dev Hingu]

Hey @IslamTALBI, First of all don't need to use PageView widget in the body. You just need to call homepage file into main file and inside homepage we use list of screen and shows this list in body so in this screen list bottom navigation bar remains constant and call in all pages which you will use in inside list screen.