flutter_native_admob 2.1.0+3

Flutter Android iOS

Plugin to integrate Firebase Native Admob to Flutter application. Both iOS and Android supported

pub package

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 #

  1. 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'
}
  1. Add the apply plugin to the [project]/android/app/build.gradle file.
// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'
  1. 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>

Setup iOS project #

  1. 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>
  1. 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.

PropertyDescriptionType
adUnitIDYour ad unit ID to loadString
numberAdsNumber of ads to loadInt
loadingA widget to show when the ad is loadingWidget
errorA widget to show when the ad got errorWidget
optionsNative ad styling optionsNativeAdmobOptions
typeNative ad type (banner or full)NativeAdmobType.full
controllerController for controlling the NativeAdmob widgetNativeAdmobController

NativeAdmobOptions

PropertyDescriptionTypeDefault value
showMediaContentWhether to show the media content or notbooltrue
ratingColorRating star colorColorColors.yellow
adLabelTextStyleThe ad label on the top left cornerNativeTextStylefontSize: 12, color: Colors.white, backgroundColor: Color(0xFFFFCC66)
headlineTextStyleThe ad headline titleNativeTextStylefontSize: 16, color: Colors.black
advertiserTextStyleIdentifies the advertiser. For example, the advertiser’s name or visible URL. (below headline)NativeTextStylefontSize: 14, color: Colors.black
bodyTextStyleThe ad descriptionNativeTextStylefontSize: 12, color: Colors.grey
storeTextStyleThe app store name. For example, "App Store".NativeTextStylefontSize: 12, color: Colors.black
priceTextStyleString representation of the app's price.NativeTextStylefontSize: 12, color: Colors.black
callToActionStyleText that encourages user to take some action with the ad. For example "Install".NativeTextStylefontSize: 15, color: Colors.white, backgroundColor: Color(0xFF4CBE99)

NativeTextStyle

PropertyDescriptionType
fontSizeText font sizedouble
colorText colorColor
backgroundColorBackground colorColor
isVisibleWhether to show or notbool

NativeAdmobController

Property/FunctionDescriptionType
stateChangedStream that notify each time the loading state changedStream
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(ListAdd 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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
63
likes
75
pub points
92%
popularity

Plugin to integrate Firebase Native Admob to Flutter application. Both iOS and Android supported

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

dduy.duong@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_native_admob