[Flutter] flutter Admob 연동 (android + ios)

flutter 에 admob을 연동하여 banner ad 띄워보기

1. Admob Test 용 Project 생성

admob test를 위한 flutter project를 생성 합니다.

$ flutter create admob_test

2. Android 및 iOS 설정에 Admob App ID 추가

App ID는 https://support.google.com/admob/answer/7356431?hl=ko 링크를 통해 확인할 수 있습니다.

- Android

android/app/src/main/AndroidManifest.xml 에 <meta-data>를 추가하여 App ID를 설정 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.admob_test">
   <application
        android:label="admob_test"
        android:icon="@mipmap/ic_launcher">
        <meta-data
              android:name="com.google.android.gms.ads.APPLICATION_ID"
              android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
        ...
        </activity>
    </application>
</manifest>

- iOS

ios/Runner/Info.plist 에 App ID가 포함된 GADApplicationIdentifier 키를 추가 합니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>GADApplicationIdentifier</key>
  	<string>ca-app-pub-2778546304304506~6600829653</string>
	<key>CFBundleDevelopmentRegion</key>
	<string>$(DEVELOPMENT_LANGUAGE)</string>
    ...
</dict>
</plist>

3. 광고 SDK 초기화 및 광고 호출

lib/main.dart 에 아래 코드를 추가해서 mobile ads initialize를 실행 합니다.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(const MyApp());
}

ads를 load 합니다. 

ad unit id 는 테스트용 unit id 를 사용 합니다. (참고 - https://developers.google.com/admob/android/test-ads?hl=ko)

BannerAd? banner;

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();

	// Load ads
    banner = BannerAd(
      adUnitId: 'ca-app-pub-3940256099942544/6300978111',
      size: AdSize.banner,
      request: AdRequest(),
      listener: BannerAdListener(),
    )..load();

    final BannerAdListener listener = BannerAdListener(
      // Called when an ad is successfully received.
      onAdLoaded: (Ad ad) => print('Ad loaded.'),
      // Called when an ad request failed.
      onAdFailedToLoad: (Ad ad, LoadAdError error) {
        // Dispose the ad here to free resources.
        ad.dispose();
        print('Ad failed to load: $error');
      },
      // Called when an ad opens an overlay that covers the screen.
      onAdOpened: (Ad ad) => print('Ad opened.'),
      // Called when an ad removes an overlay that covers the screen.
      onAdClosed: (Ad ad) => print('Ad closed.'),
      // Called when an impression occurs on the ad.
      onAdImpression: (Ad ad) => print('Ad impression.'),
    );

  }

하단에 배너 광고를 고정하기 위해서 bottomNavigationBar에 광고를 게재 합니다.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: Container(
        height: 50.0,
        color: Colors.transparent,
        child: AdWidget(
          ad: banner!,
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

시뮬레이터 실행 후 테스트 광고가 정상적으로 게재되는 지 확인 합니다.

Android

iOS