How to show Admob ads in your flutter app using google mobile ads sdk?

Hello fellow flutter developers, hope you all are doing great. If you are trying to integrate ads in your app and earn some bucks then this article is for you. In this article I will show you how you can integrate admob ads in flutter app step by step. Be sure to follow along till last carefully to get rid from the errors. And you can find the source code at the end of the article.

Implementing Admob ads in Flutter App

To setup admob ads in our flutter application , we are going to use google mobile ads plugin. So, lets setup this package in our app. Click Here to go to this pacakge in pub.dev. We are going to setup for android if you are doing this for ios you can follow respective documentation. Make sure that you have approved adsense acccount to show live ads or you can use test ad units to show test ads.

You will get complete source code below show don’t worry if you get any problem with the code in the middle.

Steps to implement Admob ads in Flutter app

Step 1: Add google mobile ads dependency in your project. For this go to puspec.yaml file and add this line ” google_mobile_ads: ^0.13.3 ” in the dependency section like below.

Step 2: Now Change the following things in your app level build.gradle

• Compile sdkversion 28 or higher
• Minsdkversion 19 or higher

Step 2: Now go to androidmanifest.xml file and add the following line of code like shown in the screenshot below.

 <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

If you dont have approved admob account then you can use this test app id

ca-app-pub-3940256099942544~3347511713

Make sure that your code look like this

Step 3: Now go to main.dart file import google mobile ads package and initialize the google mobile ads sdk by adding the following lines of code.

import 'package:google_mobile_ads/google_mobile_ads.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

Step 4: Now come to that particular page where you have to show ads. Make sure that widget is statefull widget. We are going to show only banner and interstial ads. Now add the following code after your app state like in the code below:

// You will get source code at the end of the filw show dont worry
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
   int maxFailedLoadAttempts = 3;
  InterstitialAd _interstitialAds;
  int _numInterstitialLoadAttempts = 0;
  BannerAd _ad;
  bool isloading;

  static final AdRequest request = AdRequest(
    keywords: <String>['foo', 'bar', 'education', 'movies', 'entertainment'],
    contentUrl: 'http://foo.com/bar.html',
    nonPersonalizedAds: true,
  );
  @override
  void initState() {
    super.initState();
    _ad = BannerAd(
        size: AdSize.banner,
        adUnitId: BannerAd.testAdUnitId,
        //TODO Replace this test adunit with real aduniut like this
        //adunitId: "ca-app-pub-15988300960666XX/8518776084"
        listener: BannerAdListener(onAdLoaded: (_) {
          setState(() {
            isloading = true;
          });
        }, onAdClosed: (error) {
          print(" Ad Failed to load $error ");
        }),
        request: AdRequest());
    _ad.load();
    _createInterstitialAd();
   
  }
   void _createInterstitialAd() {
    InterstitialAd.load(
        adUnitId: InterstitialAd.testAdUnitId,
        //TODO Replace this test adunit with real aduniut like this
        //adunitId: "ca-app-pub-15988300960666XX/8518776084"
        request: request,
        adLoadCallback: InterstitialAdLoadCallback(
          onAdLoaded: (InterstitialAd ad) {
            print('$ad loaded');
            _interstitialAds = ad;
            _numInterstitialLoadAttempts = 0;
          },
          onAdFailedToLoad: (LoadAdError error) {
            print('InterstitialAd failed to load: $error.');
            _numInterstitialLoadAttempts += 1;
            _interstitialAds = null;
            if (_numInterstitialLoadAttempts <= maxFailedLoadAttempts) {
              _createInterstitialAd();
            }
          },
        ));
  }

   void _showInterstitialAds() {
    if (_interstitialAds == null) {
      print('Warning: attempt to show interstitial before loaded.');
      return;
    }
    _interstitialAds.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (InterstitialAd ad) =>
          print('ad onAdShowedFullScreenContent.'),
      onAdDismissedFullScreenContent: (InterstitialAd ad) {
        print('$ad onAdDismissedFullScreenContent.');
        ad.dispose();
        _createInterstitialAd();
      },
      onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
        print('$ad onAdFailedToShowFullScreenContent: $error');
        ad.dispose();
        _createInterstitialAd();
      },
    );
    _interstitialAds.show();
    _interstitialAds = null;
  }
 @override
  void dispose() {
    _interstitialAds?.dispose();
    interstitialAd.dispose();

    super.dispose();
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(6, 58, 244, 1),
      // bottomNavigationBar: Container(

Step 5: We have done all setup to load the ads and make it ready so lets show these ads in the app UI.

For banner, we can show ads in the bottomnavigation bar like in the code given below.

 bottomNavigationBar: Container(
        height: MediaQuery.of(context).size.height * 0.08,
        child: AdWidget(
          ad: _ad,
        ),
      ),

For Interstial ads, We can call show interstitial ads function in the ontap method like in the code below. So, whenever somebody taps in the icon the interstial ad will be shown.

 IconButton(
              onPressed: () {
                _showInterstitialAds();
              },
              icon: Icon(Icons.ad_units)),

Results

You can see the result of the above code below. Both banner ad and interstial add is integrated successfully.

Don’t forget to replace the test ad unit with your real ad unit. Click here to view the full source code of this app in the github. And if this article helps you to integrate admob ads in your flutter app then be sure to share it in social medias.