Flutter Admobのデモ広告 （バナー）を表示させるまでの設定

はじめに

久々にFlutterアプリを作りAdmobを使おうとしたのだが、過去にも使ったことがあるのに少し時間がかかってしまった。
基本的には毎回ググるのでも問題ないのだが、毎回探すの少し面倒なので自分用メモとして端的に手順だけメモする。

環境

【PC】
　　MacBook Air (M1, 2020)

【各SWバージョン】
　・macOS Big Sur 11.6.1
　・Flutter 2.5.3　（dart 2.14.4）
　・Xcode 13.1
　・google_mobile_ads: ^1.0.1

メモ内容

① 必要パッケージのインストール

pubspec.yaml にgoogle_mobile_adsを追記。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^1.0.1

ターミナルで flutter pub get を実行

② Admob のサイトでアプリを追加する

　https://apps.admob.com/

③ 設定ファイルを編集

iOSでAdmobを使うための設定として、iOS/Runner/Info.plistを編集。

Info.plist

	<key>LSRequiresIPhoneOS</key>
	<true/>
ここから追記↓
	<key>GADApplicationIdentifier</key>
	<string>Admob上のアプリIDを入力</string>
	<key>SKAdNetworkItems</key>
	<array>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>cstr6suwn9.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>4fzdc2evr5.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>2fnua5tdw4.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>ydx93a7ass.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>5a6flpkh64.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>p78axxw29g.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>v72qych5uu.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>c6k4g5qg8m.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>s39g8k73mm.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>3qy4746246.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>3sh42y64q3.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>f38h382jlk.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>hs6bdukanm.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>prcb7njmu6.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>v4nxqhlyqp.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>wzmmz9fp6w.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>yclnxrl5pm.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>t38b2kh725.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>7ug5zh24hu.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>9rd848q2bz.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>n6fk4nfna4.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>kbd757ywx3.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>9t245vhmpl.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>4468km3ulz.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>2u9pt9hc89.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>8s468mfl3y.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>av6w8kgt66.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>klf5c3l5u5.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>ppxm28t8ap.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>424m5254lk.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>uw77j35x4d.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>578prtvx9j.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>4dzt52r2t5.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>e5fvkxwrpn.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>8c4e2ghe7u.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>zq492l623r.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>3qcr597p9d.skadnetwork</string>
		</dict>
	</array>

AndroidでAdmobを使うためには、android/app/src/main/AndroidManifest.xmlを編集する必要がある。

AndroidManifest.xml

   <application
        android:label="warikan_dev"
        android:icon="@mipmap/ic_launcher">
　　　↓ ここを追記！
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"　
            android:value="Admob上のアプリIDを入力" />
　　　↑↑↑↑↑↑↑↑↑↑↑↑
        <activity
          ----------省略---------------
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
    </application>

※ <application>の直下に記述すること。

③ デモ広告の実装

main関数内に初期化処理を記載

main.dart

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 初期化処理
  MobileAds.instance.initialize(); // 初期化処理
  runApp(const MyApp());
}

ウィジェットビルドの前にインスタンス化

main.dart

class _MyHomePageState extends State<MyHomePage> {
  // バナー広告をインスタンス化
  final BannerAd myBanner = BannerAd(
    adUnitId: 'ca-app-pub-3940256099942544/2934735716',
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(),
  )..load();

※上記で使っているUnitIDはiOS用のデモ用ID
Android用のデモ用バナー広告のIDは ca-app-pub-3940256099942544/6300978111 だが、このUnitIDは知らない内に変更されるかもしれないので、使う際は一応チェックした方が良い。

ウィジェットビルドのどこかにAdmobウィジェットを追加

main.dart

  Container(
    height: 50.0,   //バナー広告のサイズ 320×50 なので
    width: double.infinity,
    child: AdWidget(ad: myBanner),
  ),

以上でデモ広告が表示される様になる。