モケラ

Tech Sheets

mokelab

FlutterプロジェクトにAdmobを導入する

最終更新日:2019-11-30

Admobは広告プラットフォームです。Firebaseの1機能として提供されており、Flutterでも導入することができます。

firebase_admobを追加する

まずはFlutterプロジェクトにライブラリを追加します。パッケージ情報はこちら

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  firebase_admob: ^0.9.0+9

AdmobでAppIDを取得する

AndroidとiOSの両方でリリースする場合、2つAppIDを取得する必要があります。

各プラットフォームの設定をする

プラットフォーム毎に設定方法が異なります。

Androidの場合

iOSの場合

バナー広告を表示する

最後に、広告を表示したい箇所で次のような処理を実行します。なお、firebase_admobはFlutterのView階層とは別の層で広告を表示するので注意しましょう。画面遷移前にバナー広告を消す処理を忘れると、次の画面でもバナー広告は表示されたままになります。

// 注:パッケージのドキュメントに掲載されているサンプルそのまんまです
// 広告ターゲットの設定
MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
  keywords: <String>['flutterio', 'beautiful apps'],
  contentUrl: 'https://flutter.io',
  birthday: DateTime.now(),
  childDirected: false,
  designedForFamilies: false,
  gender: MobileAdGender.male, // or MobileAdGender.female, MobileAdGender.unknown
  testDevices: <String>[], // Android emulators are considered test devices
);

// 広告の表示。実際の広告を出す場合はadUnitIdの値をプラットフォームに応じて
// 変更する処理が必要
BannerAd myBanner = BannerAd(
  adUnitId: BannerAd.testAdUnitId,
  size: AdSize.smartBanner,
  targetingInfo: targetingInfo,
  listener: (MobileAdEvent event) {
    print("BannerAd event is $event");
  },
);

// 広告の表示
myBanner
  ..load()
  ..show(
    anchorOffset: 60.0,
    horizontalCenterOffset: 10.0,
    anchorType: AnchorType.bottom,
  );

一覧に戻る