项目作者: sakebook

项目描述 :
Show AdMob Native Ads use PlatformView
高级语言: Dart
项目地址: git://github.com/sakebook/flutter_native_ads.git
创建时间: 2019-08-27T09:09:48Z
项目社区:https://github.com/sakebook/flutter_native_ads

开源协议:Apache License 2.0

下载


flutter_native_ads

version

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

Android iOS
image image

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:

  1. <meta-data
  2. android:name="com.google.android.gms.ads.APPLICATION_ID"
  3. 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:

  1. <key>GADApplicationIdentifier</key>
  2. <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

  1. <key>io.flutter.embedded_views_preview</key>
  2. <true></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 ConstraintLayout.

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

image

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

image

  • xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <com.google.android.gms.ads.formats.UnifiedNativeAdView
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:id="@+id/flutter_native_ad_unified_native_ad"
  6. ...
  7. <!-- ViewGroup -->
  8. <androidx.constraintlayout.widget.ConstraintLayout
  9. android:id="@+id/relativeLayout"
  10. android:layout_width="match_parent"
  11. android:layout_height="match_parent">
  12. ...
  13. <com.google.android.gms.ads.formats.MediaView
  14. android:id="@+id/flutter_native_ad_media"
  15. ...

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

View ID
UnifiedNativeAdView flutter_native_ad_unified_native_ad
Headline flutter_native_ad_headline
Body flutter_native_ad_body
Call To Action flutter_native_ad_call_to_action
Attribution flutter_native_ad_attribution
MediaView flutter_native_ad_media
Icon flutter_naitve_ad_icon
Star rating flutter_naitve_ad_star
Store flutter_naitve_ad_store
Price flutter_naitve_ad_price
Advertiser flutter_naitve_ad_advertiser

iOS

Mapping by Outlet

image

Usage

  1. import 'package:flutter/material.dart';
  2. import 'package:native_ads/native_ad_param.dart';
  3. import 'package:native_ads/native_ad_view.dart';
  4. import 'package:native_ads/native_ads.dart';
  5. void main() {
  6. WidgetsFlutterBinding.ensureInitialized();
  7. NativeAds.initialize();
  8. runApp(MyApp());
  9. }
  10. class MyApp extends StatelessWidget {
  11. @override
  12. Widget build(BuildContext context) {
  13. return MaterialApp(
  14. home: Scaffold(
  15. appBar: AppBar(
  16. title: const Text('NativeAds example app'),
  17. ),
  18. body: Center(
  19. child: ListView.separated(
  20. itemBuilder: (context, index) {
  21. if (index % 10 == 0) {
  22. return Padding(
  23. padding: const EdgeInsets.all(8.0),
  24. child: SizedBox(
  25. width: double.infinity,
  26. height: 320,
  27. child: NativeAdView(
  28. onParentViewCreated: (_) {
  29. },
  30. androidParam: AndroidParam()
  31. ..placementId = "ca-app-pub-3940256099942544/2247696110" // test
  32. ..packageName = "{{YOUR_ANDROID_APP_PACKAGE_NAME}}"
  33. ..layoutName = "{{YOUR_CREATED_LAYOUT_FILE_NAME}}"
  34. ..attributionText = "AD"
  35. ..testDevices = ["{{YOUR_TEST_DEVICE_IDS}}"],
  36. iosParam: IOSParam()
  37. ..placementId = "ca-app-pub-3940256099942544/3986624511" // test
  38. ..bundleId = "{{YOUR_IOS_APP_BUNDLE_ID}}"
  39. ..layoutName = "{{YOUR_CREATED_LAYOUT_FILE_NAME}}"
  40. ..attributionText = "SPONSORED"
  41. ..testDevices = ["{{YOUR_TEST_DEVICE_IDS}}"],
  42. onAdImpression: () => print("onAdImpression!!!"),
  43. onAdClicked: () => print("onAdClicked!!!"),
  44. onAdFailedToLoad: (Map<String, dynamic> error) => print("onAdFailedToLoad!!! $error"),
  45. ),
  46. ),
  47. );
  48. } else {
  49. return Padding(
  50. padding: const EdgeInsets.all(8.0),
  51. child: Text(
  52. "this is text $index",
  53. style: Theme.of(context).textTheme.body1,
  54. ),
  55. );
  56. }
  57. },
  58. itemCount: 50,
  59. separatorBuilder: (context, _) => const Divider(),
  60. ),
  61. ),
  62. ),
  63. );
  64. }
  65. }

Supported native ads fields

  • Headline(Required)
  • Body(Required)
  • Call To Action(Required)
  • Ad Attribution(Required)
  • Media
  • Icon
  • Star rating
  • Store
  • Price
  • Advertiser

Event callback

Receive callbacks for some events by passing to the NativeAdView constructor

  • onAdImpression
  • onAdClicked
  • onAdFailedToLoad
  • onAdLeftApplication
  • onAdLoaded

Reference

Limitations

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