라이트 팝업 광고

라이트 팝업 광고 포맷 소개

화면 전체를 사용하는 광고 유형입니다.
앱 화면 위에 팝업 형태로 광고를 표시합니다.
Android 라이트 팝업 예시

iOS 라이트 팝업 예시

인스턴스 생성 및 콜백 설정

DaroLightPopupAd 인스턴스를 생성하고 콜백을 설정합니다.

import 'package:daro_flutter/daro_flutter.dart';

final lightPopupAd = DaroLightPopupAd(adUnitKey: 'YOUR_AD_UNIT_KEY');

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();
}

iOS 광고 표시 중 상태바 숨기기

Flutter SDK 2.0.5 이상에서 사용할 수 있습니다. 상태바와 광고의 닫기 버튼이 겹치는 경우 hideStatusBarDuringFullscreenAd를 활성화할 수 있습니다. 기본값은 false이며 Android에서는 시스템 UI를 변경하지 않습니다.

final ad = DaroLightPopupAd(
  adUnitKey: 'YOUR_AD_UNIT_KEY',
  hideStatusBarDuringFullscreenAd: true,
);

SDK는 상태바 숨김 요청을 완료한 뒤 광고를 표시합니다. 광고 종료 또는 표시 실패 후에는 기본적으로 SystemUiMode.edgeToEdge로 복구합니다. show()의 반환은 광고 종료를 의미하지 않으므로, 호출 직후 앱에서 상태바를 복구하지 마세요. 이 옵션을 켠 iOS에서는 광고 표시 세션이 끝나기 전에 같은 인스턴스에서 load() 또는 show()를 호출하면 StateError가 발생합니다. 따라서 onAdShown에서 같은 인스턴스를 미리 로드하지 말고, onAdDismiss 또는 onAdFailedToShow 이후에 load()를 호출하세요. 앱이 평소 상태바를 숨기거나 수동 시스템 UI 설정을 사용한다면 복구할 설정을 명시하세요. Flutter는 현재 시스템 UI 설정을 조회하는 API를 제공하지 않으므로, SDK가 임의의 이전 설정을 자동으로 읽어 복구하지는 않습니다.

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

final ad = DaroLightPopupAd(
  adUnitKey: 'YOUR_AD_UNIT_KEY',
  hideStatusBarDuringFullscreenAd: true,
  systemUiRestoreConfiguration: DaroSystemUiRestoreConfiguration(
    mode: SystemUiMode.manual,
    overlays: const [SystemUiOverlay.bottom], // 앱의 평소 상태: 상태바 숨김
  ),
);

광고 표시 중 dispose()를 호출하면 팝업을 닫고, 닫기 완료 후 상태바를 복구합니다. SystemUiMode.manual에는 overlays 목록을 반드시 전달해야 합니다. 빈 목록은 모든 시스템 UI 오버레이를 숨기는 설정입니다. 동시에 활성화된 광고 세션이 있으면 첫 세션의 복구 설정을 사용하고, 마지막 세션 종료 후 복구합니다. 광고 표시 중 앱이 별도로 SystemChrome 설정을 변경하면 SDK의 복구 설정이 마지막에 적용될 수 있습니다.

상태바 숨김은 Flutter·iOS 버전, UIViewControllerBasedStatusBarAppearance 설정과 광고 화면의 제어권에 영향을 받습니다. iOS 27 SDK로 빌드한 앱에서 이 키가 NO이면 SystemChrome 설정이 무시되는 Flutter 이슈가 보고되어 있습니다. 키를 변경할 때는 앱 전체의 상태바 동작과 사용 중인 광고 디맨드에서 표시·종료를 함께 확인하세요.

리소스 해제

광고 사용이 끝나면 dispose()를 호출하여 리소스를 해제합니다. 해제한 인스턴스는 다시 사용하지 말고 새 인스턴스를 생성하세요. 위젯의 State.dispose()에서도 호출하세요. 광고 인스턴스는 initState()에서 생성하고, 화면 회전으로 build()가 다시 실행될 때는 같은 인스턴스를 유지하세요. 방향 변경만으로 광고를 다시 로드할 필요는 없습니다. 네이티브 SDK가 기존 광고의 레이아웃을 조정하며, 회전 가능 방향은 앱의 설정을 따릅니다.

lightPopupAd.dispose();

광고 커스터마이징

DaroLightPopupStyle을 사용하여 라이트 팝업 광고의 UI를 커스터마이징할 수 있습니다. Flutter의 Color 객체를 직접 전달합니다.

final lightPopupAd = DaroLightPopupAd(
  adUnitKey: 'YOUR_AD_UNIT_KEY',
  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), // 광고 마크 배경색
  ),
);

스타일 속성

속성	타입	설명
`backgroundColor`	`Color?`	전체 배경색
`containerColor`	`Color?`	카드 배경색
`titleColor`	`Color?`	타이틀 색상
`bodyColor`	`Color?`	본문 색상
`ctaBackgroundColor`	`Color?`	CTA 버튼 배경색
`ctaTextColor`	`Color?`	CTA 버튼 텍스트 색상
`closeButtonColor`	`Color?`	닫기 버튼 텍스트 색상
`closeButtonText`	`String?`	닫기 버튼 텍스트
`adMarkLabelTextColor`	`Color?`	광고 마크 텍스트 색상
`adMarkLabelBackgroundColor`	`Color?`	광고 마크 배경색

구현 예시

DaroLightPopupAd 구현 예시입니다.

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(
      adUnitKey: 'YOUR_AD_UNIT_KEY',
      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'),
            ),
          ],
        ),
      ),
    );
  }
}

DARO 2.0 SDK 마이그레이션

다로 시작하기

SDK 통합하기

DARO 사용하기

FAQ

레거시 SDK

라이트 팝업 광고