flutter_native_admob

Description:

flutter native admob

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'
}
copied to clipboard

Add the apply plugin to the [project]/android/app/build.gradle file.

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
copied to clipboard

Add your Admob App ID.

Important: This step is required as of Google Mobile Ads SDK version 17.0.0. Failure to add this
<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>
copied to clipboard
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>
copied to clipboard

Add embeded view support:

In your app's Info.plist file, add this
<key>io.flutter.embedded_views_preview</key>
<true/>
copied to clipboard
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
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>"
)
copied to clipboard
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 ...
),
)
copied to clipboard
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,
),
],
),
),
);
}
}
copied to clipboard
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,
),
),
],
),
),
);
}
}
copied to clipboard