[Flutter adMob]インタースティシャル広告を表示する

はじめに

Flutterのアプリ開発で広告を付けたいときにAdbanner広告についての記事や公式ドキュメントではたくさんの情報があったのですが、インタースティシャル広告などの記事はなかなか見つけることができなかったので、後からの振り返り用の議事録的な感じこの記事を作成しました。

環境

$ flutter doctor
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.2)
[✓] VS Code (version 1.59.0)
[✓] Connected device (1 available)

パッケージはFlutter2がリリースされて推奨になったgoogleads-mobile-flutterを使います

セットアップ

いろいろな記事でも書かれてると思いますが、AdMobをios,Androidで使うためのセットアップを行います。
iosとAndroidのAdMobIdはご自身のAdMobアカウントで確認してください。

ios

ios/Runner/Info.plistへのコードの追加を行います。

Info.plist

<key>GADApplicationIdentifier</key>
// ↓自分のAdMobのappIDに変更
<string>ca-app-pub-3940256099942544~1458002511</string> 
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>

Android

android/app/src/main/AndroidManifest.xmlのファイルのタグへ下記のように追加する

AndroidManifest.xml

<manifest>
    <application>
        <!-- サンプル AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

初期化

広告を読み込む前に、MobileAds.instance.initialize（）を呼び出してMobile Ads SDKを初期化し、アプリで初期化します

main.dart

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

インタースティシャル広告

インタースティシャル広告用の管理用クラスを作る

AdInterstitial.dart

import 'dart:io';

import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdInterstitial {
  InterstitialAd? _interstitialAd;
  int num_of_attempt_load = 0;
  bool? ready;

  // create interstitial ads
  void createAd() {
    InterstitialAd.load(
      adUnitId: interstitialAdUnitId,
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        // 広告が正常にロードされたときに呼ばれます。
        onAdLoaded: (InterstitialAd ad) {
          print('add loaded');
          _interstitialAd = ad;
          num_of_attempt_load = 0;
          ready = true;
        },
        // 広告のロードが失敗した際に呼ばれます。
        onAdFailedToLoad: (LoadAdError error) {
          num_of_attempt_load++;
          _interstitialAd = null;
          if (num_of_attempt_load <= 2) {
            createAd();
          }
        },
      ),
    );
  }

  // show interstitial ads to user
  Future<void> showAd() async {
    ready = false;
    if (_interstitialAd == null) {
      print('Warning: attempt to show interstitial before loaded.');
      return;
    }
    _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (InterstitialAd ad) {
        print("ad onAdshowedFullscreen");
      },
      onAdDismissedFullScreenContent: (InterstitialAd ad) {
        print("ad Disposed");
        ad.dispose();
      },
      onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError aderror) {
        print('$ad OnAdFailed $aderror');
        ad.dispose();
        createAd();
      },
    );

    // 広告の表示には.show()を使う
    await _interstitialAd!.show();
    _interstitialAd = null;
  }

  // 広告IDをプラットフォームに合わせて取得
  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      //どちらでもない場合は、テスト用を返す
      return BannerAd.testAdUnitId;
    }
  }
}

インタースティシャル広告を表示する

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app_sample/AdInterstitial.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  AdmobHelper.initialization();
  runApp(MyApp());
}
class MyApp extends StatelessWidget  {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Admob ad example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomepage(),
    );
  }
}
class MyHomepage extends StatefulWidget {
  @override
  _MyHomepageState createState() => _MyHomepageState();
}


class _MyHomepageState extends State<MyHomepage> {
  InterstitialAd? _interstitialAd;
  AdInterstitial adInterstitial = new AdInterstitial(); 

  @override
  void initState() {
    super.initState();
    adInterstitial.createAd();
  }

  @override
  void dispose() {
    super.dispose();
   _interstitialAd?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text('show Interstitial Ad'),
      onPressed: () {
        adInterstitial.show();
      },
    );
  }
}

参考記事やhookWidgetでの表示はZennの方で