Back navigation in AppBar when using Drawer

[S-Braeutigam]

Hi,

I would like to use the bottom navigation bar and a drawer for the case that navigation within one tab provides the back button instead of the drawer. So I have 2 tabs of which the first one has a subpage to which I can navigate:

Tab1 -> Tab1Detail Tab2

When the user is seeing Tab1 or Tab2 the drawer should be shown and when the user is on Tab1Detail the back button instead of the drawer should be shown. I checked the example code of the project, but even with that code the back button does not appear when navigating to MainScreen2 or MainScreen3. The preview yet shows on navigation to MainScreen2 that the back button appears, so I'm not sure if I'm missing something or this is not supported (anymore?).

I tried both using Navigator.of(context).pushNamed() as well as the pushNew() / pushNewScreenWithRouteSettings().

Code is from the example but trimmed down.

main.dart:

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
      return MaterialApp(title: 'StreamedUp',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: TabExample(),
     );
  }
}

TabPage:

class TabExample extends StatefulWidget {
  const TabExample({Key? key}) : super(key: key);

  @override
  _TabExampleState createState() => _TabExampleState();
}

class _TabExampleState extends State {
  late PersistentTabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PersistentTabController(initialIndex: 0);
  }

  List _buildScreens() {
    return [
      MainScreen(),
      MainScreen(),
    ];
  }

  List _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: "Home",
        activeColorPrimary: Colors.blue,
        inactiveColorPrimary: Colors.grey,
        inactiveColorSecondary: Colors.purple,
        routeAndNavigatorSettings: RouteAndNavigatorSettings(
          initialRoute: '/',
          routes: {
            '/first': (context) => MainScreen2(),
          },
        ),
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.search),
        title: ("Search"),
        activeColorPrimary: Colors.teal,
        inactiveColorPrimary: Colors.grey,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Navigation Bar Demo')),
      drawer: Drawer(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('This is the Drawer'),
            ],
          ),
        ),
      ),
      body: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(),
        hideNavigationBar: false,
        popAllScreensOnTapOfSelectedTab: true,
        itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 400),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle:
            NavBarStyle.style13, // Choose the nav bar style with this property
      ),
    );
  }
}

MainScreen:

class MainScreen extends StatelessWidget {
  const MainScreen({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigo,
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            pushNewScreenWithRouteSettings(
              context,
              settings: RouteSettings(name: '/home'),
              screen: MainScreen2(),
              pageTransitionAnimation: PageTransitionAnimation.scaleRotate,
            );
          //Alternatively tried: Navigator.pushNamed(context, '/first'), but also not working
          },
          child: Text(
            "Go to Second Screen ->",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

MainScreen2:

class MainScreen2 extends StatelessWidget {
  const MainScreen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text(
                  "Go Back to First Screen",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I also tried using the endDrawer and the solution suggested here, but it didn't work either.

[jb3rndt]

Hi, I think the AppBar with the backButton of the second screen is hidden behind the AppBar of the Scaffold in TabExample. The only solution I found for that until now is to remove the Scaffold in TabExample and put that in the MainScreen (including the Drawer). If you have different Tabs in your Application, this might require outsourcing the Drawer so you can import it in the different Tab Widgets. I hope this solution helps you. I know it is not the most elegant one...