라이트 팝업 광고 포맷 소개
- 화면 전체를 사용하는 광고 유형입니다.
- 앱 화면 위에 팝업 형태로 광고를 표시합니다.
- Android 라이트 팝업 예시
- iOS 라이트 팝업 예시
인스턴스 생성 및 콜백 설정
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()를 호출하여 리소스를 해제합니다. 해제한 인스턴스는 다시 사용하지 말고 새 인스턴스를 생성하세요. 위젯의 State.dispose()에서도 호출하세요. 광고 인스턴스는 initState()에서 생성하고, 화면 회전으로 build()가 다시 실행될 때는 같은 인스턴스를 유지하세요. 방향 변경만으로 광고를 다시 로드할 필요는 없습니다. 네이티브 SDK가 기존 광고의 레이아웃을 조정하며, 회전 가능 방향은 앱의 설정을 따릅니다.
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), // 광고 마크 배경색
),
);
스타일 속성
| 속성 | 타입 | 설명 |
|---|---|---|
backgroundColor | Color? | 전체 배경색 |
containerColor | Color? | 카드 배경색 |
titleColor | Color? | 타이틀 색상 |
bodyColor | Color? | 본문 색상 |
ctaBackgroundColor | Color? | CTA 버튼 배경색 |
ctaTextColor | Color? | CTA 버튼 텍스트 색상 |
closeButtonColor | Color? | 닫기 버튼 텍스트 색상 |
closeButtonText | String? | 닫기 버튼 텍스트 |
adMarkLabelTextColor | Color? | 광고 마크 텍스트 색상 |
adMarkLabelBackgroundColor | Color? | 광고 마크 배경색 |
구현 예시
DaroLightPopupAd 구현 예시입니다.
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(
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'),
),
],
),
),
);
}
}