2021-03-29に更新

Flutterの新しいAdMob SDKを試してみた

Google公式で、ネイティブのラッパーではないちゃんとしたFlutterのAdMob SDKがついにベータになったようですので動かしてみました(Android)。AdMob周りはほんとに使いづらくで困っていたので個人的にはかなり朗報です。

上記の動画のように、ラッパーライブラリでなくなったことにより(かな?)、ちゃんとスクロールに追従したり、ウィジェットの重なりにも対応するようになりました。

Flutter Engageで発表された感じでしょうか? 一緒に公開されたアナウンスに詳細は書かれています。

What’s New in Flutter 2. by Chris Sells | Mar, 2021 | Medium | Flutter | Flutter

使い方

Google Mobile Ads SDK for Flutter自体はこちらです。

https://pub.dev/packages/google_mobile_ads

以下試したログですが適当に試したので適当です。

インストール

dependencies:
  google_mobile_ads: ^0.11.0+1

AndroidManifestに広告のアプリIDを入れます。

    <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-**" />
  </application>
</manifest>

あとGradleのバージョンが3.5.0とかの低いやつだとビルド時に AAPT: error: unexpected element <queries> found in <manifest> のようなエラーになるようですのでいい感じのバージョンに上げましょう。僕は3.5.4で試しました。

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.4'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }

参考
https://stackoverflow.com/questions/62969917/how-to-fix-unexpected-element-queries-found-in-manifest-error

読み込み

まずは初期化します。loadを呼ばなきゃいけないのでどこかで初期化します。

class _MyHomePageState extends State<MyHomePage> {
  BannerAd myBanner;

  bool isLoaded = false;

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

  void initAd() {
    myBanner = BannerAd(
      adUnitId: 'ca-app-pub-****',
      // size: AdSize.getSmartBanner(Orientation.landscape),
      size: AdSize.banner,
      request: AdRequest(),
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          setState(() {
            isLoaded = true;
          });
        },
      ),
    )..load();
  }

スマートバナーも試そうとしましたが、取得できる広告サイズが -1 になって表示時にエラーになったのでとりあえず普通のバナーで試しました。

表示する

下記のような感じでリストの一部に入るようにしてみました。

  List<Widget> _buildChildren() {
    final children = <Widget>[];

    for (int i = 0; i < 50; i++) {
      if (i == 15) {
        children.add(isLoaded
            ? Container(
                alignment: Alignment.center,
                child: AdWidget(ad: myBanner),
                width: myBanner.size.width.toDouble(),
                height: myBanner.size.height.toDouble(),
              )
            : Container());
      } else {
        children.add(ListTile(
          title: Text(
            'test$i',
            style: TextStyle(color: Colors.black, fontSize: 18.0),
          ),
        ));
      }
    }

    return children;
  }

注意点

ページをpushする場合、同じ広告オブジェクトを使用するとエラーになります。表示するところ毎にバナーをロードした方が良いっぽいです。(ロードして表示するウィジェットを作ってそれを配置するようにしておくと良いでしょう)

あと、僕は動画生成するアプリを作っているのですが、pushしているすべてのページに広告を付けていると何故か動画が真っ白になってしまいました。試しに、pushする際に隠れるページの広告を非表示にしていくとちゃんと生成されるようになりました。謎ですがとりあえず回避方法です。

あとは広告を読み込むとコンテンツの位置がずれるので、もしかするとAdMob側から注意が来る可能性もあるかもしれません。サイズ指定の公告の場合は高さを固定するコンテナに入れておいた方が良いのかもしれません。

まとめ

とにかくFlutter直でAdMob対応してくれてるのは嬉しいですね。みなさんもどんどん使ってプルリクエストを送って安心して使えるようにしていってください!(人任せ)

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント