How can i make shared appBar and bottomNavigation across flutter screens

Issue

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,
    ),
  );
 }
}

Solution

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.

Answered By – Pat9RB

Answer Checked By – Timothy Miller (FlutterFixes Admin)