Google AdMob を利用してバナー広告を設置する際、利用側の処理が少なくて済むように、バナー広告を表示するWidgetを提供するクラスを作ると楽だったので紹介します。
目次
実装例
提供側
以下が、バナー広告を表示するWidgetを提供するクラスの実装です。
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// AdMobのバナーを表示するWidget
class AdBannerWidget extends StatefulWidget {
const AdBannerWidget({Key? key, required this.adSize}) : super(key: key);
final AdSize adSize;
@override
State<StatefulWidget> createState() => _AdBannerWidgetState();
}
class _AdBannerWidgetState extends State<AdBannerWidget> {
late BannerAd _banner;
@override
void initState() {
super.initState();
_banner = _createBanner(widget.adSize);
}
@override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).backgroundColor,
width: _banner.size.width.toDouble(),
height: _banner.size.height.toDouble(),
child: AdWidget(ad: _banner),
);
}
@override
void dispose() {
_banner.dispose();
super.dispose();
}
BannerAd _createBanner(AdSize size) {
return BannerAd(
size: size,
adUnitId: _unitId,
listener: BannerAdListener(
onAdFailedToLoad: (Ad ad, LoadAdError error) {
_banner.dispose();
},
),
request: const AdRequest(),
)..load();
}
static String get _unitId {
if (kDebugMode) {
// テスト用ID
return Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
}
// リリース用ID
return Platform.isAndroid
? '★★★Androidの広告ユニットID★★★'
: '★★★iOSの広告ユニットID★★★';
}
}このAdBannerWidgetクラスのインスタンスを生成すると、次の順序でバナー広告が表示されます。
利用側
利用側は、広告の読み込みなどのゴチャゴチャした処理は提供側でしてくれるので、特に何か意識する必要はないです。バナー広告を設置したい位置に提供側のインスタンスを渡してあげるだけです。
// ……
@override
Widget build(BuildContext context) {
return Column(
children: [
// ……
// 好きなところに以下の１行を足すだけ
const AdBannerWidget(adSize: AdSize.fullBanner),
// ……
],
);
}
// ……引数で、バナーのサイズ を指定していますが、アプリ全体で バナーのサイズ を変える必要がない場合は、提供側のインターフェースを潰して、提供側で設定してしまった方が楽だと思います。