Flutter 앱 개발 14 : 광고 달기

이제 앱에 AdMob 배너 광고를 달아보자.

광고를 달기 위해 사전 준비가 필요한데, 아래 포스트를 참고하기 바란다.

 

Flutter 앱 개발 13 : 광고 달기 사전 준비

 

1. AdmobBanner 클래스 추가

애드몹 배너를 로딩하는 클래스를 추가하자. lib/util/admob_banner.dart 파일을 추가하자.

import 'package:firebase_admob/firebase_admob.dart';

class AdmobBanner {
  final _unitId = 'ca-app-pub-3940256099942544/6300978111';  // 테스트 유닛 아이디
  final _appId = 'ca-app-pub-3940256099942544~3347511713';   // 테스트 앱 아이디
  BannerAd _bannerAd;

  AdmobBanner() {
    FirebaseAdMob.instance.initialize(appId: _appId); // 초기화
    _loadBanner(); // 배너 광고 로드
  }

  void _loadBanner() {
    // 배너 광고가 존재 하면 제거
    if (_bannerAd != null) _bannerAd.dispose();
    // fullBanner 사이즈 배너 광고 로드
    _bannerAd = BannerAd(adUnitId: _unitId, size: AdSize.fullBanner)
      ..load()
      ..show();
  }
}

우리는 FullBanner 사이즈 배너를 사용했다. 참고로 아래 표가 애드몹이 제공하는 배너 종류다. Firebase Admob 에서 현재 지원하지 않는 사이즈는 취소선을 그어두었으니 참고하기 바란다.

320x50	배너	휴대전화 및 태블릿	BANNER
320x100	대형 배너	휴대전화 및 태블릿	LARGE_BANNER
300x250	IAB 중간 직사각형	휴대전화 및 태블릿	MEDIUM_RECTANGLE
468x60	IAB 전체 크기 배너	태블릿	FULL_BANNER
728x90	IAB 리더보드	태블릿	LEADERBOARD
제공된 폭x적응형 높이	적응형 배너	휴대전화 및 태블릿	해당 사항 없음
화면 폭x32|50|90	스마트 배너	휴대전화 및 태블릿	SMART_BANNER

 

2. AdmobBanner 클래스 생성

AdmobBanner 클래스는 생성되기만하면 광고를 로드하게 되어있다. 따라서, 앱의 메인 뷰인 Contents 뷰에서 생성해보자.

lib/view/contents.dart 에서 AdmobBanner 를 생성한다.

import 'package:apod/util/admob_banner.dart';
...

class Contents extends StatelessWidget {
  final admob = AdmobBanner(); // 애드몹 생성
  ...
}

 

3. 광고 크기 만큼 컨텐츠 높이 조정

기본적으로 애드몹 배너 광고는 앱 컨텐츠를 가리면서 보여진다. 따라서, 하단에 약간의 공간을 만들어 주는 것이 좋다. 지금까지 우리가 만든 뷰 Contents 와 ApodDetail 의 하단에 공간을 만들어보자. FullBanner 높이인 60만큼 공간을 만든다.

lib/view/contents.dart 에서 Scaffold의 bottomNavigationBar에 높이 60 짜리 Container를 추가한다.

class Contents extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      // Bottom Navigation Bar 에 60 높이 Container 추가
      bottomNavigationBar: Container(height: 60),
    );
  }
  ...
}

 

lib/view/apod_detail.dart 에서 Scaffold의 bottomNavigationBar에 높이 60 짜리 Container를 추가한다.

class ApodDetail extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
	...
    return Scaffold(
	  ...
      // Bottom Navigation Bar 에 60 높이 Container 추가
      bottomNavigationBar: Container(height: 60),
    );
  }
}

 

4. 결과

하단 광고를 확인할 수 있다.