FlutterでAdMobバナー広告をフッターまたはインラインで設置

Android Studio Chipmunk | 2021.2.1 Patch 1<br>
Flutter 3.0.3<br>
Windows 11 Pro 21H2

<a href="https://developers.google.com/admob/flutter/quick-start" target="_blank">https://developers.google.com/admob/flutter/quick-start</a>

## Android / iOS を判定

<a href="https://api.flutter.dev/flutter/dart-io/Platform-class.html" target="_blank">https://api.flutter.dev/flutter/dart-io/Platform-class.html</a>

```
import 'dart:io';

if (Platform.isAndroid) {
} else if (Platform.isIOS) {
}
```

## Web を判定

<a href="https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html" target="_blank">https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html</a>

```
import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) {
	// Web
}

```

## adMob

<a href="https://pub.dev/packages/google_mobile_ads" target="_blank">https://pub.dev/packages/google_mobile_ads</a>

以下は android / iOS を判定してバナーを構築。<br>
Webの場合はAdMobではなくAdSenseを別途設置する為、その表示領域を確保のみ。

```
import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdMob {
  late BannerAd _adMobBanner;
  bool _isAdMob = false;
  AdMob() {
    String adBannerUnitId = '';
    if (!kIsWeb && Platform.isAndroid) {
      adBannerUnitId = 'ca-app-pub-3940256099942544/6300978111';  //test id
      _isAdMob = true;
    } else if (!kIsWeb && Platform.isIOS) {
      adBannerUnitId = 'ca-app-pub-3940256099942544/6300978111';  //test id
      _isAdMob = true;
    }
    if (_isAdMob) {
      _adMobBanner = BannerAd(
        adUnitId: adBannerUnitId,
        size: AdSize.banner,
        request: const AdRequest(),
        listener: const BannerAdListener(),
      );
    }
  }
  void load() {
    if (_isAdMob) {
      _adMobBanner.load();
    }
  }
  Widget getAdBannerWidget() {
    if (_isAdMob) {
      return Container(
        alignment: Alignment.center,
        width: _adMobBanner.size.width.toDouble(),
        height: _adMobBanner.size.height.toDouble(),
        child: AdWidget(ad: _adMobBanner),
      );
    } else {
      return Container(height: 150);
    }
  }
  double getAdBannerHeight() {
    if (_isAdMob) {
      return _adMobBanner.size.height.toDouble();
    } else {
      return 150;  //for web
    }
  }
}
```

## main.dart

```
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AdMob adMob = AdMob();
  @override
  void initState() {
    super.initState();
    adMob.load();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      ),
      body: Center(
        child: Column(
          children: [
            Expanded(
              child: Container(),
            ),
            SizedBox(
              width: double.infinity,
              child: adMob.getAdBannerWidget(),
            ),
          ]
        )
      ),
    );
  }
}
```

FlutterでAdMobバナー広告をフッターまたはインラインで設置

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他