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?

CodePudding user response：

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(),
    );

CodePudding user response：

Create another dart file and add this code

import 'package:google_mobile_ads/google_mobile_ads.dart'; 
  
 late BannerAd bannerAd; 

  
 loadBanner() { 
   bannerAd = BannerAd( 
     adUnitId: BannerAd.testAdUnitId, 
     size: AdSize.fullBanner, 
     request: const AdRequest(), 
     listener: BannerAdListener( 
       // Called when an ad is successfully received. 
       onAdLoaded: (Ad ad) => print('Ad loaded.'), 
       // Called when an ad request failed. 
       onAdFailedToLoad: (Ad ad, LoadAdError error) { 
         // Dispose the ad here to free resources. 
         ad.dispose(); 
         print('Ad failed to load: $error'); 
       }, 
       // Called when an ad opens an overlay that covers the screen. 
       onAdOpened: (Ad ad) => print('Ad opened.'), 
       // Called when an ad removes an overlay that covers the screen. 
       onAdClosed: (Ad ad) => print('Ad closed.'), 
       // Called when an impression occurs on the ad. 
       onAdImpression: (Ad ad) => print('Ad impression.'), 
     ), 
   )..load(); 
 }

Call the loadBanner once and this bannerAd is available in all classes since it's defined in the root