How can i make shared appBar and bottomNavigation across flutter screens

user_5169853 0
Viewed 747

i am new to flutter and i would like to have a shared appBar and bottomNavigationBar the way i am currently using is implementing them in spearte files and importing them in each screen but i need to make one screen contains the appbar and the bottomNavigationBar and the content of the body renders diffrent views according to the routes and i can't make it at main page because the main page renders welcome screen in reactJS i was importing the header and footer and make my routes between them how can i make somthing similar in flutter

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: navBar(),
  body: SingleChildScrollView(reverse: true, child: ScanPassport()),
  bottomNavigationBar: bottomNavigation(),
    currentIndex: _selectedIndex,
    onTap: _onItemTapped,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    type: BottomNavigationBarType.fixed,
    ),
  );
 }
}
flutter-appbar flutter-navigation flutter-layout flutter
2 Answers

A couple of options:

Use MaterialApp() router. There's a tutorial here showing how to refactor your Scaffold() so you don't have duplicate code for appBar, bottomNavigationBar, etc. This is the official Flutter method for view routing.

If you need to swap out your Scaffold() body but can't change your other Scaffold() elements, you can create a widget for the body that takes a "page" value and change what it returns from build() based on the "page" value passed. The widget holding your Scaffold can be stateful and your bottom navigation bar can setState() the page number.

user_73652150

In your context, You can just have a single scaffold homepage screen after logged in success or after welcome screen (depends up app). Once you navigate to homepage, You will have appBar and bottom navigation bar at top and bottom respectively. The remaining portion at center will be your body content of the selected tab. Once you switched the tap on bottom navigation, you should change the content rather than using routes for switching the body content. The current page status will be preserved on homepage.

user_56684140
Related