flutter_native_admob
Plugin to integrate Firebase Native Admob to Flutter application Platform supported: iOS, Android
Getting Started
For help getting started with Flutter, view our online documentation.
Setup Android project
- Add the classpath to the [project]/android/build.gradle file.
dependencies {
// Example existing classpath
classpath 'com.android.tools.build:gradle:3.2.1'
// Add the google services classpath
classpath 'com.google.gms:google-services:4.3.0'
}
- Add the apply plugin to the [project]/android/app/build.gradle file.
// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
- Add your Admob App ID.
Important: This step is required as of Google Mobile Ads SDK version 17.0.0. Failure to add this tag results in a crash with the message: The Google Mobile Ads SDK was initialized incorrectly.
<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>
Setup iOS project
- Add Admob App ID:
Important: This step is required as of Google Mobile Ads SDK version 7.42.0. Failure to add add this Info.plist entry results in a crash with the message: The Google Mobile Ads SDK was initialized incorrectly.
In your app's Info.plist file, add a GADApplicationIdentifier key with a string value of your AdMob app ID. You can find your App ID in the AdMob UI.
You can make this change programmatically:
<key>GADApplicationIdentifier</key>
<string>Your_Admob_App_ID</string>
- Add embeded view support:
In your app's Info.plist file, add this
<key>io.flutter.embedded_views_preview</key>
<true/>
How it works
NativeAdmob is a Flutter widget, so you can add it anywhere in Flutter application.
| Property | Description | Type |
|---|---|---|
| adUnitID | Your ad unit ID to load | String |
| numberAds | Number of ads to load | Int |
| loading | A widget to show when the ad is loading | Widget |
| error | A widget to show when the ad got error | Widget |
| options | Native ad styling options | NativeAdmobOptions |
| type | Native ad type (banner or full) | NativeAdmobType.full |
| controller | Controller for controlling the NativeAdmob widget | NativeAdmobController |
NativeAdmobOptions
| Property | Description | Type | Default value |
|---|---|---|---|
| showMediaContent | Whether to show the media content or not | bool | true |
| ratingColor | Rating star color | Color | Colors.yellow |
| adLabelTextStyle | The ad label on the top left corner | NativeTextStyle | fontSize: 12, color: Colors.white, backgroundColor: Color(0xFFFFCC66) |
| headlineTextStyle | The ad headline title | NativeTextStyle | fontSize: 16, color: Colors.black |
| advertiserTextStyle | Identifies the advertiser. For example, the advertiser’s name or visible URL. (below headline) | NativeTextStyle | fontSize: 14, color: Colors.black |
| bodyTextStyle | The ad description | NativeTextStyle | fontSize: 12, color: Colors.grey |
| storeTextStyle | The app store name. For example, "App Store". | NativeTextStyle | fontSize: 12, color: Colors.black |
| priceTextStyle | String representation of the app's price. | NativeTextStyle | fontSize: 12, color: Colors.black |
| callToActionStyle | Text that encourages user to take some action with the ad. For example "Install". | NativeTextStyle | fontSize: 15, color: Colors.white, backgroundColor: Color(0xFF4CBE99) |
NativeTextStyle
| Property | Description | Type |
|---|---|---|
| fontSize | Text font size | double |
| color | Text color | Color |
| backgroundColor | Background color | Color |
| isVisible | Whether to show or not | bool |
NativeAdmobController
| Property/Function | Description | Type |
|---|---|---|
| stateChanged | Stream that notify each time the loading state changed | Stream |
| void setAdUnitID(String adUnitID) | Change the ad unit ID, it will load the ad again if the id is changed from previous | |
| void reloadAd({bool forceRefresh = false, int numberAds = 1}) | Reload the ad with optionals number of ads | |
| void setTestDeviceIds(List ids) | Add your test devices | |
| void setNonPersonalizedAds(bool nonPersAds) | Set the option to disable the personalized Ads. AdMob default option: personalized |
Examples
Default
NativeAdmob(
adUnitID: "<Your ad unit ID>"
)
Using controller, loading, error widget, type and options
final _controller = NativeAdmobController();
// Optional: enter your test device ids here
_controller.setTestDeviceIds([
"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY"
]);
// Optional: Set the option to disable the personalized Ads. AdMob default option: personalized
_controller.setNonPersonalizedAds(true);
NativeAdmob(
adUnitID: "<Your ad unit ID>",
loading: Center(child: CircularProgressIndicator()),
error: Text("Failed to load the ad"),
controller: _controller,
type: NativeAdmobType.full,
options: NativeAdmobOptions(
ratingColor: Colors.red,
// Others ...
),
)
Hide the ad until it load completed
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_native_admob/flutter_native_admob.dart';
import 'package:flutter_native_admob/native_admob_controller.dart';
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
static const _adUnitID = "<Your ad unit ID>";
final _nativeAdController = NativeAdmobController();
double _height = 0;
StreamSubscription _subscription;
@override
void initState() {
_subscription = _nativeAdController.stateChanged.listen(_onStateChanged);
super.initState();
}
@override
void dispose() {
_subscription.cancel();
_nativeAdController.dispose();
super.dispose();
}
void _onStateChanged(AdLoadState state) {
switch (state) {
case AdLoadState.loading:
setState(() {
_height = 0;
});
break;
case AdLoadState.loadCompleted:
setState(() {
_height = 330;
});
break;
default:
break;
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: ListView(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
height: _height,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(bottom: 20.0),
child: NativeAdmob(
// Your ad unit id
adUnitID: _adUnitID,
controller: _nativeAdController,
// Don't show loading widget when in loading state
loading: Container(),
),
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
],
),
),
);
}
}
Prevent ad from reloading on ListView/GridView
When putting NativeAdmob in ListView/GridView, it will keep reloading as the PlatformView init again when scrolling to the item. To prevent from reloading and take full control of the NativeAdmob, we can create NativeAdmobController and keep it
import 'package:flutter/material.dart';
import 'package:flutter_native_admob/flutter_native_admob.dart';
import 'package:flutter_native_admob/native_admob_controller.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
static const _adUnitID = "<Your ad unit ID>";
final _controller = NativeAdmobController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: ListView(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
height: 330,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(bottom: 20.0),
child: NativeAdmob(
adUnitID: _adUnitID,
controller: _controller,
),
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
height: 200.0,
color: Colors.green,
),
Container(
height: 330,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(bottom: 20.0),
child: NativeAdmob(
adUnitID: _adUnitID,
controller: _controller,
),
),
],
),
),
);
}
}
![[2.0.0] NativeAdmobOptions is not overriding theme](https://avatars.githubusercontent.com/u/7039967?v=4)
418 Dec 3, 2022
81 Dec 12, 2022
8 May 13, 2020
0 Apr 4, 2022
14 Jul 11, 2022
4 Nov 26, 2022
2.3k Dec 31, 2022
6 Dec 4, 2022
106 Dec 16, 2022
50 Mar 23, 2022
4 Feb 3, 2022
18 Nov 28, 2022
2 Apr 7, 2022
2 Nov 25, 2022
215 Nov 20, 2022
1 Dec 28, 2021
6 Nov 21, 2022
0 Apr 28, 2022
3 Aug 7, 2022