메인 콘텐츠로 건너뛰기

​
라이트 팝업 광고 형태 소개

  • 전면 광고 유형입니다.
  • 8초 후에 자동으로 닫히게 됩니다. 인터스티셜이나, 리워드 비디오보다 UX를 해치지 않고 광고를 보여줄 수 있습니다.
  • Android 라이트팝업 예시
Android Light Popup Example Pn
  • iOS 라이트팝업 예시
Ios Light Popup Example Pn

​
인스턴스 생성 및 콜백 설정

DaroLightPopupAd 인스턴스를 생성하고 콜백을 설정합니다. 
import 'package:daro_flutter/daro_flutter.dart';

final lightPopupAd = DaroLightPopupAd(adUnitId: '{YOUR_AD_UNIT_ID}');

lightPopupAd.onAdLoadSuccess = (adInfo) {
  print('LightPopup ad loaded');
};
lightPopupAd.onAdLoadFail = (error) {
  print('LightPopup ad failed to load: ${error.message}');
};
lightPopupAd.onAdImpression = (adInfo) {
  print('LightPopup ad impression');
};
lightPopupAd.onAdClicked = (adInfo) {
  print('LightPopup ad clicked');
};
lightPopupAd.onAdShown = (adInfo) {
  print('LightPopup ad shown');
};
lightPopupAd.onAdFailedToShow = (error) {
  print('LightPopup ad failed to show: ${error.message}');
};
lightPopupAd.onAdDismiss = (adInfo) {
  print('LightPopup ad dismissed');
};

​
광고 로드하기

load()를 호출하여 광고를 로드합니다. 
lightPopupAd.load();

​
광고 보여주기

isReady()로 광고 준비 여부를 확인한 후 show()로 광고를 표시합니다. 
final isReady = await lightPopupAd.isReady();

if (isReady) {
  lightPopupAd.show();
}

​
리소스 해제

광고 사용이 끝나면 destroy()를 호출하여 리소스를 해제합니다. 
lightPopupAd.destroy();

​
광고 커스터마이징

DaroLightPopupStyle을 사용하여 라이트 팝업 광고의 UI를 커스터마이징할 수 있습니다. 
final lightPopupAd = DaroLightPopupAd(
  adUnitId: '{YOUR_AD_UNIT_ID}',
  style: DaroLightPopupStyle(
    backgroundColor: '#B2121416',              // 전체 배경색
    containerColor: '#121416',                 // 카드 배경색
    titleColor: '#F7FAFF',                     // 타이틀 색상
    bodyColor: '#B6BECC',                      // 본문 색상
    ctaBackgroundColor: '#EB2640',             // CTA 버튼 배경색
    ctaTextColor: '#FFFFFF',                   // CTA 버튼 텍스트 색상
    closeButtonColor: '#F7FAFF',               // 닫기 버튼 텍스트 색상
    closeButtonText: 'Close AD',               // 닫기 버튼 텍스트
    adMarkLabelTextColor: '#F7FAFF',           // 광고 마크 텍스트 색상
    adMarkLabelBackgroundColor: '#3E434F',     // 광고 마크 배경색
  ),
);

​
스타일 속성

속성설명
backgroundColor전체 배경색
containerColor카드 배경색
titleColor타이틀 색상
bodyColor본문 색상
ctaBackgroundColorCTA 버튼 배경색
ctaTextColorCTA 버튼 텍스트 색상
closeButtonColor닫기 버튼 텍스트 색상
closeButtonText닫기 버튼 텍스트
adMarkLabelTextColor광고 마크 텍스트 색상
adMarkLabelBackgroundColor광고 마크 배경색

​
구현 예시

import 'package:flutter/material.dart';
import 'package:daro_flutter/daro_flutter.dart';

class LightPopupAdPage extends StatefulWidget {
  const LightPopupAdPage({super.key});

  @override
  State<LightPopupAdPage> createState() => _LightPopupAdPageState();
}

class _LightPopupAdPageState extends State<LightPopupAdPage> {
  late final DaroLightPopupAd _lightPopupAd;
  String _status = 'Not Loaded';

  @override
  void initState() {
    super.initState();
    _lightPopupAd = DaroLightPopupAd(
      adUnitId: '{YOUR_AD_UNIT_ID}',
      style: DaroLightPopupStyle(
        backgroundColor: '#B2121416',
        containerColor: '#121416',
        titleColor: '#F7FAFF',
        bodyColor: '#B6BECC',
        ctaBackgroundColor: '#EB2640',
        ctaTextColor: '#FFFFFF',
        closeButtonColor: '#F7FAFF',
        closeButtonText: 'Close AD',
        adMarkLabelTextColor: '#F7FAFF',
        adMarkLabelBackgroundColor: '#3E434F',
      ),
    );
    _setupCallbacks();
  }

  void _setupCallbacks() {
    _lightPopupAd.onAdLoadSuccess = (adInfo) {
      setState(() => _status = 'Loaded');
    };

    _lightPopupAd.onAdLoadFail = (error) {
      setState(() => _status = 'Failed to Load');
      print('LightPopup ad failed to load: ${error.message}');
    };

    _lightPopupAd.onAdShown = (adInfo) {
      setState(() => _status = 'Shown');
    };

    _lightPopupAd.onAdFailedToShow = (error) {
      setState(() => _status = 'Failed to Show');
    };

    _lightPopupAd.onAdDismiss = (adInfo) {
      setState(() => _status = 'Not Loaded');
    };

    _lightPopupAd.onAdClicked = (adInfo) {
      print('LightPopup ad clicked');
    };

    _lightPopupAd.onAdImpression = (adInfo) {
      print('LightPopup ad impression');
    };
  }

  @override
  void dispose() {
    _lightPopupAd.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Light Popup Ad')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Status: $_status'),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                final isReady = await _lightPopupAd.isReady();
                if (isReady) {
                  _lightPopupAd.show();
                } else {
                  setState(() => _status = 'Loading...');
                  _lightPopupAd.load();
                }
              },
              child: Text(_status == 'Loaded' ? 'Show LightPopup' : 'Load LightPopup'),
            ),
          ],
        ),
      ),
    );
  }
}