Admobを表示するようの専用Widgetを作ったので公開
公開日: 2024-06-15 08:52:37
アドモブでバナー広告を表示する際に、サイズを300*250等の固定で入力してしまうとiPhoneやiPad等の画面幅が違うサイズでも広告サイズが固定されてしまっておかしな表示となってしまうので、端末の画面幅によって広告のサイズを変更するコートを書きました。
こちらがコード全体です。
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:async';
class AdBannerWidget extends StatefulWidget {
final String adType; // 広告の種類を指定するための文字列パラメータ
final VoidCallback? onAdLoaded; // 広告が読み込まれたときに呼び出されるコールバック
final bool waitForAd; // 広告が読み込まれるまでの待機フラグ
const AdBannerWidget({super.key, required this.adType, this.onAdLoaded, this.waitForAd = false});
@override
_AdBannerWidgetState createState() => _AdBannerWidgetState();
}
class _AdBannerWidgetState extends State<AdBannerWidget> {
BannerAd? _bannerAd; // バナー広告のインスタンス
bool _isAdLoaded = false; // 広告が読み込まれたかどうかのフラグ
@override
void didChangeDependencies() {
super.didChangeDependencies();
_loadAd(); // 広告を読み込む
}
/// 広告を読み込む関数
Future<void> _loadAd() async {
final AdSize adSize = _getAdSize(context, widget.adType); // 広告のサイズを決定
_bannerAd = BannerAd(
adUnitId: 'ca-app-pub-3940256099942544/6300978111', // テスト用広告ユニットID
size: adSize, // 決定した広告のサイズを使用
request: AdRequest(), // 広告リクエストの設定
listener: BannerAdListener(
onAdLoaded: (_) {
setState(() {
_isAdLoaded = true; // 広告が読み込まれたことをフラグで示す
});
widget.onAdLoaded?.call(); // 広告が読み込まれたときのコールバックを呼び出す
},
onAdFailedToLoad: (ad, error) {
ad.dispose(); // 広告の読み込みが失敗した場合、広告を破棄する
},
),
);
_bannerAd!.load(); // 広告を読み込む
}
/// 端末の幅によって広告のサイズを分岐する関数
AdSize _getAdSize(BuildContext context, String adType) {
final double width = MediaQuery.of(context).size.width;
switch (adType) {
case 'banner':
if (width >= 468) {
return AdSize.fullBanner; // 468x60
} else {
return AdSize.banner; // 320x50
}
case 'medium':
if (width >= 728) {
return AdSize.leaderboard; // 728x90
} else {
return AdSize.mediumRectangle; // 300x250
}
default:
return AdSize.banner; // デフォルトのサイズ
}
}
@override
void dispose() {
_bannerAd?.dispose(); // ウィジェットが破棄されるときに広告を破棄する
super.dispose();
}
@override
Widget build(BuildContext context) {
return widget.waitForAd && !_isAdLoaded
? SizedBox(
height: _bannerAd?.size.height.toDouble() ?? 50.0,
width: _bannerAd?.size.width.toDouble() ?? MediaQuery.of(context).size.width,
)
: Container(
alignment: Alignment.center,
width: _bannerAd?.size.width.toDouble() ?? MediaQuery.of(context).size.width,
height: _bannerAd?.size.height.toDouble() ?? 50.0,
child: _isAdLoaded ? AdWidget(ad: _bannerAd!) : const Text('Ad Loading...'),
);
}
}
この部分が今回作成した関数です。
/// 端末の幅によって広告のサイズを分岐する関数
AdSize _getAdSize(BuildContext context, String adType) {
final double width = MediaQuery.of(context).size.width;
switch (adType) {
case 'banner':
if (width >= 468) {
return AdSize.fullBanner; // 468x60
} else {
return AdSize.banner; // 320x50
}
case 'medium':
if (width >= 728) {
return AdSize.leaderboard; // 728x90
} else {
return AdSize.mediumRectangle; // 300x250
}
default:
return AdSize.banner; // デフォルトのサイズ
}
}使い方は必要な箇所に文字列で該当の引数を入れるだけ。
const AdBannerWidget(adType: 'banner',),
const AdBannerWidget(adType: 'medium',),
Admobの広告の定義のサイズはこちらがあるようです。
/// The standard banner (320x50) size.
static const AdSize banner = AdSize(width: 320, height: 50);
/// The large banner (320x100) size.
static const AdSize largeBanner = AdSize(width: 320, height: 100);
/// The medium rectangle (300x250) size.
static const AdSize mediumRectangle = AdSize(width: 300, height: 250);
/// The full banner (468x60) size.
static const AdSize fullBanner = AdSize(width: 468, height: 60);
/// The leaderboard (728x90) size.
static const AdSize leaderboard = AdSize(width: 728, height: 90);
/// A dynamically sized banner that matches its parent's width and expands/contracts its height to match the ad's content after loading completes.
static const AdSize fluid = FluidAdSize();一番下の端末によって自動で設定してくれるサイズの広告は試してみたのですが、エラーが出てしまって使用できませんでした。
また使い方がわかったら更新していきます。