[플러터] 배너 광고 추가하기

선행과정

배너 광고를 넣기 전에 환경설정을 완료해야 한다.

[플러터] 앱 광고 환경설정

배너 광고 파일 구조

파일 구조는 다음과 같다.

/lib
  /ads
    banner_ad_manager.dart       // 배너 광고 관리 파일
  /screens
    banner_ad_screen.dart        // 배너 광고를 화면에 표시하는 파일
  main.dart                      // 앱의 진입점 파일

배너 광고 ad 로직 - banner_ad_manager.dart

이 파일은 배너 광고를 관리하는 클래스입니다. 광고 로딩, 광고 준비 상태 확인, 광고 표시, 사용자에게 배너 광고 지급 처리, 리소스 해제 등을 담당합니다.

배너 광고 테스트 ID는 다음과 같습니다.

ca-app-pub-3940256099942544/6300978111

 

나중에 구글 애드몹에서 광고 ID를 받아야합니다.

import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerAdManager {
  late BannerAd _bannerAd;
  bool _isBannerAdReady = false;

  bool get isBannerAdReady => _isBannerAdReady;
  BannerAd get bannerAd => _bannerAd;

  // 배너 광고 로드
  void loadBannerAd(Function onAdLoaded) {
    _bannerAd = BannerAd(
      adUnitId: 'ca-app-pub-3940256099942544/6300978111',  // 실제 광고 ID로 대체하세요
      request: AdRequest(),
      size: AdSize.mediumRectangle,
      listener: BannerAdListener(
        onAdLoaded: (_) {
          _isBannerAdReady = true;
          onAdLoaded();  // 광고 로딩이 완료되면 UI를 업데이트하는 콜백 호출
        },
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          print('Failed to load a banner ad: $error');
        },
      ),
    )..load();
  }

  // 광고 리소스 해제
  void dispose() {
    _bannerAd.dispose();
  }
}

💡 BannerAdManager: 배너 광고의 상태를 관리하는 클래스입니다.

🔧 주요 구성 요소

• _isBannerAdReady: 광고가 준비되었는지 여부를 나타내는 변수입니다. 광고가 로드되면 ✅로 설정됩니다.
• loadBannerAd: 배너 광고를 로드하는 함수입니다. 광고가 성공적으로 로드되면 onAdLoaded 콜백을 호출하여 UI를 갱신할 수 있습니다.
• dispose: 배너 광고 리소스를 해제하여 메모리 누수를 방지하는 함수입니다.

배너 광고 ad 스크린 - banner_ad_screen.dart

이 파일은 베너 광고를 보여주는 UI 화면을 관리합니다.

import 'package:flutter/material.dart';
import '../ads/banner_ad_manager.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerAdScreen extends StatefulWidget {
  @override
  _BannerAdScreenState createState() => _BannerAdScreenState();
}

class _BannerAdScreenState extends State<BannerAdScreen> {
  final BannerAdManager _bannerAdManager = BannerAdManager();

  @override
  void initState() {
    super.initState();
    _bannerAdManager.loadBannerAd(() {
      setState(() {});  // 광고 로드 완료 시 UI 업데이트
    });
  }

  @override
  void dispose() {
    _bannerAdManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('배너 광고 예시')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_bannerAdManager.isBannerAdReady)
              Container(
                alignment: Alignment.center,
                child: AdWidget(ad: _bannerAdManager.bannerAd),
                width: _bannerAdManager.bannerAd.size.width.toDouble(),
                height: _bannerAdManager.bannerAd.size.height.toDouble(),
              ),
            if (!_bannerAdManager.isBannerAdReady)
              Text('배너 광고를 로딩 중입니다...'),
          ],
        ),
      ),
    );
  }
}

 

🛠️ BannerAdScreen: 배너 광고가 표시되는 화면입니다. 이 클래스는 🏠 StatefulWidget을 사용하여 광고가 로드되었을 때 화면을 업데이트합니다.

🛠️ _bannerAdManager.loadBannerAd(): 배너 광고를 로드하는 함수로, 광고가 준비되면 🎨 UI를 갱신하여 광고를 화면에 표시합니다.

💻 AdWidget: 배너 광고를 화면에 표시하기 위해 사용하는 Google Mobile Ads SDK의 위젯입니다. 이 위젯을 사용해 로드된 광고를 🎨 UI에 통합할 수 있습니다.

main 문 - main.dart

메인 문은 간단하다 그저 스크린을 보여줄 뿐

import 'package:flutter/material.dart';
import 'screens/interstitial_ad_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: InterstitialAdScreen(),  // 전면 광고 화면으로 시작
    );
  }
}

실행화면

배너 광고