[Flutter] 구글 애드몹 광고 넣기

https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ko&authuser=2#2

Flutter 앱에 AdMob 광고 추가  |  Google Codelabs

https://docs.flutter.dev/cookbook/plugins/google-mobile-ads

Add ads to your mobile Flutter app or game

 

 

위 링크의 순서를 보면서 Flutter에 구글 애드몹을 넣어보겠습니다.

 

1. GOOGLE AdMob 계정 만들기

https://admob.google.com/signup?sac=true

AdMob

위 링크에 들어가서 계정을 만듭니다.

 

 

2. 앱 추가하기

 

 

3. 광고 아이디 생성

 

1. 광고 단위(Ad units) 설정

 

저는 Banner를 해보겠습니다

 

해당 단위의 이름을 넣어주시면 아래와 같이 ID가 나옵니다

 

---

이제 Android, IOS 코드를 수정해봅시다.

Android

1. Manifest.xml에 코드 추가

    //android/app/src/main/AndroidManifest.xml


    <manifest>
        <application>
            ...

            <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
            <meta-data
                android:name="com.google.android.gms.ads.APPLICATION_ID"
                android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
        </application>
    </manifest>

 

여기에서 android:value는 App Settings - App info에서 App ID를 넣어주시면 됩니다.

 

IOS

1. ios/Runner/Info.plist 코드 추가

    <key>GADApplicationIdentifier</key>
    <string>ca-app-pub-################~##########</string>

 

순서는 상관 없으니 <dict> 바로 밑에 추가해도 됩니다.

마찬가지로 App Settings - App info에 들어가서 App ID를 복사하고 string에 넣어줍니다

---

 

이제 Flutter 코드를 수정해봅시다

 

Flutter

1. Initialize the Mobile Ads SDK

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

      runApp(MyApp());
    }

 

 

2. 배너 위젯 코드 작성

    import 'dart:io';

    import 'package:flutter/widgets.dart';
    import 'package:google_mobile_ads/google_mobile_ads.dart';

    class MyBannerAdWidget extends StatefulWidget {
      /// The requested size of the banner. Defaults to [AdSize.banner].
      final AdSize adSize;

      /// The AdMob ad unit to show.
      ///
      /// TODO: replace this test ad unit with your own ad unit
      final String adUnitId = Platform.isAndroid
          // 이곳에 광고 단위 ID를 Android / IOS에 맞게 넣어주면 됩니다
          ? 'ca-app-pub-3940256099942544/6300978111'
          // ... or this one on iOS.
          : 'ca-app-pub-3940256099942544/2934735716';

      MyBannerAdWidget({
        super.key,
        this.adSize = AdSize.banner,
      });

      @override
      State<MyBannerAdWidget> createState() => _MyBannerAdWidgetState();
    }

    class _MyBannerAdWidgetState extends State<MyBannerAdWidget> {
      /// The banner ad to show. This is `null` until the ad is actually loaded.
      BannerAd? _bannerAd;

      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: SizedBox(
            width: widget.adSize.width.toDouble(),
            height: widget.adSize.height.toDouble(),
            child: _bannerAd == null
                // Nothing to render yet.
                ? SizedBox()
                // The actual ad.
                : AdWidget(ad: _bannerAd!),
          ),
        );
      }

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

      @override
      void dispose() {
        _bannerAd?.dispose();
        super.dispose();
      }

      /// Loads a banner ad.
      void _loadAd() {
        final bannerAd = BannerAd(
          size: widget.adSize,
          adUnitId: widget.adUnitId,
          request: const AdRequest(),
          listener: BannerAdListener(
            // Called when an ad is successfully received.
            onAdLoaded: (ad) {
              if (!mounted) {
                ad.dispose();
                return;
              }
              setState(() {
                _bannerAd = ad as BannerAd;
              });
            },
            // Called when an ad request failed.
            onAdFailedToLoad: (ad, error) {
              debugPrint('BannerAd failed to load: $error');
              ad.dispose();
            },
          ),
        );

        // Start loading.
        bannerAd.load();
      }
    }