메인 콘텐츠로 건너뛰기

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

  • 전면 광고 유형입니다.
  • 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();
}

​
리소스 해제

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

​
광고 커스터마이징

DaroLightPopupStyle을 사용하여 라이트 팝업 광고의 UI를 커스터마이징할 수 있습니다. Flutter의 Color 객체를 직접 전달합니다. 
final lightPopupAd = DaroLightPopupAd(
  adUnitId: '{YOUR_AD_UNIT_ID}',
  style: DaroLightPopupStyle(
    backgroundColor: const Color(0xB2121416),  // 전체 배경색
    containerColor: const Color(0xFF121416),   // 카드 배경색
    titleColor: const Color(0xFFF7FAFF),       // 타이틀 색상
    bodyColor: const Color(0xFFB6BECC),        // 본문 색상
    ctaBackgroundColor: const Color(0xFFEB2640), // CTA 버튼 배경색
    ctaTextColor: const Color(0xFFFFFFFF),     // CTA 버튼 텍스트 색상
    closeButtonColor: const Color(0xFFF7FAFF), // 닫기 버튼 텍스트 색상
    closeButtonText: 'Close AD',               // 닫기 버튼 텍스트
    adMarkLabelTextColor: const Color(0xFFF7FAFF),   // 광고 마크 텍스트 색상
    adMarkLabelBackgroundColor: const Color(0xFF3E434F), // 광고 마크 배경색
  ),
);

​
스타일 속성

속성타입설명
backgroundColorColor?전체 배경색
containerColorColor?카드 배경색
titleColorColor?타이틀 색상
bodyColorColor?본문 색상
ctaBackgroundColorColor?CTA 버튼 배경색
ctaTextColorColor?CTA 버튼 텍스트 색상
closeButtonColorColor?닫기 버튼 텍스트 색상
closeButtonTextString?닫기 버튼 텍스트
adMarkLabelTextColorColor?광고 마크 텍스트 색상
adMarkLabelBackgroundColorColor?광고 마크 배경색

​
구현 예시

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: const Color(0xB2121416),
        containerColor: const Color(0xFF121416),
        titleColor: const Color(0xFFF7FAFF),
        bodyColor: const Color(0xFFB6BECC),
        ctaBackgroundColor: const Color(0xFFEB2640),
        ctaTextColor: const Color(0xFFFFFFFF),
        closeButtonColor: const Color(0xFFF7FAFF),
        closeButtonText: 'Close AD',
        adMarkLabelTextColor: const Color(0xFFF7FAFF),
        adMarkLabelBackgroundColor: const Color(0xFF3E434F),
      ),
    );
    _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.dispose();
    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'),
            ),
          ],
        ),
      ),
    );
  }
}