Home > Software design >  Flutter dynamic bottom navigation bar
Flutter dynamic bottom navigation bar

Time:04-20

In my Project i have 4 screens.

Home - Help Center - Search - Profile.

In Home page: My AppBar has leading and action buttons without title and transparent.

enter image description here

In Help Center My AppBar has leading doesnt have action buttons has a title and its a custom appbar.

enter image description here

In Search Screen : Using same appbar as help center screen but has action buttons and leading.

My Question is: As you can understand in my app i using few diffrent appbars. So how can i connect that bottomNavigationBar dynamicly ? Appbars isn't same thats why i cant use bottomNavigationBar for now. So what can i do about it ? How can i make it dynamic ? Thanks for all responses!

CodePudding user response:

What do you mean by connecting bottomNavigationBar? I did not understand what your problem is completely, but if you want that bottom nav bar is common for your all pages you can use this approach:

//class variable
final _screens = [
  const Page1(),
  const Page2(),
  const Page3(),
];

//your start page
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
    children: [
      _screens[_currentIndex],
      //some code
    ],
  ),
);

And you can change _currentIndex by tapping your nav bar items. For more help you can share some code parts of your app and explanation.

  • Related