Integration of AdMob in Flutter with Banner, Interstitial, and Rewarded Ads, and monetizing a Flutter app with ads is a popular and effective way to generate revenue, and Google AdMob is one of the best platforms to implement this. With AdMob, you can easily display Banner, Interstitial, and Rewarded ads on both Android and iOS using a single Flutter codebase.
1. What is AdMob?
Before diving into the code, let’s quickly go over what AdMob is and how it helps you monetize your Flutter apps.
AdMob is Google’s advertising platform that allows you to display a variety of ad formats in your app. Whether you’re looking to show ads in your app’s UI or create an engaging user experience with rewarded content, AdMob makes it easy to monetize your app while keeping users engaged.
2. Setting Up AdMob for Your Flutter App
To get started with AdMob in your Flutter app, you first need to set up your AdMob account and link it with your app.
Step 1: Create an AdMob Account
-
Visit the AdMob website and sign in with your Google account.
-
Create a new account or use an existing one to add your app.
-
Add your app and set up ad units for each format (Banner, Interstitial, Rewarded).
Step 2: Add the AdMob Flutter Plugin
In your Flutter project, add the google_mobile_ads plugin to your pubspec.yaml file. This plugin allows you to access AdMob’s APIs in your Flutter app.
dependencies:
flutter:
sdk: flutter
google_mobile_ads: ^6.0.0
Then, run flutter pub get to install the dependency.
Step 3: Update iOS and Android Configuration
-
For Android, update the
AndroidManifest.xmlwith your AdMob App ID. It’s typically located atandroid/app/src/main/AndroidManifest.xml.
<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>
- For iOS, you need to add the AdMob App ID in your
Info.plistfile (found inios/Runner/Info.plist):<key>GADApplicationIdentifier</key> <string>ca-app-pub-xxxxxxxxxx~yyyyyyyyyy</string>
3. Initialize AdMob SDK
Initialize AdMob in your main.dart before running the app:
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
This ensures the SDK is ready to handle ad requests.
4. Create Helper Class
A helper class that stores all ad unit IDs for each platform
import 'dart:io';
// all this unit Id is tesing id
class AdHelper {
static String get bannerAdUnitId {
if (Platform.isAndroid) {
return 'ca-app-pub-3940256099942544/6300978111';
} else if (Platform.isIOS) {
return 'ca-app-pub-3940256099942544/2934735716';
} else {
throw UnsupportedError("Unsupported palatfomr");
}
}
static String get interstitialAdUnitId {
if (Platform.isAndroid) {
return 'ca-app-pub-3940256099942544/1033173712';
} else if (Platform.isIOS) {
return 'ca-app-pub-3940256099942544/4411468910';
} else {
throw UnsupportedError('Unsupported platform');
}
}
static String get rewardedAdUnitId {
if (Platform.isAndroid) {
return 'ca-app-pub-3940256099942544/5224354917';
} else if (Platform.isIOS) {
return 'ca-app-pub-3940256099942544/1712485313';
} else {
throw UnsupportedError('Unsupported platform');
}
}
}
5. Integrating Banner Ads
Banner ads are small, rectangular ads displayed at the top or bottom, or any area of the screen.
Step 1: Load Banner Ads
First, you need to initialize the GoogleMobileAds SDK and create a BannerAd widget.
// for banner ad
BannerAd? _bannerAd;
void _loadBannerAd() {
BannerAd(
size: AdSize.banner,
adUnitId: AdHelper.bannerAdUnitId,
listener: BannerAdListener(
onAdLoaded: (ad) {
setState(() {
_bannerAd = ad as BannerAd;
});
},
onAdFailedToLoad: (ad, error) {
print("Faile to load banner ad: ${error.message}");
ad.dispose();
},
),
request: AdRequest(),
).load();
}
@override
void initState() {
_loadBannerAd();
super.initState();
}
Step 2: Display Banner Ads
Once the ad is loaded, you can display it using a BannerAd widget.
if (_bannerAd != null)
SizedBox(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
6. Integrating Interstitial Ads
Interstitial ads are full-screen ads that cover the entire screen and are typically shown at natural transition points (e.g., between app screens).
Step 1: Load Interstitial Ads
InterstitialAd? _interstitialAd;
void _loadinterstitialAd() {
InterstitialAd.load(
adUnitId: AdHelper.interstitialAdUnitId,
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (ad) {
_interstitialAd = ad;
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
ad.dispose();
_loadinterstitialAd();
},
onAdFailedToShowFullScreenContent: (ad, error) {
ad.dispose();
_loadinterstitialAd();
},
);
},
onAdFailedToLoad: (error) {
print("Filed to load ad:${error.message}");
},
),
request: AdRequest(),
);
}
@override
void initState() {
_loadinterstitialAd();
super.initState();
}
Step 2: Display Interstitial Ads
floatingActionButton: FloatingActionButton(
onPressed: () {
_interstitialAd?.show();
},
child: Icon(Icons.add),
),
7. Integrating Rewarded Ads
Rewarded ads are interactive ads where users can earn rewards (e.g., in-game currency or extra content) by watching the ad.
Step 1: Load Rewarded Ads
RewardedAd? _rewardedAd;
@override
void initState() {
_loadRewareddAd();
super.initState();
}
void _loadRewareddAd() {
RewardedAd.load(
adUnitId: AdHelper.rewardedAdUnitId,
rewardedAdLoadCallback: RewardedAdLoadCallback(
onAdLoaded: (ad) {
_rewardedAd = ad;
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
ad.dispose();
_loadRewareddAd();
},
onAdFailedToShowFullScreenContent: (ad, error) {
ad.dispose();
_loadRewareddAd();
},
);
},
onAdFailedToLoad: (error) {
print("Filed to load ad:${error.message}");
},
),
request: AdRequest(),
);
}
Step 2: Display Interstitial Ads
Center(
child: ElevatedButton(
onPressed: () {
_rewardedAd?.show(
onUserEarnedReward: (ad, rewared) {
print(
"User earned rewared : ${rewared.amount} ${rewared.type}",
);
},
);
},
child: Text("Wtch ad for Rewared"),
),
),
8. Conclusion
Integrating AdMob into your Flutter app can be a great way to monetize your application, and with Flutter’s flexibility, you can easily integrate various ad formats, including banner, interstitial, and rewarded ads. Remember to follow best practices for a smooth user experience and start earning revenue from your app today.
