How to add adaptive banner ads in your flutter app using google mobile ads?

Step 1: Add google_mobile_ads and provider to your pubspec.yaml.

Step 2: Change your minSdkVersion to 19 in app’s android/app/build.gradle as shown in the image below:

Step 2

Step 3: Now add “AdMob App ID” in your project “AndroidManifest.xml” found at android/app/src/main/AndroidManifest.xml. To add create a new <meta-data/> tag and add it like this:

Step 3 - Added “AdMob App ID” to “AndroidManifest.xml”

Note: If you don’t have an “Admob App Id” for now then you can use this id provided for testingca-app-pub-3940256099942544~3347511713 .I will be using this id in the example code below so make sure to replace it with yours in your application.
Quick tip: Create an account on Admob for “Admob App Id” and then for more info go here.

Step 4: Create a new dart file in your project named “ad_state.dart” with the following code in it:

Step 4 - Manages the ads state

Step 5: Modify your “main()” function in “main.dart” like this:

Step 5 - Initializes ads on app start

Step 6: Create a new dart file in your project named “anchored_adaptive_banner_adSize.dart” with the following code in it:

Step 6 - It manages the ads orientation according device orientation

Step 7: Create a new dart file in your project named “banner_ad.dart” with the following code in it:

Step 7 - This is the ad widget we will use everywhere

Step 8: Now just use “BannerAD()” as a regular widget where ever you want to display ads. For example:

Step 8 - Here I used “BannerAD()” to place ad inside a column as its children just like a regular widget”

Result:

Result - Adaptive banner ad

Want something more?

So, as everything is working fine and you have successfully implemented adaptive ads but if you still want some more personalization to ads such as a special message when the user turns off the internet or a special message when ads get load like this:

To get this effect follow 2 extra steps:

Step 9: Add connectivity_plus to your pubspec.yaml.

Step 10: Create a new dart file in your project named “init_connectivity.dart” with the following code in it:

Step 11 - Checking internet connectivity

Step 11: Create a new dart file in your project named “banner_ad_customised.dart” with the following code in it:

Step 11 - Custom Ad widget

Step 12: Now use “BannerADCustomised()” instead of “BannerAD()” as a regular widget where ever you want to display ads.

Your adaptive ads are all set now. To play with the demo app, just clone this always up-to-date repository.

You can also read this article on my blog here as it supports code highlighting.

Thanks for reading this article.