Persisting google Banner Ad on bottom navigation bar in all Screens - flutter

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

Answer 2

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