CODEWITHSUNDEEP
flutter
yug k
yug k

Reputation: 359

Add back button in App bar of tab bar in flutter

I need to add back button in app bar of tab bar view.

When you push a tab bar view controller on to the navigation stack, i am unable see a back button in app bar of tab menu. When i swipe left to right i am going to previous screen, but i am unable to see backbutton in app bar

below is how i pushing tab bar in to navigation stack

Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => TabBarScreen()),
              );


class TabBarScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
            automaticallyImplyLeading: true,

          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 3

Views: 5810

Answers (2)

Fabrizio Cacicia
Fabrizio Cacicia

Reputation: 391

Because yours TabBarScreen has a MaterialApp inside, it has its own Navigator and its own navigation stack. So, for its perspective, it is at the "first screen".

If you remove the MaterialApp widget from the widget tree you will see the back button.

This is what I mean:

class TabBarScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
          title: Text('Tabs Demo'),
          automaticallyImplyLeading: true,
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_car),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ],
        ),
      ),
    );
  }
}

Upvotes: 11

Anthony Sette
Anthony Sette

Reputation: 837

Since you are not using the Navigator linked here, there should be no back button and I can't understand why you would want one unless I am misunderstanding what you are asking.

https://api.flutter.dev/flutter/widgets/Navigator-class.html

The tabBarView is not changing the page, just the display. You are just controlling the widgets of the body. If you want there to be a back button you would need to hard code an iconButton in the appBar for specifically the second/third screen and have that button setState the selectedIndex which can then swap the widget in the body in the same manner as the tabBarView.

I am no expert but I hope this helps even a little or points you in the right direction!

Upvotes: 3

Related Questions