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.
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).
Ad formats describe the way ads will look in your app. Examples include Banner Ads, Interstitial Ads, Rewarded Ads, and Native Ads.
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.
First, navigate to the Admob website and log in.
Simply click on NEXT: CREATE AD UNIT
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.
First, navigate to the Firebase website and log in.
Important Note: It is best practice to set up Google Analytics for your AdMob Project. It helps you monetize more intelligently.
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”.
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.
6. Add your package name/bundle id in Firebase Console.
Now, you will see that your new AdMob project is successfully linked to Firebase.
You will need the google-services.json file the GoogleService-Info.plist file.
Great! You've completed all the project creations and configurations.
Now, let's walk through how to use the Firebase-AdMob library and how to integrate Firebase AdMob into your Flutter project.
1. pubspec.yaml
Now, run this command.
Project Name → android → main → AndroidManifest.xml
Add the below snippet inside the application tag.
Project Name → iOS → Runner → info.plist file
Add the below snippet in dict tag.
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.
Initialize the AdMob plugin with an AdMob App ID in stateful widget’s initState.
Show the ads 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.
A plugin for Flutter that supports loading and displaying banner, interstitial (full-screen), and rewarded video ads…
If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Thanks 😄
Reach out to us to discuss building a custom app for your company. We'll get back to you within 24 business hours.