Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away