라이브러리 설치
admob 추가를 위해 admob 라이브러리인 google_mobile_ads을 설치합니다.
flutter pub add get flutter pub add google_mobile_ads
AndroidManifest.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>
예제 프로그램이기 때문에 저는 Sample Admob App ID를 그대로 입력했습니다.
여기까지하고 우선 기본 UI를 만들어보겠습니다. 기본 UI는 메인 화면과 하단에 배너 광고가 들어갈 부분 이렇게 두 개의 위젯 구성입니다.
기본 UI 만들기
main.dart
import 'package:admob_example/app.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GetMaterialApp(initialRoute: "/", getPages: [ GetPage(name: "/", page: () => App(), transition: Transition.fade), ]); } }
app.dart
import 'package:flutter/material.dart'; import 'package:get/get.dart'; class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( "Test Admob", textAlign: TextAlign.center, ), ), bottomNavigationBar: BottomAppBar( child: Container( height: 50.0, color: Colors.grey, child: Text("Admob 위치"), ), ), ); } }
이렇게 준비를하고 앱을 실행하면 아래와 같은 화면이 보입니다.
이제 GetX를 이용해서 하단에 광고를 띄워보겠습니다.
GetX를 이용한 Admob 띄우기
app_controller.dart 생성
import 'dart:io'; import 'package:get/get.dart'; import 'package:google_mobile_ads/google_mobile_ads.dart'; class AppController extends GetxService { static AppController get to => Get.find(); // TEST ADMOB final String androidTestUnitId = 'ca-app-pub-3940256099942544/6300978111'; late BannerAd banner; RxBool isBannerReady = false.obs; @override void onInit() { super.onInit(); initBanner(); } void initBanner() { print("initBanner"); print(Platform.isIOS ? androidTestUnitId : androidTestUnitId); BannerAd _banner = BannerAd( size: AdSize.banner, // adUnitId: Platform.isIOS ? androidTestUnitId : androidTestUnitId, adUnitId: androidTestUnitId, request: AdRequest(), listener: BannerAdListener( onAdLoaded: (ad) { isBannerReady(true); print("ready true"); }, onAdFailedToLoad: (ad, error) { isBannerReady(false); print("ready false"); }, ), )..load(); banner = _banner; } }
본래는 iOS와 Android를 구분해서 광고를 띄우는데 본 포스트에서는 Android를 기준으로만 예제를 작성했습니다. 중간에 Platform을 구분하는 코드가 있는데 이를 활성화 하고 TestUnitId 또한 맞게 적용하시면 됩니다.
main.dart 수정
import 'package:admob_example/app.dart'; import 'package:admob_example/app_controller.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:google_mobile_ads/google_mobile_ads.dart'; 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 GetMaterialApp(initialRoute: "/", getPages: [ GetPage( name: "/", page: () => App(), transition: Transition.fade, binding: BindingsBuilder(() { Get.put(AppController()); })), ]); } }
AppController를 사용하기 위한 binding 부분과 admob 사용을 위한 초기화 코드가 추가 되었습니다.
app.dart 수정
import 'package:admob_example/app_controller.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:google_mobile_ads/google_mobile_ads.dart'; class App extends GetView<AppController> { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( "Test Admob", textAlign: TextAlign.center, ), ), bottomNavigationBar: Obx( () => BottomAppBar( child: Container( height: 50.0, color: Colors.grey, child: controller.isBannerReady.value == true ? AdWidget(ad: controller.banner) : Container(child: Text("Error to load admob")), ), ), ), ); } }
Admob 로딩 값에 따라 광고를 띄우거나 비어있는 Container를 띄울 수 있는 조건문이 추가되었습니다. 그리고 Obx를 이용해 동적으로 isBannerReady 변수를 가져오는 걸 확인할 수 있습니다.
결과화면
Github LInk : https://github.com/warnus/flutter_admob_getx_example