FlutterにAdMob広告を表示する

2019/05/03
development
Flutter

Flutterに広告を表示する場合は firebase_admob プラグインを使います。

で、このプラグイン、試してみたら意外と大変でした。

導入手順は公式のReadmeに書かれている通り、と思いきやハマりポイントがあります。0.7.0以降はAndroidXに依存するため、手動でAndroidXに対応しなくてはなりません。

Flutterの公式サイトにあるAndroidXへのマイグレーション方法を参考に対応しましょう。Manually migrate your app は Not recommended だと書かれていますが、大した手順じゃないので手作業でマイグレーションしちゃって問題なさそうです。

実装は実装で厄介。インタースティシャル広告は素直に実装すればOKでしたが、バナー広告は工夫が必要でした。

BannerAd的なWidgetがあるわけではなく、Flutter側の世界（Widget）の上にバナーが表示される形になります。なので、Widget側でmarginなりpaddingなりを使って領域を明示的に空けておく必要があります。

FloatingActionButtonなんかもバナーの下にもぐってしまうので

floatingActionButton: Padding(
  padding: const EdgeInsets.only(bottom: 56.0),
  child: FloatingActionButton(
    onPressed: () => _onFloatingActionButtonPressed(context),
    child: Icon(Icons.edit),
  ),
),

みたいな感じで位置をずらしましょう。

また、Widgetじゃないので特定画面にだけバナー広告を表示するとなると作り込みが発生します。画面遷移を検知して他の画面に移ったらバナー非表示、みたいなロジックを書くわけですね。

画面遷移の検知は以下の記事が参考になります。

今回は didPopNext と didPushNext をフックしてバナーの表示／非表示を制御するようにしました。パッと見だと意図通り動いているようです。

もうちょっとFlutterに溶け込んでいるといいのですが、まあしょうがない。

ちゃんと調べてないんですが、他のアドネットワークはFlutter対応しているものがなさそう。ということはAdMob一択になるので、このプラグインとうまく付き合っていくしかなさそうです。

コメント欄を表示する

関連(するかもしれない)記事

おススメ