This guide is intended for publishers who want to monetize a Flutter app.
Integrating the Google Mobile Ads SDK into a Flutter app, which you will do here, is the first step towards displaying AdMob ads and earning revenue. Once the integration is complete, you can choose an ad format to get detailed implementation steps.
The Google Mobile Ads SDK for Flutter currently supports loading and displaying banner, interstitial (full-screen), native, and rewarded ads.
Prerequisites
- Flutter 1.22.0 or higher
- Android
- Android Studio 3.2 or higher
- Target Android API level 20 or higher
- Set
compileSdkVersion
to 28 or higher
- iOS
- Latest version of Xcode with enabled command-line tools
- Recommended: Create an AdMob account and register an Android and/or iOS app
Import the Mobile Ads SDK
- Include the Google Mobile Ads SDK for Flutter plugin in your Flutter project.
Platform specific setup
Android
Update AndroidManifest.xml
The AdMob app ID must be included in the AndroidManifest.xml
. Failure to
do so results in a crash on app launch.
Add the AdMob app ID, as identified in the AdMob web
interface, to the app's
android/app/src/main/AndroidManifest.xml
file by adding a <meta-data>
tag
with the name com.google.android.gms.ads.APPLICATION_ID
. For
android:value
, insert your own AdMob app ID in quotes as shown:
<manifest>
<application>
<!-- 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"/>
<application>
<manifest>
Use the same value
when you initialize the plugin in your Dart code.
See the Android
guide for more
information about configuring AndroidManifest.xml
and setting up the app
ID.
iOS
Update Info.plist
In your app's ios/Runner/Info.plist
file, add a GADApplicationIdentifier
key with a string value of your AdMob app ID, as identified in the AdMob web
interface:
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>
You must pass the same value when you initialize the plugin in your Dart code.
See the iOS guide for more
information about configuring Info.plist
and setting up your app ID.
Initialize the Mobile Ads SDK
Before loading ads, have your app initialize the Mobile Ads SDK by calling
MobileAds.instance.initialize()
which initializes the SDK and returns a
Future
that finishes once initialization is complete, or after a 30-second
timeout. This needs to be done only once, ideally right before running the app.
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
// Load ads.
}
}
Select an ad format
After the Mobile Ads SDK is imported, you're ready to implement an ad. AdMob offers a number of different ad formats, so you can choose the one that best fits your app's user experience.
Banner
Rectangular ads that appear at the top or bottom of the device screen. Banner ads stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.
Interstitial
Full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as in between levels of a game or just after completing a task.
Native
Customizable ads that match the look and feel of your app. You decide how and where they're placed, so the layout is more consistent with your app's design.
Rewarded
Ads that reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users.