Dart のネイティブ テンプレート
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ネイティブ テンプレートとは、ネイティブ広告として使用できるビューであり、コーディングが完成された状態で提供されるため、実装と変更を簡単に行えます。ネイティブ テンプレートを使用すると、プラグインによって Android と iOS のレイアウトが事前に作成されるため、Dart API を使用してネイティブ アセットのスタイルをカスタマイズできます。
このガイドでは、Dart API を使用して基盤となるプラットフォーム ビューのスタイルを設定し、広告をレンダリングする方法について説明します。
前提条件
常にテスト広告でテストする
アプリの開発とテストでは必ずテスト広告を使用し、配信中の実際の広告は使用しないでください。下記のネイティブ広告向けのテスト専用広告ユニット ID を使うと、テスト広告を簡単に読み込むことができます。
/21775744923/example/native
テスト広告ユニットは、すべてのリクエストに対してテスト広告を返すように設定されており、アプリのコーディング、テスト、デバッグで使用することができます。なお、この広告ユニットの ID は、アプリを公開する前に必ずご自身の広告ユニット ID に置き換えてください。
広告を読み込む
medium サイズのネイティブ テンプレートを使用してネイティブ広告を読み込む場合のサンプルを次に示します。
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final _adUnitId = '/21775744923/example/native';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
debugPrint('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
debugPrint('$NativeAd failed to load: $error');
ad.dispose();
},
),
request: const AdManagerAdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
使用可能なスタイル設定オプションについては、NativeTemplateStyle と NativeTemplateTextStyle をご覧ください。
広告をカスタマイズする
ネイティブ テンプレートを使用してネイティブ広告をカスタマイズする場合、広告の UI の設定は NativeTemplateStyle クラスに格納されます。これにより、ネイティブ広告全体に Dart コードでスタイルを適用できます。
テンプレートのサイズ
Flutter ネイティブ広告テンプレートには、TemplateType.small と TemplateType.medium の 2 種類があります。小サイズのテンプレートは、TableView や GridView、インフィード広告など、細長い形の広告ビューが必要な場所に最適です。中サイズのテンプレートは、ページビューの 1/2～3/4 のサイズでの使用が想定されており、ランディング ページやスプラッシュ ページに最適です。
| 小 |
Android
|
iOS
|
| 中 |
Android
|
iOS
|
ネイティブ広告イベント
ネイティブ広告の操作に関連するイベントについて通知を受け取るには、広告の listener プロパティを使用します。そのうえで、NativeAdListener を実装して広告イベント コールバックを受け取ります。
class NativeExampleState extends State<NativeExample> {
NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final _adUnitId = '/21775744923/example/native';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
print('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
print('$NativeAd failedToLoad: $error');
ad.dispose();
},
// Called when a click is recorded for a NativeAd.
onAdClicked: (ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (ad) {},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (ad) {},
// For iOS only. Called before dismissing a full screen view
onAdWillDismissScreen: (ad) {},
// Called when an ad receives revenue value.
onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
),
request: const AdManagerAdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
広告を表示する
NativeAd をウィジェットとして表示するには、load() を呼び出した後に、サポート対象広告で AdWidget をインスタンス化する必要があります。ウィジェットは load() を呼び出す前に作成できますが、load() はウィジェット ツリーに追加される前に呼び出す必要があります。
AdWidget は Flutter の Widget クラスから継承され、他のウィジェットと同様に使用できます。iOS では必ず、指定された幅と高さのコンテナにウィジェットを配置してください。そうしないと、広告が表示されない可能性があります。
// Small template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 90, // minimum recommended height
maxWidth: 400,
maxHeight: 200,
),
child: AdWidget(ad: _nativeAd!),
);
// Medium template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);
広告を破棄する
アクセスが不要になった NativeAd は破棄する必要があります。dispose() を呼び出すおすすめのタイミングは、ネイティブ広告に関連付けられた AdWidget がウィジェット ツリーから削除された後、または AdListener.onAdFailedToLoad() のコールバック時です。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-31 UTC。
[null,null,["最終更新日 2025-08-31 UTC。"],[[["\u003cp\u003eNative Templates offer pre-built layouts for Android and iOS, customizable through a Dart API, streamlining native ad implementation.\u003c/p\u003e\n"],["\u003cp\u003eFlutter provides two native ad template sizes, \u003ccode\u003esmall\u003c/code\u003e and \u003ccode\u003emedium\u003c/code\u003e, suitable for various ad placements, such as in-feed or landing pages.\u003c/p\u003e\n"],["\u003cp\u003eNative ad styling can be achieved using the \u003ccode\u003eNativeTemplateStyle\u003c/code\u003e and \u003ccode\u003eNativeTemplateTextStyle\u003c/code\u003e classes in Dart, offering granular control over visual elements.\u003c/p\u003e\n"],["\u003cp\u003eTo display the native ad, instantiate an \u003ccode\u003eAdWidget\u003c/code\u003e with the loaded \u003ccode\u003eNativeAd\u003c/code\u003e and place it within a \u003ccode\u003eConstrainedBox\u003c/code\u003e to define its dimensions.\u003c/p\u003e\n"],["\u003cp\u003eEnsure to dispose of the \u003ccode\u003eNativeAd\u003c/code\u003e using the \u003ccode\u003edispose()\u003c/code\u003e method when it's no longer needed, such as after removing the associated \u003ccode\u003eAdWidget\u003c/code\u003e from the widget tree.\u003c/p\u003e\n"]]],["Native templates provide prebuilt Android and iOS layouts for native ads, customizable via a Dart API. To use, load an ad with `NativeAd`, specifying an ad unit ID and listener for events. Customize the ad's appearance through `NativeTemplateStyle`, choosing from `small` or `medium` template sizes. Display the ad using an `AdWidget` within a `ConstrainedBox`. Ensure ads are tested with provided test ad unit IDs and disposed of properly after use to free up resources.\n"],null,["# Native templates in Dart\n\nSelect platform: [Android](/ad-manager/mobile-ads-sdk/android/native/templates \"View this page for the Android platform docs.\") [iOS](/ad-manager/mobile-ads-sdk/ios/native/templates \"View this page for the iOS platform docs.\") [Flutter](/ad-manager/mobile-ads-sdk/flutter/native/templates \"View this page for the Flutter platform docs.\")\n\n\u003cbr /\u003e\n\nNative templates are code-complete views for your native ads, designed for fast\nimplementation and easy modification. With native templates, the plugin provides\nprebuilt Android and iOS layouts for you, and you can customize the style of the\nnative assets using a Dart API.\n\nThis guide demonstrates how to use the Dart API to stylize the underlying\nplatform views and to render the ad.\n\nPrerequisites\n-------------\n\n- Flutter 2.4.0 or higher.\n\n\u003c!-- --\u003e\n\n- Complete the [Get started guide](/ad-manager/mobile-ads-sdk/flutter/quick-start).\n- Familiarize yourself with the [native ads options](/ad-manager/mobile-ads-sdk/flutter/native).\n\nAlways test with test ads\n-------------------------\n\nWhen building and testing your apps, make sure you use test ads rather than\nlive, production ads. The easiest way to load test ads is to use our dedicated\ntest ad unit ID for native ads:\n\n- `/21775744923/example/native`\n\nThe test ad units are configured to return test ads for every request, so\nyou can use them in your own apps while coding, testing, and\ndebugging---just make sure you replace them with your own ad unit IDs before\npublishing your app.\n\nLoad ad\n-------\n\nThe following example loads a native ad using the `medium` sized native\ntemplate: \n\n class NativeExampleState extends State\u003cNativeExample\u003e {\n NativeAd? nativeAd;\n bool _nativeAdIsLoaded = false;\n\n // TODO: replace this test ad unit with your own ad unit.\n final _adUnitId = '/21775744923/example/native';\n\n /// Loads a native ad.\n void loadAd() {\n _nativeAd = NativeAd(\n adUnitId: _adUnitId,\n listener: NativeAdListener(\n onAdLoaded: (ad) {\n debugPrint('$NativeAd loaded.');\n setState(() {\n _nativeAdIsLoaded = true;\n });\n },\n onAdFailedToLoad: (ad, error) {\n // Dispose the ad here to free resources.\n debugPrint('$NativeAd failed to load: $error');\n ad.dispose();\n },\n ),\n request: const AdManagerAdRequest(),\n // Styling\n nativeTemplateStyle: NativeTemplateStyle(\n // Required: Choose a template.\n templateType: TemplateType.medium,\n // Optional: Customize the ad's style.\n mainBackgroundColor: Colors.purple,\n cornerRadius: 10.0,\n callToActionTextStyle: NativeTemplateTextStyle(\n textColor: Colors.cyan,\n backgroundColor: Colors.red,\n style: NativeTemplateFontStyle.monospace,\n size: 16.0),\n primaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.red,\n backgroundColor: Colors.cyan,\n style: NativeTemplateFontStyle.italic,\n size: 16.0),\n secondaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.green,\n backgroundColor: Colors.black,\n style: NativeTemplateFontStyle.bold,\n size: 16.0),\n tertiaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.brown,\n backgroundColor: Colors.amber,\n style: NativeTemplateFontStyle.normal,\n size: 16.0)))\n ..load();\n }\n }\n\nSee\n[`NativeTemplateStyle`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeTemplateStyle-class.html)\nand\n[`NativeTemplateTextStyle`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeTemplateTextStyle-class.html)\nfor available styling options.\n\nCustomize ad\n------------\n\nWhen customizing a native ad using native templates, your ad's UI configuration\nwill live in the `NativeTemplateStyle` class, enabling you to style an entire\nnative ad in Dart code.\n\n### Template sizes\n\nFlutter native ad templates come in two types: `TemplateType.small` and\n`TemplateType.medium`. The small template is ideal for a `TableView` or\n`GridView`, for in-feed ads or anywhere you need a thin rectangular ad view. The\nmedium template is meant to be a half to three-quarters page view, which is\nideal for landing or splash pages.\n\n| Small |\n|-------------|---------|\n| **Android** | **iOS** |\n| **Android** | **iOS** |\n\nNative ad events\n----------------\n\nTo be notified of events related to the native ad interactions, use the\n[`listener`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeAd/listener.html)\nproperty of the ad. Then, implement\n[`NativeAdListener`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeAdListener-class.html)\nto receive ad event callbacks. \n\n class NativeExampleState extends State\u003cNativeExample\u003e {\n NativeAd? _nativeAd;\n bool _nativeAdIsLoaded = false;\n\n // TODO: replace this test ad unit with your own ad unit.\n final _adUnitId = '/21775744923/example/native';\n\n /// Loads a native ad.\n void loadAd() {\n _nativeAd = NativeAd(\n adUnitId: _adUnitId,\n listener: NativeAdListener(\n onAdLoaded: (ad) {\n print('$NativeAd loaded.');\n setState(() {\n _nativeAdIsLoaded = true;\n });\n },\n onAdFailedToLoad: (ad, error) {\n // Dispose the ad here to free resources.\n print('$NativeAd failedToLoad: $error');\n ad.dispose();\n },\n // Called when a click is recorded for a NativeAd.\n onAdClicked: (ad) {},\n // Called when an impression occurs on the ad.\n onAdImpression: (ad) {},\n // Called when an ad removes an overlay that covers the screen.\n onAdClosed: (ad) {},\n // Called when an ad opens an overlay that covers the screen.\n onAdOpened: (ad) {},\n // For iOS only. Called before dismissing a full screen view\n onAdWillDismissScreen: (ad) {},\n // Called when an ad receives revenue value.\n onPaidEvent: (ad, valueMicros, precision, currencyCode) {},\n ),\n request: const AdManagerAdRequest(),\n // Styling\n nativeTemplateStyle: NativeTemplateStyle(\n // Required: Choose a template.\n templateType: TemplateType.medium,\n // Optional: Customize the ad's style.\n mainBackgroundColor: Colors.purple,\n cornerRadius: 10.0,\n callToActionTextStyle: NativeTemplateTextStyle(\n textColor: Colors.cyan,\n backgroundColor: Colors.red,\n style: NativeTemplateFontStyle.monospace,\n size: 16.0),\n primaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.red,\n backgroundColor: Colors.cyan,\n style: NativeTemplateFontStyle.italic,\n size: 16.0),\n secondaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.green,\n backgroundColor: Colors.black,\n style: NativeTemplateFontStyle.bold,\n size: 16.0),\n tertiaryTextStyle: NativeTemplateTextStyle(\n textColor: Colors.brown,\n backgroundColor: Colors.amber,\n style: NativeTemplateFontStyle.normal,\n size: 16.0)))\n ..load();\n }\n }\n\nDisplay ad\n----------\n\nTo display a `NativeAd` as a widget, you must instantiate an\n[`AdWidget`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/AdWidget-class.html)\nwith a supported ad after calling `load()`. You can create the widget before\ncalling `load()`, but `load()` must be called before adding it to the widget\ntree.\n\n`AdWidget` inherits from Flutter's `Widget` class and can be used like any other\nwidget. On iOS, make sure you place the widget in a container with a specified\nwidth and height. Otherwise, your ad may not be displayed. \n\n // Small template\n final adContainer = ConstrainedBox(\n constraints: const BoxConstraints(\n minWidth: 320, // minimum recommended width\n minHeight: 90, // minimum recommended height\n maxWidth: 400,\n maxHeight: 200,\n ),\n child: AdWidget(ad: _nativeAd!),\n );\n\n // Medium template\n final adContainer = ConstrainedBox(\n constraints: const BoxConstraints(\n minWidth: 320, // minimum recommended width\n minHeight: 320, // minimum recommended height\n maxWidth: 400,\n maxHeight: 400,\n ),\n child: AdWidget(ad: _nativeAd!),\n );\n\nDispose ad\n----------\n\nA\n[`NativeAd`](//pub.dev/documentation/google_mobile_ads/latest/google_mobile_ads/NativeAd-class.html)\nmust be disposed of when access to it is no longer needed. The best practice for\nwhen to call `dispose()` is after the `AdWidget` associated with the native ad\nis removed from the widget tree and in the `AdListener.onAdFailedToLoad()`\ncallback."]]
