✨

Google Mobile Ads for Flutterの最新1.2.0使ってみた

2022/06/17に公開

Flutter

AdMob

tech

自己紹介

はじめましての方もそうでない方も、レシピサイトやSNSなどメニューを横断的に取り込める

おうちメニュー

というプロダクトをやっているkentarohです。

iOS	Android

本題

以前の記事 Google Mobile Ads for Flutterの最新0.13.0使ってみた

でGoogle Mobile Adsを紹介していました。2022年6月16日現在は最新v1.2.0になってるではありませんか。技術的負債はすぐ解消しましょう！公式ドキュメント見てもバナー広告の例は載ってなかったので、記事にしてみました。変更点を中心に解説したいと思います。

前提

AdMobでアカウント作成、広告IDを取得しています。
バナー広告での例をお伝えします。
基本的なことは

をご参考にしてください。

手順

ビルド時のトラブル
バナーの初期化
バナーウィジェットの設置

1 パッケージの取得

今回のはバージョンを0.13.0　→1.2.0に上げました。
ビルドで失敗しました。

android/build.gradleで
ext.kotlin_version = '1.6.10'

android/app/build.gradleで
compileSdkVersion 31
targetSdkVersion 31

に変更しました。

31にあげると、トラブルが発生することがあります。

Android 12から「コンポーネントのエクスポートの安全性を改善」ということで、インテントフィルタを持つ、Activity/Service/BroadcastReceiverに対して、andorid:exported属性を明示的に宣言する必要があります。

AndroidManifest.xmlで設定が必須の項目がありますので下記をセットしました。
android:exported="true"

これで解決！

2 バナーの初期化

ここでの変更点は、テストで使う広告ユニットIDの設定です。

    final BannerAd _bannerAd = BannerAd(
      size: AdSize.banner,
      // .testAdUnitIdがDeprecatedになったので公式ドキュメントのデモ広告ユニットIDを使う。
      // 公式
      // https://developers.google.com/admob/android/test-ads?hl=ja
      // https://developers.google.com/admob/ios/test-ads?hl=ja
      // バナーのところをチェック
      // - BannerAd.testAdUnitId
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      listener: const BannerAdListener(),
      request: const AdRequest(),
    )..load();

3 バナーウィジェットの設置

こちらはおさらいです。下部の真ん中にバナーを表示するコード。
広告自体は、AdWidgetでadに先ほど作ったadを適用するだけです。

	Container(
	  child: Align(
	    alignment: Alignment.bottomCenter,
	    child: SizedBox(
	      width: _bannerAd.size.width.toDouble(),
	      height: _bannerAd.size.height.toDouble(),
	      child: AdWidget(ad: _bannerAd),
	    ),
	  ),
	),

参考

pub.dev

github

android:exported="false" とはどういうことか？

自分の過去の記事

感想

やっぱり最新のライブラリを使おうと思ったら公式のドキュメントやgithubを確認するのが一番ですが、サンプルなどで記載されてなかったら試すしかないですね！。アップデートが激しい時代、この記事もどんどんライブラリの新しいバージョンが出て廃れていくと思いますが、だからこそせっかくなので今共有させてもらおうと思いました。もし参考になったと思っていただいたら、ぜひアプリの方使ったいただけると幸いです。見ていただきありがとうございました。

次回予告

マテリアルデザイン3対応とか？FlexColorSchemeとかその辺りやってるので記事にするかもです。