【Flutter】ネイティブアドバンス広告の実装

はじめに

とあるFlutterアプリに、Google Admobのネイティブアドバンス広告を付けることになりました。実装のやり方は2種類あるようです。
※今回は「2」のみご紹介します。

1. Android,iOSそれぞれネイティブ言語で実装
2. google_mobile_adsパッケージのテンプレートを使う

そもそもネイティブ広告は、プラットフォームごとにUIをカスタマイズし、アプリ内に自然に溶け込むようにすることでユーザーにストレスがかからないような広告を表示することができます。それをパッケージのテンプレートを使ってDartだけで作れるようにしたのが2です。1に関しては、codelabsに詳しい手順が乗っているのでご参照ください。

今回はgoogle_mobile_adsパッケージに用意されたテンプレートで実装するやり方にしました。説明用に、広告が読み込まれたら表示するだけのアプリにしています。
参考：https://developers.google.com/admob/flutter/native?hl=ja
※Admob管理パネルでのアプリ追加、広告ユニット追加等は説明しません。

環境

実装

AndroidManifest.xmlにアプリIDを追加。今回はAndroidのテスト用アプリID。

   <meta-data
     android:name="com.google.android.gms.ads.APPLICATION_ID"
     android:value="ca-app-pub-3940256099942544~3347511713"/>

Info.plistにもアプリIDを追加。今回はiOSのテスト用アプリID。

  <key>GADApplicationIdentifier</key>
    <string>ca-app-pub-3940256099942544~1458002511</string>

そして全体のコードになります。
こちらのコードをコピペして"flutter pub get"すればとりあえずAndroidデバイスで動くと思います。

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  //GoogleMobileAdsSDKの初期化
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Native Advance Ad Demo',
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  NativeAd? _nativeAd;
  //アプリの広告ユニットIDを入れる
  //今回の場合Androidのネイティブテスト広告ID
  final String _adUnitId = "ca-app-pub-3940256099942544/2247696110";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: _nativeAd != null
            ? ConstrainedBox(
                constraints: const BoxConstraints(
                  minWidth: 200,
                  minHeight: 200,
                  maxWidth: 300,
                  maxHeight: 300,
                ),
                child: AdWidget(ad: _nativeAd!),
              )
            : const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('ネイティブ広告を読み込み中'),
                  SizedBox(height: 15),
                  CircularProgressIndicator(
                    color: Colors.black,
                  ),
                ],
              ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    //広告を読み込む
    _loadNativeAd();
  }

  void _loadNativeAd() {
    NativeAd(
      adUnitId: _adUnitId,
      listener: NativeAdListener(
        onAdLoaded: (ad) {
          setState(() {
            //広告が読み込まれたことを通知
            _nativeAd = ad as NativeAd;
          });
        },
        onAdFailedToLoad: (ad, error) {
          print('failed');
          print(error);
          ad.dispose();
          _nativeAd = null;
        },
      ),
      request: const AdRequest(),
      nativeTemplateStyle: NativeTemplateStyle(
        templateType: TemplateType.medium,
        mainBackgroundColor: Colors.white,
        cornerRadius: 10.0,
        callToActionTextStyle: NativeTemplateTextStyle(
          textColor: const Color(0xFFECE9F3),
          backgroundColor: Colors.black,
          style: NativeTemplateFontStyle.monospace,
          size: 16.0,
        ),
        primaryTextStyle: NativeTemplateTextStyle(
          textColor: Colors.black,
          backgroundColor: const Color(0xFFECE9F3),
          style: NativeTemplateFontStyle.italic,
          size: 16.0,
        ),
        secondaryTextStyle: NativeTemplateTextStyle(
          textColor: Colors.green,
          backgroundColor: Colors.black,
          style: NativeTemplateFontStyle.bold,
          size: 16.0,
        ),
        tertiaryTextStyle: NativeTemplateTextStyle(
          textColor: Colors.black,
          backgroundColor: const Color(0xFFECE9F3),
          style: NativeTemplateFontStyle.normal,
          size: 16.0,
        ),
      ),
    ).load();
  }

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

コードの説明

_loadNativeAd()でネイティブ広告の読み込みを行っています。
この時_adUnitIdには適切な広告ユニットIDを指定してください。
読み込みが完了したらNativeAdオブジェクトを取得し、AdWidget()で広告を表示しています。nativeTemplateStyle以下では広告のスタイルを指定しています。詳しくは、NativeTemplateStyleをご参照ください。
そしてNativeAdは不要になったら必ずdisposeでリリースしてあげます。

今回極力シンプルにしていますが、広告ユニットIDの管理クラスやエラー処理は適宜追加してください。

以上。