今回の記事では、Flutterでアダプティブバナー形式のAdMob広告を表示するための実装について書いていきたいと思います。
完成イメージ
今回は、Bottomナビゲーションの上にアダプティブバナー広告を表示する形となるので完成イメージは以下のようになります。
アダプティブバナーは画面のサイズに合わせて広告のサイズを変えてくれる便利なバナーです。
AdMob広告IDの用意
予め新しいアプリのAdMob広告をバナー形式で設定しておき、以下のようにAdMob広告IDを払い出しておきます。
（AdMob広告IDの払い出し手順についてはこの記事では省略）
pubspec.yamlにAdMobパッケージを追加
Flutterの公式パッケージのgoogle_mobile_adsを利用します。
pubspec.yamlに以下のように追加します。flutter pub getします。
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
google_mobile_ads: ^1.3.0
アプリに広告を表示するための権限を追加（Androidの場合）
Flutterプロジェクトの場合、android/app/src/mainのディレクトリのAndroidManifest.xmlに以下の権限を追加します。
・アプリでネットワークを利用するための権限を追加
・利用する広告IDを追加
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.highcom.growing_sake">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:label="growing_sake"
android:icon="@mipmap/ic_launcher">
・・・
<meta-data
android:name="flutterEmbedding"
android:value="2" />
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"/>
</application>
</manifest>
広告を初期化する処理を追加
main.dartに広告ライブラリのimportと初期化処理を以下のように追加します。
import 'package:growing_sake/component/ad_banner.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
void main() async{
MobileAds.instance.initialize();
runApp(const GrowingSakeApp());
}
バナーを表示するための処理を追加
アダプティブバナーを表示するための処理をad_banner.dartファイルとして以下のように追加します。
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
class AdBanner extends StatefulWidget {
const AdBanner({
Key? key,
required this.size,
}) : super(key: key);
final AdSize size;
@override
_AdBannerState createState() => _AdBannerState();
}
class _AdBannerState extends State<AdBanner> {
late BannerAd banner;
@override
void initState() {
super.initState();
banner = _createBanner(widget.size);
}
@override
void dispose() {
banner.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SizedBox(
width: banner.size.width.toDouble(),
height: banner.size.height.toDouble(),
child: AdWidget(ad: banner),
);
}
String get bannerAdUnitId {
if (kDebugMode) {
// return BannerAd.testAdUnitId; // Deprecatedになった
// 公式ドキュメントで公開されているデモ広告ユニットIDを指定する
// https://developers.google.com/admob/android/test-ads?hl=ja
// https://developers.google.com/admob/ios/test-ads?hl=ja
return Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
}
if (Platform.isAndroid) {
return 'ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX'; // ここに発行したAndroid用の広告IDを設定
} else if (Platform.isIOS) {
return 'ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX'; // ここに発行したiOS用の広告IDを設定
} else {
// return BannerAd.testAdUnitId; // Deprecatedになった
// https://developers.google.com/admob/android/test-ads?hl=ja
// AndroidのテストIDを暫定で返却しておく
return 'ca-app-pub-3940256099942544/6300978111';
}
}
BannerAd _createBanner(AdSize size) {
return BannerAd(
size: size,
adUnitId: bannerAdUnitId,
listener: BannerAdListener(
onAdFailedToLoad: (Ad ad, LoadAdError error) {
banner.dispose();
},
),
request: const AdRequest(),
)..load();
}
}
バナー広告をBottmNavigationの上に表示する処理を追加
上記のad_banner.dartとして実装したバナー広告をBottomNavigationの上に表示するようにmain.dartファイルを以下のように修正します。
class GrowingSakeWidget extends StatefulWidget {
const GrowingSakeWidget({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<GrowingSakeWidget> createState() => _GrowingSakeWidgetState();
}
class _GrowingSakeWidgetState extends State<GrowingSakeWidget> {
int _currentIndex = 0;
final _pageWidgets = [
const SakeGridViewWidget(color:Colors.white, title:'Home'),
const SakeGridViewWidget(color:Colors.blue, title:'Timeline'),
const SakeGridViewWidget(color:Colors.orange, title:'Menu'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Growing Sake App'),
),
body: _pageWidgets.elementAt(_currentIndex),
bottomNavigationBar: Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
FutureBuilder(
future: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation.portrait,
MediaQuery.of(context).size.width.truncate()),
builder: (
BuildContext context,
AsyncSnapshot<AnchoredAdaptiveBannerAdSize?> snapshot,
) {
if (snapshot.hasData) {
final data = snapshot.data;
if (data != null) {
return Container(
height: 70,
color: Colors.white70,
child: AdBanner(size: data),
);
} else {
return Container(
height: 70,
color: Colors.white70,
);
}
} else {
return Container(
height: 70,
color: Colors.white70,
);
}
},
),
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.timeline), label: 'Timeline'),
BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'Menu'),
],
currentIndex: _currentIndex,
fixedColor: AppThemeColor.baseColor,
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
),
],
),
);
}
}
さいごに
FutterでAdMob広告を表示するための実装は以上となります。
この広告の実装をしたAndroidアプリ「日本酒を育てる」を無料で公開していますので是非試してみて下さい！
