[플러터] 리워드 광고 추가하기

 

선행과정

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

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

 

리워드 광고 파일 구조

파일 구조는 다음과 같다.

/lib
  /ads
    rewarded_ad_manager.dart     // 리워드 광고 관리 파일
  /screens
    rewarded_ad_screen.dart      // 리워드 광고를 화면에 표시하는 파일
  main.dart                      // 앱의 진입점 파일

 

리워드 광고 ad 로직 - rewarded_ad_manager.dart

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

 

리워드 광고 테스트 ID는 다음과 같습니다. 

ca-app-pub-3940256099942544/5224354917

 

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

import 'package:google_mobile_ads/google_mobile_ads.dart';

class RewardedAdManager {
  late RewardedAd _rewardedAd;
  bool _isRewardedAdReady = false;

  bool get isRewardedAdReady => _isRewardedAdReady;
  RewardedAd get rewardedAd => _rewardedAd;

  // 리워드 광고 로드
  void loadRewardedAd(Function onAdLoaded) {
    RewardedAd.load(
      adUnitId: 'ca-app-pub-3940256099942544/5224354917',  // 실제 광고 ID로 대체하세요
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          _rewardedAd = ad;
          _isRewardedAdReady = true;
          onAdLoaded();
        },
        onAdFailedToLoad: (error) {
          print('Failed to load a rewarded ad: $error');
        },
      ),
    );
  }

  // 리워드 광고 보여주기
  void showRewardedAd(Function onUserEarnedReward) {
    if (_isRewardedAdReady) {
      _rewardedAd.show(
        onUserEarnedReward: (ad, reward) {
          print('User earned reward: ${reward.amount}');
          onUserEarnedReward();
        },
      );
      _rewardedAd.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (ad) {
          ad.dispose();
          loadRewardedAd(() {});  // 광고가 닫히면 새로 로드
        },
      );
    } else {
      print('Rewarded Ad is not ready yet');
    }
  }

  // 자원 해제
  void dispose() {
    _rewardedAd.dispose();
  }
}

 

1. 리워드 광고 로드 함수 - loadRewardedAd

• loadRewardedAd 함수는 🎁 리워드 광고를 로드하는 함수입니다. 광고가 ✅ 성공적으로 로드되면 _rewardedAd에 광고 객체를 저장하고, _isRewardedAdReady를 true로 설정합니다.
• 테스트용 리워드 광고 🆔를 사용하여 광고 요청을 보낸 후, 성공 시 onAdLoader() 함수를 호출해 _isRewardedAdReady를 true로 갱신하고 _rewardedAd 값을 🔄 업데이트합니다.
• 광고 로드에 실패하면 'Failed to load a rewarded' 메시지를 📢 출력합니다.

2. 로드된 광고를 보여주는 함수 - showRewardedAd

• showRewardedAd 함수는 준비된 🎁 리워드 광고를 화면에 표시하는 함수입니다.
• if (_isRewardedAdReady) 조건문을 통해 광고가 준비되었는지 확인한 후, 준비된 경우 광고를 ▶ 실행합니다. 준비되지 않은 경우에는 메시지를 📢 출력하여 사용자가 상황을 알 수 있도록 합니다.
• _rewardedAd.show()를 호출하여 준비된 광고를 📺 표시합니다.
• onUserEarnedReward는 사용자가 광고를 끝까지 보고 🎁 리워드를 받을 때 호출되는 🔔 콜백입니다. 이 콜백에서 사용자가 획득한 🎁 리워드를 🛠️ 처리합니다.
• _rewardedAd.fullScreenContentCallback은 광고가 닫혔을 때 호출되는 🔔 콜백으로, 광고가 닫히면 ad.dispose()를 호출해 광고 리소스를 🗑️ 해제하고 새로운 광고를 다시 로드합니다. 이를 통해 광고가 한 번 표시된 후 자동으로 새로 로드되도록 설정할 수 있습니다.

 

리워드 광고 ad 스크린 - rewarded_ad_screen.dart

이 파일은 리워드 광고를 보여주는 UI 화면을 관리합니다. 광고를 보고 나면 리워드를 받았다는 메시지를 표시하는 기능도 포함되어 있습니다.

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

class RewardedAdScreen extends StatefulWidget {
  @override
  _RewardedAdScreenState createState() => _RewardedAdScreenState();
}

class _RewardedAdScreenState extends State<RewardedAdScreen> {
  final RewardedAdManager _rewardedAdManager = RewardedAdManager();
  bool _rewardReceived = false;  // 리워드 받은 상태 확인

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

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

  // 리워드 받았는지 확인
  void _onUserEarnedReward() {
    setState(() {
      _rewardReceived = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('리워드 광고 예시')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _rewardedAdManager.isRewardedAdReady
                  ? () => _rewardedAdManager.showRewardedAd(_onUserEarnedReward)
                  : null,
              child: Text('리워드 광고 보기'),
            ),
            SizedBox(height: 20),
            if (_rewardReceived)
              Text('리워드를 받았습니다!', style: TextStyle(color: Colors.green)),
          ],
        ),
      ),
    );
  }
}

 

onUserEarnedReward 함수 🎁

사용자가 🏆 리워드를 받았을 때 호출됩니다. 이 함수는 리워드 상태를 업데이트하고, 화면(UI)을 갱신합니다.

build 함수 🛠️

화면(UI)을 구성하는 함수입니다.

ElevatedButton ▶️

리워드 광고를 보는 버튼입니다. 광고가 준비되었을 때만 버튼이 활성화되며, 광고를 본 후 사용자가 리워드를 받을 수 있습니다.

• _rewardReceived가 true일 때: ✅ 사용자가 리워드를 받았다는 메시지가 화면(UI)에 표시됩니다.

 

main 문 - main.dart

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

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

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

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

 

결론

 

• rewarded_ad_manager.dart: 리워드 광고의 로드, 상태 관리, 표시, 해제를 담당합니다.
• rewarded_ad_screen.dart: 리워드 광고가 표시되는 화면 UI를 담당하고, 사용자가 리워드를 받을 때 UI를 업데이트합니다.

 

실행화면

실행 전

 

실행 후