Edited at

【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/