[Flutter]Admobのバナー導入をパッケージ化した

はじめに

閲覧いただきありがとうございます。flutterで個人開発していますKageといいます。

モバイルアプリを開発している方には必須のAdmobについて
毎回バナーの実装を書いているとめんどくさいなぁとおもったので、パッケージ化してみました。

個人利用のためpub.devへパブリッシュはしていません。

一応GitHubでは公開しています。改善点ぜひぜひご指摘お願いします。

広告ユニットIDの設定

デバイスに合わせて広告ユニット IDを返すclassの作成。
testAdUnitIdも定義しておくことでテストしやすくしています。

admob_helper.dart

class AdHelper {
  static const String testAdUnitId = 'ca-app-pub-3940256099942544/6300978111';
  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-XXXXXXXXXXXXX'; //YOUR AD ID
    } else if (Platform.isIOS) {
      return 'ca-app-pub-XXXXXXXXXXXXX'; //YOUR AD ID
    } else {
      // ignore: unnecessary_new
      throw new UnsupportedError('Unsupported platform');
    }
  }
}

やったことその２

Admobというclassをmain.dartで飛び出してバナーを１行で表示させます。
コメントアウトしてあるprint文はデバッグ時の確認用です。

_admob.dart

class AdMob {
  BannerAd? _bannerAd;
  AdMob() {
    _bannerAd = BannerAd(
        size: AdSize.banner,
        adUnitId: AdHelper.testAdUnitId, //It can be replaced to bannerAdUnitId.
        listener: BannerAdListener(
          onAdFailedToLoad: (Ad ad, LoadAdError error) {
            // // Log
            // print('Ad failed to load: ${error.message}');
            // print('Error code: ${error.code}');
            // print('Error domain: ${error.domain}');
            // final responseInfo = error.responseInfo;
            // if (responseInfo != null) {
            //   print('Response info: ${responseInfo}');
            //   print(
            //       'Mediation adapter class name: ${responseInfo.mediationAdapterClassName}');
            //   print('Response ID: ${responseInfo.responseId}');
            // }
            ad.dispose();
          },
        ),
        request: const AdRequest());
  }

  void load() {
    _bannerAd?.load();
  }

  void dispose() {
    _bannerAd!.dispose();
  }

  Widget getAdBanner() {
    return Container(
      alignment: Alignment.center,
      width: _bannerAd!.size.width.toDouble(),
      height: _bannerAd!.size.height.toDouble(),
      child: AdWidget(ad: _bannerAd!),
    );
  }
}

main.dartでやること

おなじみカウントアップアプリにバナーを追加すると以下のように書きます。
ポイントはinitState()時に_adMob.load()を実行することくらいです（笑）

_adMob.dartを設定しておいたことにより'_adMob.getAdBanner()'の一行だけでバナーを挿入できます。

その下にSafeAreaを入れてバナーの位置を調整していますが、これもAdmobクラスに同梱できたらもっと便利かと思います。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final AdMob _adMob = AdMob();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    _adMob.load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            _adMob.getAdBanner(), // 広告バナーを表示
            const SafeArea(
                child: SizedBox(
              height: 90,
            ))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

終わりに

いかがだったでしょうか？
この記事が読者様の手助けになれたら幸いです。

私自身はflutter始めて４ヶ月のまだまだ初心者です。間違い、不備、非効率な部分が多いかと思います。そういった点が見つかった際はご指摘いただけると大変勉強になりますのでどうぞよろしくお願いします。