본문 바로가기
Development Solutions/Flutter & Dart

[flutter][google_mobile_ads ] Google how that banner ads aedeumop to flutter app. (플러터 앱에 구글 애드몹 배너 광고 다는 방법)

by Dev Diary Hub 2022. 1. 17.
반응형

[flutter][google_mobile_ads ]

Google how that banner ads aedeumop to flutter app.

(플러터 앱에 구글 애드몹 배너 광고 다는 방법)

 

 

구글에서 정식 지원하는 애드몹 라이브러리.

google_mobile_ads 

다른 이름의 비슷한 라이브러리가 있는데 정식지원하지 않으므로, 리스크를 감당해야할 수도 있다. (개발자의 지원 중단 등)

(AdMob library officially supported by Google.

google_mobile_ads 
There is a similar library with a different name, but it is not officially supported, so you may have to take the risk. (Discontinuation of support from developers, etc.))

 

작업 순서
  1. pubspec.yml에 아래 코드를 삽입 후, pub get 명령 실행
    1. dependencies:
        google_mobile_ads: ^1.0.1
  2.  광고를 추가할 스크린에 라이브러리 import
    1. import 'package:google_mobile_ads/google_mobile_ads.dart';
  3. 배너 광고 초기화
    1. class _HomePageState extends State<HomePage> {
        final _inlineAdIndex = 3;
        ...
        late BannerAd _inlineBannerAd;
        ...
        bool _isInlineBannerAdLoaded = false;
        ...
    2. void _createInlineBannerAd() {
          _inlineBannerAd = BannerAd(
            size: AdSize.mediumRectangle,
            adUnitId: AdHelper.bannerAdUnitId,
            request: AdRequest(),
            listener: BannerAdListener(
              onAdLoaded: (_) {
                setState(() {
                  _isInlineBannerAdLoaded = true;
                });
              },
              onAdFailedToLoad: (ad, error) {
                ad.dispose();
              },
            ),
          );
          _inlineBannerAd.load();
        }
    3. @override
      void initState() {
        super.initState();
        ...
        _createInlineBannerAd();
      }
      
      @override
      void dispose() {
        super.dispose();
        ...
        _inlineBannerAd.dispose();
      }
    4. 배너 광고 위젯을 적당한 위치에 생성
      1. return Container(
              padding: EdgeInsets.only(
                bottom: 10,
              ),
              width: _inlineBannerAd.size.width.toDouble(),
              height: _inlineBannerAd.size.height.toDouble(),
              child: AdWidget(ad: _inlineBannerAd),
            );

 

 

끝!

(done!)

 

 

 

google_mobile_ads package

 

https://pub.dev/packages/google_mobile_ads

 

google_mobile_ads | Flutter Package

Flutter plugin for Google Mobile Ads, supporting banner, interstitial (full-screen), rewarded and native ads

pub.dev

반응형