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 Ad Manager 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
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 Ad Manager app ID must be included in the AndroidManifest.xml
.
Failure to do so results in a crash on app launch.
Add the Ad Manager app ID (identified in the Ad
Manager UI) 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
. You can find your app
ID in the Ad Manager UI. For android:value
insert your own Ad
Manager app ID in quotes as shown:
<manifest> <application> <!-- Sample 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 your Info.plist
In your app's ios/Runner/Info.plist
file, add a
GADApplicationIdentifier
key with a string value of your Ad Manager
app ID (identified in
the Ad Manager UI):
<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
The Mobile Ads SDK is now imported and you're ready to implement an ad. Ad Manager 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.