How to keep navigation bar when push to subpages and back to main page?

user_18594279 0
Viewed 521

screentshot In my app there are some features in home page,what I want is when direct to their sub pages and still keep the buttom navigation bar.

Code for navigation bar Below the answer

Code for parts of home page

@override
Widget build(BuildContext context) {
return new MaterialApp(
    home: new Scaffold( resizeToAvoidBottomInset:false,
    body: SlidingUpPanel(
        body: Center(
          child:Container(
            constraints: BoxConstraints.expand(),
            margin: const EdgeInsets.only(top:23),
            child: Column(
              children: [
             .....
             Container(
              width: 730,
              height: 190,
              alignment:Alignment.center,
              child:Wrap(
                 children: <Widget>[
                 //...otherFiveFeatures...//
                    OutlinedButton(
                    onPressed:()async{
                        var nav = await Navigator.of(context).pushNamed('/routerMobileScannerPage');
                        if(nav==true||nav==null)
                        {Navigator.of(context).pushNamedAndRemoveUntil('/routerHomePage',(Route<dynamic>route)=>false);
                        }
                      },

                    ),
         
                 
                ],
              ),
            )

              ],
            ),
          ),
        ),
      collapsed: Container(),
      panel: Center(),
      ),

   )
 );

}

flutter-navigation flutter
2 Answers

Code for buttom navigation bar

class PageCTRLWidget extends State<statePageCTRLWidget> with AutomaticKeepAliveClientMixin{
  @override
 bool get wantKeepAlive => true;
 int currentIndex=0;
 final screens=[
 stateHomePageWidget(),
 Center(child: Text('Categories',style: TextStyle(fontSize: 45),),),
 Center(child: Text('Assistant',style: TextStyle(fontSize: 45),),),
 stateMemberPageWidget()
];
@override
Widget build(BuildContext context) {
return Scaffold(

  body: IndexedStack(
    index: currentIndex,
    children: screens,
  ),

  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Colors.orange,
    currentIndex: currentIndex,
    onTap:(tappedIndex)=>setState(()=>currentIndex=tappedIndex),
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.menu_book_rounded),
        label: 'Categories',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.add_location_alt_rounded),
        label: 'Assistant',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.account_box_rounded),
        label: 'Member',
      )
    ],
  ),
);
}
}
user_185942790

To achieve this, you need to manage multiple widgets for a single selection index. For example, from Home Screen you want to navigate to Details screen keeping the Home tab selected, you need to manage a flag for that selection. Something like this.

Code to get widget based on selection

  Widget _getBodyWidget() {
    switch (currentIndex) {
      case 0:
        return shouldShowDetails ? DetailsView() : HomeView();
      case 1:
        return CategoriesView();
      default:
        return HomeView();
    }
  }

In the code above, there is a flag shouldShowDetails which will be assigned as true when user taps on the Details button. When user wants to come to HomeScreen, change to false.

For such scenarios, I would suggest you to use the Provider plugin. It provides us an easy way to update the widget state based on such flags.

user_82486540
Related