native_ads 0.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

flutter_native_ads #

version

Flutter plugin for AdMob Native Ads. Compatible with Android and iOS using PlatformView.

AndroidiOS
imageimage

Getting Started #

Android #

AdMob 17 requires the App ID to be included in the AndroidManifest.xml. Failure to do so will result in a crash on launch of your app. The line should look like:

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="[ADMOB_APP_ID]"/>

where [ADMOB_APP_ID] is your App ID. You must pass the same value when you initialize the plugin in your Dart code.

iOS #

Admob 7.42.0 requires the App ID to be included in Info.plist. Failure to do so will result in a crash on launch of your app. The lines should look like:

<key>GADApplicationIdentifier</key>
<string>[ADMOB_APP_ID]</string>

where [ADMOB_APP_ID] is your App ID. You must pass the same value when you initialize the plugin in your Dart code.

And PlatformView

<key>io.flutter.embedded_views_preview</key>
<true/>

Layout #

This plugin supported custom layout. You need to create a layout file.

Android #

You can use anything if the parent is a ViewGroup. The example uses RelativeLayout.

Use com.google.android.gms.ads.formats.UnifiedNativeAdView for the parent.

image

Use com.google.android.gms.ads.formats.MediaView for MediaView.

image

  • xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.formats.UnifiedNativeAdView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/flutter_native_ad_unified_native_ad"
    ...
    
    <!-- ViewGroup -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        ...

        <com.google.android.gms.ads.formats.MediaView
            android:id="@+id/flutter_native_ad_media"
            ...

example

iOS #

Please set GADUnifiedNativeAdView for the parent.

image

Please set GADMediaView to MediaView.

image

Please set Restoration ID for View that displays attribution

image

example

Mapping Native Ads to Layout #

Need to mapping the view

Android #

Mapping by view id

ViewID
UnifiedNativeAdViewflutter_native_ad_unified_native_ad
Headlineflutter_native_ad_headline
Bodyflutter_native_ad_body
MediaViewflutter_native_ad_media
Call To Actionflutter_native_ad_call_to_action
Attributionflutter_native_ad_attribution

iOS #

Mapping by Outlet

image

Usage #

import 'package:flutter/material.dart';
import 'package:native_ads/native_ad_param.dart';
import 'package:native_ads/native_ad_view.dart';

import 'package:native_ads/native_ads.dart';

void main() {
  NativeAds.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('NativeAds example app'),
        ),
        body: Center(
          child: ListView.separated(
            itemBuilder: (context, index) {
              if (index % 10 == 0) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: double.infinity,
                    height: 320,
                    child: NativeAdView(
                      onParentViewCreated: (_) {
                      },
                      androidParam: AndroidParam()
                        ..placementId = "ca-app-pub-3940256099942544/2247696110" // test
                        ..packageName = "{{YOUR_ANDROID_APP_PACKAGE_NAME}}"
                        ..layoutName = "{{YOUR_CREATED_LAYOUT_FILE_NAME}}"
                        ..attributionText = "AD",
                      iosParam: IOSParam()
                        ..placementId = "ca-app-pub-3940256099942544/3986624511" // test
                        ..bundleId = "{{YOUR_IOS_APP_BUNDLE_ID}}"
                        ..layoutName = "{{YOUR_CREATED_LAYOUT_FILE_NAME}}"
                        ..attributionText = "SPONSORED",
                      onAdImpression: () => print("onAdImpression!!!"),
                      onAdClicked: () => print("onAdClicked!!!"),
                      onAdFailedToLoad: (Map<String, dynamic> error) => print("onAdFailedToLoad!!! $error"),
                    ),
                  ),
                );
              } else {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "this is text $index",
                    style: Theme.of(context).textTheme.body1,
                  ),
                );
              }
            },
            itemCount: 50,
            separatorBuilder: (context, _) => const Divider(),
          ),
        ),
      ),
    );
  }
}

Supported native ads fields #

  • Headline
  • Body
  • Media
  • Call To Action
  • Ad Attribution

Event callback #

Receive callbacks for some events by passing to the NativeAdView constructor

  • onAdImpression
  • onAdClicked
  • onAdFailedToLoad
  • onAdLeftApplication
  • onAdLoaded

Limitations #

This is just an initial version of the plugin. There are still some limitations:

0.2.1 #

  • Update iOS pod repo.

0.2.0 #

  • Update dependencies.
  • Flutter 1.9

0.1.0 #

  • Change flutter channel to stable.
  • Fix Android initialize.
  • Add unit test.

0.0.3 #

  • Define Swift version.

0.0.2 #

  • Minor change for Pub score.

0.0.1 #

  • Initial release.

example/README.md

native_ads_example #

Demonstrates how to use the native_ads plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  native_ads: ^0.2.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:native_ads/native_ads.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
73
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Oct 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.40 points)

48 out of 49 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test