[flutter] Google AdMob Native Ads 적용하기-네이티브 템플릿

애드몹을 적용하면서 애드몹에서 나는 네이티브 광고를 적용하라 예정이다. 그렇게 해야 기존 앱에 자연스럽게 녹아 들어 앱의 디자인을 해치지 않기 때문이다. 

 

애드몹에서도 "이 광고 형식은 광고의 디자인을 더 세부적으로 관리하려는 경우에 적합합니다. "

 

네이티브 광고 적용에 앞서 애드몹 공식에서는 2가지 유형을 제공한다. 

• 네이티브 템플릿: Dart API로 스타일이 지정된 사전 정의된 네이티브 템플릿입니다.
• 플랫폼 설정: Android 및 iOS 레이아웃 도구를 사용하여 정의된 맞춤 플랫폼별 레이아웃입니다.

네이티브 템플릿 적용하기 

공식문서에서 제공해주는 코드 그대로 복붙을 하면 템플릿이 있어 이를 손쉽게 구현할 수 있다.

폰트 배경색, 글자색 등은 변경이 가능하고 medium, small이 있는데 아래 코드는 medium을 구현한 코드이다. 

- 코드

class AdMobController extends GetxController {
  NativeAd? nativeAd;
  bool isAdLoaded = false;

  @override
  void onInit() {
    super.onInit();
    loadNativeAd();
  }

  void loadNativeAd() {
    nativeAd = NativeAd(
      adUnitId: 'ca-app-pub-3940256099942544/2247696110',
      listener: NativeAdListener(
        onAdLoaded: (ad) {
          isAdLoaded = true;
        },
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          if (kDebugMode) {
            print(error);
          }
        },
      ),
      request: AdRequest(),
      nativeTemplateStyle: NativeTemplateStyle(
        templateType: TemplateType.medium,
        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();
  }

  @override
  void onClose() {
    nativeAd?.dispose();
    super.onClose();
  }
}

class AdmobNativeWidget extends GetWidget<AdMobController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: controller.isAdLoaded
          ? ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: 320, // minimum recommended width
                minHeight: 320, // minimum recommended height
                maxWidth: 400,
                maxHeight: 400,
              ),
              child: AdWidget(ad: controller.nativeAd!),
            )
          : Container(),
    );
  }
}

 

- 결과화면