【Flutter】Firebase AdMobを使って広告表示する

FlutterアプリでFirebase AdMobを使って広告表示する方法メモです。

手順

1. AdMobのパッケージ追加

pubspec.yaml の dependencies に firebase_admob 追記する。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_admob:

2. パッケージ取得

terminalで下記のコマンド実行。

$ flutter packages get

3. 初期化 & 読み込み & 表示

@override
void initState() {
  super.initState();
  FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
  _bannerAd = createBannerAd()
    ..load()
    ..show();
}

BannerAd createBannerAd() {
  return new BannerAd(
    adUnitId: BannerAd.testAdUnitId,
    size: AdSize.banner,
    targetingInfo: targetingInfo,
    listener: (MobileAdEvent event) {
      print("BannerAd event $event");
    },
  );
}

static final MobileAdTargetingInfo targetingInfo = new MobileAdTargetingInfo(
  keywords: <String>['foo', 'bar'],
  contentUrl: 'http://foo.com/bar.html',
  birthday: new DateTime.now(),
  childDirected: true,
  gender: MobileAdGender.male,
);

（参考）pluginの show() のコード

anchorType を指定することでで表示位置を変えることができます。

firebase_admob.dart

  Future<bool> show(
      {double anchorOffset = 0.0, AnchorType anchorType = AnchorType.bottom}) {
    return _invokeBooleanMethod("showAd", <String, dynamic>{
      'id': id,
      'anchorOffset': anchorOffset.toString(),
      'anchorType': anchorType == AnchorType.top ? "top" : "bottom"
    });
  }

環境

• Flutter 0.1.5
• Dart 2.0.0-dev.28.0
• firebase_admob 0.5.0

補足

2018/03時点ではバナー広告とインタースティシャル広告のみ対応しているようです。

あとfirebase_admob PluginのREADMEのサンプルコードが一部間違っていたようなのでPR出してみました。
https://github.com/flutter/plugins/pull/436

リンク

firebase_admob | Flutter Package
https://pub.dartlang.org/packages/firebase_admob

Using Packages - Flutter
https://flutter.io/using-packages/