flutter getx를 활용해 admob 추가하기

flutter getx를 활용해 admob 추가하기

라이브러리 설치

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

참고

Tags: , , , , ,

Leave a Reply