How to Show Ads in Flutter

October 8, 2020
Flutter-AdMob-and-Firebase-Logos

How to Use AdMob with Firebase Google Analytics

One of AppIt's Senior Android Developers, Sravanya Katta, recently wrote an article discussing the steps involved in showing ads in Flutter. Check out her easy, step-by-step guide for developers, below. You can also view her article on Medium.

Important Note: Before you can display ads from AdMob, you’ll need to create an AdMob account and activate one or more Ad Unit IDs.

Before you begin with Step 1, become familiar with the following key terms.

1. Ad units

Ad Units are containers you place in your apps to show ads to users. Ad units send ad requests to AdMob, then display the ads they receive to fill the request. When you create an ad unit, you assign it an ad format and ad type(s).

2. Ad format

Ad formats describe the way ads will look in your app. Examples include Banner Ads, Interstitial Ads, Rewarded Ads, and Native Ads.

3. Ad types

Ad types are the kind of ads you want to allow users to see. When an ad unit requests an ad from AdMob, it can only receive an ad that matches one of its assigned ad types. Ad types may include Text, Image & Rich Media Ads, Video Ads, and Interactive Ads.

How to Create an AdMob App ID in Google AdMob

First, navigate to the Admob website and log in.


Step 1: Click on Apps, select ADD APP.

Image for post
AdMob Home

Step 2. Select “No” When Asked if You've Published Your App.

Image for post
Publishing the App

Step 3. Enter Your Project Name & Select Your Platform (iOS or Android).

Image for post
Enter App Information

Step 4. Your Project Has Been Successfully Created! Now Add Your Ad-Unit to Your Project.

Simply click on NEXT: CREATE AD UNIT

Image for post
Confirmation App Has Been Added

Step 5. Configure Ad Unit Settings like Banner/Interstitial Ads.

Image for post
Configure Ad Unit Settings Page

Step 6. Your Ad Unit Has Been Created Successfully.

Image for post
Confirmation Ad Unit Successfully Created

How To Configure AdMob with Firebase

Google Analytics is very useful for AdMob Publishers to monetize more intelligently. Best of all, it's free. Configuring AdMob with Firebase is highly recommended, but optional for developers.

Important Note: If you use the Google Mobile Ads SDK without Firebase, your app will still get lots of AdMob’s ad formats.

Steps to create the Firebase Project

First, navigate to the Firebase website and log in.

Step 1. Name Your Project (For Example, "Flutter -Sample").

Image for post
Name Your Project

Step 2. Select Whether or Not You'd Like to Add Google Analytics to Your Project.

Important Note: It is best practice to set up Google Analytics for your AdMob Project. It helps you monetize more intelligently.

Image for post
Set Up Google Analytics Now or Later

Step 4. Configure Analytics Using Your Primary Gmail Account

Image for post
Configure Google Analytics

How to Link AdMob to Firebase Projects

Step 1: Open Your Google AdMob Account and Click the "Link to Firebase" Link.

Image for post
Link AdMob to Firebase Projects

Step 2: Add Your Project’s Package Name for Android or Bundle ID for iOS.

For Android Projects: If you are creating links for Android projects, add Package Name. This can be found in your Manifest File.

The Path for the Manifest File
Project Name → Android → app → main → AndroidManifest.xml open this file. In the first tag, you will see package=”com.flutter.xyz”.

Image for post
Add Project's Package Name

For iOS Projects: If you are creating links for iOS projects, add Bundle Identifier. This can be found in your info.plist File.

The Path for info.plist File

1. Open this project in XCode, then open info.plist and check for the bundle identifier.
2. Run this command in terminal.

3. Open ios/runner.xcworkspace.

4. Select the Runner.

5. Open the General Project Settings tab.

Image for post
Select the Runner

6. Add your package name/bundle id in Firebase Console.

Image for post
Add Package Name

Step 3: Select Your New Project in Firebase.

Image for post
Select New Project

Step 4: Click Continue.

Now, you will see that your new AdMob project is successfully linked to Firebase.

Image for post
Confirmation Your Project Has Been Successfully Linked

Step 5: Click on the Setting Icon and Download the Configuration Files.

You will need the google-services.json file  the GoogleService-Info.plist file.

Great! You've completed all the project creations and configurations.

Image for post
Download the Configuration Files

How to Integrate Firebase AdMob into a Flutter Project

Now, let's walk through how to use the Firebase-AdMob library and how to integrate Firebase AdMob into your Flutter project.

Step 1: Open Your Flutter Project and Begin to Add the Below Items.

1. pubspec.yaml

pubspec.yaml

Now, run this command.

flutter packages get command

How to Add AdMob Appld

Step 1. For Android — Open the Manifest File.

Project Name → android → main → AndroidManifest.xml
Add the below snippet inside the application tag.

Open the Manifest File

Step 2. For iOS — Open the info.plist File.

Project Name → iOS → Runner → info.plist file
Add the below snippet in dict tag.

Open the info.plist File

Now, add the downloaded google-services.json & GoogleService-Info.plist files to their respective projects (as mentioned below).

For Android: Project Name → android → app → google-services.json

For iOS: Project Name → iOS → Runner → GoogleService-Info.plist

We've now created different projects for both iOS and Android. You can get the AppID & UnitID based on the platform you are using.

Different Projects

Initialize the AdMob plugin with an AdMob App ID in stateful widget’s initState.

AdMob Plugin

Show the ads in button clicks.

Ads Shown in Button Clicks


Now, you can see the Banner Ad & Interstitial Ad in your Android/iOS app when you click the button. By following the process explained above, you can quickly and easily integrate Admob + Firebase — Google Analytics into your Flutter application.

For more details, see:

FirebaseExtended/flutterfire

A plugin for Flutter that supports loading and displaying banner, interstitial (full-screen), and rewarded video ads…

github.com

If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Thanks 😄

Let's build something awesome.

Reach out to us to discuss app development services for your company. We'll get back to you within 24 business hours.

Send us a message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.