Google Banner Ad in Flutter – Complete Guide with Setup

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.


    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 –>






3. Add Following lines in your main.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

void main() {


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

State<CustomBannerAd> createState() => _CustomBannerAdState();

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

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

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

State<HomePage> createState() => _HomePageState();

class _HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
child: SizedBox(),

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!!

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *