Dart의 네이티브 템플릿
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
네이티브 템플릿은 네이티브 광고용 코드 완성형 보기로, 빠르게 구현하고 손쉽게 수정할 수 있도록
고안되었습니다. 네이티브 템플릿을 사용하면
플러그인에서 사전 빌드된 Android 및 iOS 레이아웃을 제공하며 DART API를 사용하여 네이티브 확장 소재의 스타일을
맞춤설정할 수 있습니다.
이 가이드에서는 DART API를 사용하여 기본 플랫폼 뷰의 스타일을 지정하고
광고를 렌더링하는 방법을 보여줍니다.
기본 요건
항상 테스트 광고로 테스트
앱을 제작하고 테스트할 때는 운영 중인 실제 광고 대신
테스트 광고를 사용하세요. 테스트 광고를 로드하는 가장 쉬운 방법은 네이티브 광고의
테스트 전용 광고 단위 ID를 사용하는 것입니다.
/21775744923/example/native
테스트 광고 단위는 모든 요청에 대해 테스트 광고를 반환하도록 구성되므로
코딩, 테스트, 디버깅 중에 앱에서 사용할 수 있습니다.
앱을 게시하기 전에 자체 광고 단위 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의 두 가지 유형이
있습니다. 작은 템플릿은 TableView 또는 GridView,
인피드 광고 또는 얇은 직사각형 광고 뷰가 필요한 곳에 적합합니다. 중간
템플릿은 ½~¾ 페이지 뷰로 되어 있으며 방문 페이지 또는
스플래시 페이지에 적합합니다.
| 작은 템플릿 |
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()
콜백에서입니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 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."]]
