虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterでバナー広告を出す

Flutterでバナー広告を出す

Flutterからバナー広告を出せます。 これも両OS別々で実装する必要もなく、1ソースで出すことができます。

AdMobを出す

今回はAdMobを出します。 実装はとても簡単ですが、少し注意が必要なことがありましたのでその辺りも説明してきたいと思います。

プラグインを導入する

まずはいつも通りプラグインを導入します。今回導入するプラグインfirebase_admob です。

pub.dartlang.org

このプラグインはFirebaseの導入は必須なので、まだ導入していない方はこちらをご覧ください。

www.shogogeek.com

pubspec.ymlに下記を追加します

dependencies:
  flutter:
    sdk: flutter
  firebase_admob:

追加したら下記を実行

$ flutter packages get

コードを追加する

追加できたら、コードを書いていきます。

initState() メソッドに一気に書いていきます。

String appId;
BannerAd _bannerAd;

@override
  void initState() {
    super.initState();

    if (Platform.isIOS) {
      appId = "AdMob のiOSのAdID";
    } else if (Platform.isAndroid) {
      appId = "AdMob のAbdroidのAdID";
    }

    FirebaseAdMob.instance.initialize(appId: appId);
    _bannerAd = _createAd()
      ..load()
      ..show();
  }

BannerAd _createAd() {
    return BannerAd(
      adUnitId: appId,
      size: AdSize.banner,
      listener: (MobileAdEvent event) {
        print("BannerAd event $event");
      },
    );
  }

@override
  void dispose() {
    _bannerAd.dispose();
    super.dispose();
  }

これで下側に広告が追加されます。

注意

注意としては画面が切り替わるときに、(閉じる時も)必ず _bannerAd.dispose(); を必ず呼び出しましょう。 これを呼び出さないと画面の下に広告が表示され続けます。