Google Banner Ad in Flutter - Complete Guide with Setup • codefittings.com

Spread the love

Google Banner Ads

Implementing google ads in flutter is quite easy now as google has provided powerful library for implementing google ads in our application and make revenue from it. To implement google banner ad in your project, follow this article and make sure that you do all steps same as I shown in this article.

We will be implementing google banner ads in two parts

1. Setting up our app to show google ads.

2. Show google ads.

You can also see this Youtube video for better understanding:

1. Setup App to show Google Ads

1. Run below command with flutter to add google_mobile_ads in you project:

$ flutter pub add google_mobile_ads

1. Add following under dependencies in your project’s pubspec.yaml file.

dependencies:

google_mobile_ads : ^1.0.0

Now, run flutter pub get

2. Now we have to make some changes in our app level build.gradle file

compileSdkVersion 31

defaultConfig {

applicationId “com.example.googleAds”

minSdkVersion 19

targetSdkVersion 31

multiDexEnabled true

versionCode flutterVersionCode.toInteger()

versionName flutterVersionName

}

Make sure that you have compileSdkVersion 28 or higher and minSdkVersion 19 or higher.

3. Add AdMob ID in AndroidMenifest file.

<!– Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 –>

<meta-data

android:name=”com.google.android.gms.ads.APPLICATION_ID”

android:value=”ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy”/>

3. Add Following lines in your main.dart

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

Now Almost all setup is Done. It’s time to use this in our code to show Ads.

2. Show Google Banner Ads

Make a new Dart file named as CustomBannerAd.dart and add following code into it.

import 'package:flutter/material.dart';
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class CustomBannerAd extends StatefulWidget {
  const CustomBannerAd({Key key}) : super(key: key);

  @override
  State<CustomBannerAd> createState() => _CustomBannerAdState();
}

class _CustomBannerAdState extends State<CustomBannerAd> {
  BannerAd bannerAd;
  bool isBannerAdLoaded = false;

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    bannerAd = BannerAd(
      size: AdSize.banner,
      adUnitId: "ca-app-pub-3940256099942544/6300978111",
      listener: BannerAdListener(onAdFailedToLoad: (ad, error) {
        print("Ad Failed to Load");
        ad.dispose();
      }, onAdLoaded: (ad) {
        print("Ad Loaded");
        setState(() {
          isBannerAdLoaded = true;
        });
      }),
      request: const AdRequest(),
    );
    bannerAd.load();
  }

  @override
  Widget build(BuildContext context) {
    return isBannerAdLoaded
        ? SizedBox(
            width: double.infinity,
            height: 50,
            child: AdWidget(
              ad: bannerAd,
            ),
          )
        : SizedBox();
  }
}

Now you can call CustomBannerAd() anywhere in project by just importing this file and you are good to go.

For E.g. I want to show Banner ad in my Home Page, then i will do something like this:

import 'package:flutter/material.dart';

import 'CustomBannerAd.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: SizedBox(),
          ),
          CustomBannerAd(),
        ],
      ),
    );
  }
}

Now, we have successfully integrated Google Banner Ad in our Flutter Application. If you have any errors then comment section is for you only. Thank you for paying attention to me. Happy Coding!!