CODEWITHSUNDEEP
androidflutterdart
Karl Wolf
Karl Wolf

Reputation: 363

Flutter global BottomAppBar with different AppBars in each Page

I want a global BottomAppBar which I want to define in my MaterialApp.

My current MaterialApp:

return MaterialApp(
  initialRoute: '/overview',
  routes: {
    '/overview': (context) => OverViewPage(),
    '/summary': (context) => SummaryPage(),
    '/record': (context) => RecordPage(""),
    '/calendar': (context) => Calendar(),
    '/piechart': (context) => PieChartPage()
  },
  debugShowCheckedModeBanner: false,
  title: 'Flutter Demo',
  theme: lightTheme,
  home: OverViewPage(),
);

In every Route is a own Scaffold because I need to specify my AppBar actions and the FloatingActionButton individually for each page. But when I wrap the home in a Scaffold and make the body of the Scaffold to each page, I have two Scaffolds stacked in each other, which is not possible.

So basically I need an BottomAppBar in my Material App, but need to override the AppBar and the FloatingActionButton in each page.

Upvotes: 0

Views: 623

Answers (1)

Ravinder Kumar
Ravinder Kumar

Reputation: 7990

You have to have a common screen that has BottomAppBar and doesn't declare its child pages into routes, then you can declare Appbar on each of child page.

For ex,

class BottomNavigation extends StatelessWidget{

// add child pages in _widgetOptions
  static List<Widget> _widgetOptions = <Widget>[
    FeedTab(),
    ChatTab(),
    Marketplace(),
    Profile(),
  ];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Scaffold(
            body: Center(
              child: _widgetOptions.elementAt(_selectedIndex),
            ),
            bottomNavigationBar: BottomNavigationBar(
              showUnselectedLabels: true,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.menu),
                  title: Text(
                    'Feed',
                    style: tabTextStyle,
                  ),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.forum),
                  title: Text('Chat', style: tabTextStyle),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.explore),
                  title: Text('Market Place', style: tabTextStyle),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  title: Text('My Profile', style: tabTextStyle),
                ),
              ],
//        type: BottomNavigationBarType.fixed,
              currentIndex: _selectedIndex,
              unselectedItemColor: AppColors.colorHint,
              selectedItemColor: AppColors.themeColor,
              onTap: _onItemTapped,
            ),
          ),
        ),
        if (!isConnectedToInternet)
          _showInternetStatus('No Internet Connection', AppColors.colorRed),
//        if (isConnectedToInternet && isConnectionWidgetVisible)
//          _showInternetStatus('Connected to Internet', AppColors.colorGreen)
      ],
    );
  }
}

Then you can have Appbar on each page like this,

class FeedTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.person_pin),
            onPressed: () {
              Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text("My Followers Post")));
            },
          ),
.......

Upvotes: 1

Related Questions