Flutter navigation drawer, navigate push while retaining banner ads

Question

How to retain banner ads in Flutter Navigation Drawer while navigating?

In Android Studio Native I can set the banner at MainActivity, hence Fragments navigation does not reload banner ads.

How do you achieve this in Flutter?

Navigator.of(context).push(MaterialPageRoute<void>(builder: (context) => const SecondScreen()));

This will create a new Screen and banner ads gone missing.

home.dart

    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(''),
        ),
        body: SafeArea(
            child: Stack(children: [
          const Center(),
          // TODO: Display a banner when ready
          if (_isBannerAdReady)
            Align(
              alignment: Alignment.bottomCenter,
              child: SizedBox(
                width: _bannerAd.size.width.toDouble(),
                height: _bannerAd.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd),
              ),
            ),
        ])),
        drawer: NavBar());
  }

nav_bar.dart

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

  @override
  _NavBarState createState() => _NavBarState();
}
Widget build(BuildContext context) {
    return Drawer(
      elevation: 10.0,
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
                color: Colors.grey.shade500
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                const CircleAvatar(
                  radius: 40.0,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const <Widget>[
                    Text('',
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          fontSize: 25.0
                      ),
                    ),
                    SizedBox(height: 10.0),
                    Text('',
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          fontSize: 14.0
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
          ListTile(
            leading: const Icon(Icons.home),
            title: Text('Home ', style: _biggerFont),
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).push(
                  MaterialPageRoute<void>(builder: (context) => const HomeScreen())
              );
            },
          ),
          const Divider(height: 3.0),
          ListTile(
            leading: const Icon(Icons.warning),
            title: Text('2nd Tab', style: _biggerFont),
            onTap: () {
              // Here you can give your route to navigate
              Navigator.of(context).pop();
              Navigator.of(context).push(MaterialPageRoute<void>(builder: (context) => const SecondScreen()));
            },
          ),
          
        ],
      ),
    );
  }

Here are my screens:

Screen 1

Screen 2

Screen 3

Answer 1

You can not retain a banner ads that was coded at home page in your Second screen. It is because in second screen the widget is not there. As you are navigating to a different page, it is has completely different widgets. To show ads in all your pages in your app, you have to code separately in every page to show your ads.