Persisting google Banner Ad on bottom navigation bar in all Screens

Question

Am new to flutter. I am creating a flutter app involving google mobile ads. I want to implement a banner AD on the bottom navigation bar of every screen. Is there a way to implement the banner ad once on one screen (on the bottom nav bar) and persist it throughout all screens than creating instances of a banner Ad on each screen and creating a bottom navigation bar? I Am using getx for routes and here's one of my screens where I implemented the banner ad.

       class ProgrammeScreen extends StatefulWidget {
         const ProgrammeScreen({Key? key}) : super(key: key);
         static const routeName = '/ProgrammeScreen';

        @override
        State<ProgrammeScreen> createState() => _ProgrammeScreenState();
                                                     }

         class _ProgrammeScreenState extends State<ProgrammeScreen> {
         late BannerAd _bottomBannerAd1;

         bool _isBottomBannerLoaded = false;
         void createBottomBannerAd() {
         _bottomBannerAd1 = BannerAd(
         listener: BannerAdListener(onAdLoaded: (_) {
                     setState(() {
                    _isBottomBannerLoaded = true;
                                 });
                         }, onAdFailedToLoad: (ad, error) {
                            ad.dispose(); }),
                            adUnitId: bannerKey,
                            size: AdSize.banner,
                            request: const AdRequest());
                            _bottomBannerAd1.load();
                                                          }

                @override
                void initState() {
                createBottomBannerAd();
                super.initState();
                }

                @override
                void dispose() {
                _bottomBannerAd1.dispose();
                 super.dispose();
                   }

               @override
           Widget build(BuildContext context) {
              return Scaffold(
                appBar: AppBar(
                title: const Text('Programme'),
                backgroundColor: appBarColor(context),
      
                  ),
                  bottomNavigationBar: _isBottomBannerLoaded ? SizedBox(
             height: _bottomBannerAd1.size.height.toDouble(),
             width: _bottomBannerAd1.size.width.toDouble(),
             child: AdWidget(ad: _bottomBannerAd1),
                 ) : const SizedBox(),
             body: SizedBox(
              width: UIParameters.getWidth(context),
              height: UIParameters.getHeight(context),

       child: Padding(
      padding: const EdgeInsets.all(kMobileScreenPadding),
      child: Column(
        children: [
          Expanded(
            child: StreamBuilder<QuerySnapshot>(
                stream: estudieeFR.snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.hasError) {
                    return const Text('Something went wrong');
                  } else if (snapshot.hasData) {
                    return ListView.separated(
                      shrinkWrap: true,
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder: (BuildContext context, int index) {
                        final data = snapshot.data!.docs[index];
                        return ContentCard(
                          title: data['name'],
                          icon: Icons.arrow_forward_ios,
                          onPressed: () => Get.to(
                            () => YearScreen(
                                programId: snapshot.data!.docs[index].id),
                          ),
                        );
                      },
                      separatorBuilder: (BuildContext context, int index) {
                        return const Divider();
                      },
                    );
                  } else {
                    return Indicators.circularIndicator;
                  }
                }),
          )
        ],
      ),
    ),
  ),
);

} }

Heres my main.dart file with the root widget(MyApp)

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

              static final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

              @override
              Widget build(BuildContext context) {
              return GetMaterialApp(
               navigatorKey: navigatorKey,
                defaultTransition: Transition.rightToLeftWithFade,
                initialRoute: '/',
                getPages: AppRoutes.pages(),
                debugShowCheckedModeBanner: false,
 
                );
              }
             }

I don't want to copy the same code in all the stateful widgets but rather implement a single bottom navigation banner Ad that will persist all screens. Is there any way to achieve this?

Answer 1

If you do not want to write the same code in all screens, then you could make modifications in the builder function of MaterialApp to include your banner ad there as:

MaterialApp(
      builder: (BuildContext context, Widget? child) {
        return Column(
          children: [
            Expanded(child: child!),
            // your banner widget here,
          ],
        );
      },
      home: HomeScreen(),
    );