[플러터] 전면 광고 추가하기

 

선행과정

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

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

 

전면 광고 파일 구조

파일 구조는 다음과 같다.

/lib
  /ads
    interstitial_ad_manager.dart  // 전면 광고 관리 파일
  /screens
    interstitial_ad_screen.dart   // 전면 광고를 화면에 표시하는 파일
  main.dart                       // 앱의 진입점 파일

 

전면 광고 ad 로직 - interstitial_ad_manager.dart

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

 

전면 광고 테스트 ID는 다음과 같습니다. 

ca-app-pub-3940256099942544/1033173712

 

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

import 'package:google_mobile_ads/google_mobile_ads.dart';

class InterstitialAdManager {
  late InterstitialAd _interstitialAd;
  bool _isInterstitialAdReady = false;

  bool get isInterstitialAdReady => _isInterstitialAdReady;
  InterstitialAd get interstitialAd => _interstitialAd;

  // 전면 광고 로드
  void loadInterstitialAd(Function onAdLoaded) {
    InterstitialAd.load(
      adUnitId: 'ca-app-pub-3940256099942544/1033173712',  // 실제 광고 ID로 대체하세요
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          _interstitialAd = ad;
          _isInterstitialAdReady = true;  // 광고가 준비되면 true로 설정
          onAdLoaded();  // UI 업데이트를 위한 콜백 호출
        },
        onAdFailedToLoad: (error) {
          print('Failed to load an interstitial ad: $error');
          _isInterstitialAdReady = false;
        },
      ),
    );
  }

  // 전면 광고 보여주기
  void showInterstitialAd(Function onAdDismissed) {
    if (_isInterstitialAdReady) {
      _interstitialAd.show();
      _interstitialAd.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (ad) {
          ad.dispose();
          loadInterstitialAd(() {});  // 광고가 닫히면 새로 로드
          onAdDismissed();  // 광고 닫힘 처리 콜백 호출
        },
        onAdFailedToShowFullScreenContent: (ad, error) {
          ad.dispose();
          print('Failed to show interstitial ad: $error');
          _isInterstitialAdReady = false;
        },
      );
    } else {
      print('Interstitial Ad is not ready yet');
    }
  }

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

 

InterstitialAdManager는 전면 광고의 상태, 로딩, 표시 등을 관리하는 클래스입니다.

📊 변수 및 함수 설명

• 👉 _isInterstitialAdReady: 광고가 준비되었는지 여부를 나타내는 변수입니다. 광고가 성공적으로 로드되면 🆗 true로 설정되며, 실패하면 ❌ false로 설정됩니다.
• 💾 loadInterstitialAd: 광고를 로드하는 함수입니다. 로드가 성공하면 광고 객체를 저장하고, ✅ onAdLoaded 콜백을 호출하여 UI 갱신을 처리할 수 있습니다.
• ✅ onAdLoaded : 콜백이 호출되면  👉 _isInterstitialAdReady가 true로 바뀌고 _interstitialAd가 새로운 값으로 업데이트 된다.
• 🎥 showInterstitialAd: 광고가 준비되면 화면에 광고를 표시하는 함수입니다. 광고가 닫힌 후에는 새 광고를 로드하여 광고가 다시 준비될 수 있도록 합니다.
• 💡 dispose: 광고 리소스를 해제하여 메모리 누수를 방지하는 함수입니다.

 

전면 광고 ad 스크린 - interstitial_ad_screen.dart

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

import 'package:flutter/material.dart';
import '../ads/interstitial_ad_manager.dart';

class InterstitialAdScreen extends StatefulWidget {
  @override
  _InterstitialAdScreenState createState() => _InterstitialAdScreenState();
}

class _InterstitialAdScreenState extends State<InterstitialAdScreen> {
  final InterstitialAdManager _interstitialAdManager = InterstitialAdManager();

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

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

  // 전면 광고가 닫히면 호출되는 함수
  void _onAdDismissed() {
    print("전면 광고가 닫혔습니다.");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('전면 광고 예시')),
      body: Center(
        child: ElevatedButton(
          onPressed: _interstitialAdManager.isInterstitialAdReady
              ? () => _interstitialAdManager.showInterstitialAd(_onAdDismissed)
              : null,  // 광고가 준비되지 않았으면 비활성화
          child: Text('전면 광고 보기'),
        ),
      ),
    );
  }
}

 

InterstitialAdScreen: 🛠️ 전면 광고를 보여주는 화면을 정의하는 StatefulWidget입니다. 이 위젯은 광고를 로드하고, 준비가 완료되면 화면을 갱신하여 사용자에게 광고를 제공합니다.

_interstitialAdManager.loadInterstitialAd(): 광고를 로드하는 함수로, 광고가 준비되면 UI를 갱신하여 사용자에게 광고가 준비되었음을 알립니다.

_onAdDismissed: 사용자가 광고를 본 후 광고가 닫힐 때 호출되는 함수입니다. 이 함수에서 광고가 닫힌 후 처리할 로직을 정의할 수 있습니다.

ElevatedButton: 광고를 보여주는 버튼입니다. 광고가 준비된 경우 버튼이 활성화되며, 준비되지 않은 경우 비활성화 상태로 유지됩니다.

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(),  // 전면 광고 화면으로 시작
    );
  }
}

 

실행화면

실행 전

 

실행 후