> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/sdk/flutter/undefined-1.md).

# 배너 광고

## 1. 위젯 생성

배너를 추가하고자 하는 위치에 아래의 위젯을 생성하여 등록합니다.

AndroidView 내 아래 설정을 반드시 추가합니다.

* <mark style="color:red;">`ViewType`</mark>: ‘AdPopcornSSPBannerView’
* <mark style="color:red;">`creationParams`</mark>
  * appKey
  * placementId
  * bannerSize
    * 320x50
    * 300x250
    * 320x100
    * AdaptiveSize

{% code title="Dart" %}

```dart
Widget _setBannerView() {
    const String viewType = 'AdPopcornSSPBannerView';
    if (Platform.isAndroid) {
      final Map<String, dynamic> creationParams = <String, dynamic>
      {'appKey':'your_app_key', 'placementId':'your_placement_id', 'bannerSize':'320x50'};
      return Container(
        width: double.maxFinite,
        height:50,
        child: AndroidView(
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: const StandardMessageCodec(),
        ),
      );
    }
    else if (Platform.isIOS) {
      final Map<String, dynamic> creationParams = <String, dynamic>
      {'appKey':'your_app_key', 'placementId':'your_placement_id', 'bannerSize':'320x50'};
      return Container(
        width: double.maxFinite,
        height:50,
        child: UiKitView(
          viewType: viewType,
          layoutDirection: TextDirection.ltr,
          creationParams: creationParams,
          creationParamsCodec: const StandardMessageCodec(),
        ),
      );
    }
    else{
      return Container(
        width: double.maxFinite,
        height: 1
      );
    }
  }
```

{% endcode %}

{% hint style="warning" %} <mark style="color:red;">`appKey`</mark>, <mark style="color:red;">`placementId`</mark>, <mark style="color:red;">`adSize`</mark>를 필수로 세팅해 주어야 광고가 요청됩니다.
{% endhint %}

## 2. MethodChannel 생성

배너의 이벤트를 전달 받고 싶은 경우, 아래의 규칙으로 method channel을 생성합니다.

* <mark style="color:red;">`MethodChannel`</mark>('adpopcornssp/<mark style="color:blue;">`{your_placement_id}`</mark>')

생성한 MethodChannel에 <mark style="color:red;">`methodCallHandler`</mark>를 세팅할 경우, 아래 이벤트를 전달 받을 수 있습니다.

<table><thead><tr><th width="302">이벤트</th><th>설명</th></tr></thead><tbody><tr><td>APSSPBannerViewLoadSuccess</td><td>배너 로드 성공</td></tr><tr><td>APSSPBannerViewLoadFail</td><td>배너 로드 실패. <a href="/pages/8mnPYzYSU61QOImC3VmQ">에러코드 값</a></td></tr><tr><td>APSSPBannerViewClicked</td><td>배너 클릭</td></tr></tbody></table>

{% code title="Dart" %}

```dart
class _MyAppState extends State<MyApp> {

static const MethodChannel androidBannerChannel = const MethodChannel('adpopcornssp/your_placement_id');
static const MethodChannel iosBannerChannel = const MethodChannel('adpopcornssp/your_placement_id');


 @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      AdPopcornSSP.init('663451319');

      // 배너 이벤트 채널 연동
      androidBannerChannel.setMethodCallHandler(_eventHandleMethod);
    } else if (Platform.isIOS) {
      AdPopcornSSP.init('397261446');

      // 배너 이벤트 채널 연동
      iosBannerChannel.setMethodCallHandler(_eventHandleMethod);
    }
  }
  
  static Future<dynamic> _eventHandleMethod(MethodCall call) {
      final Map<dynamic, dynamic> arguments = call.arguments;
      final String method = call.method;

      final String placementId = arguments['placementId'];
      if (method == 'APSSPBannerViewLoadSuccess') {
      } else if (method == 'APSSPBannerViewLoadFail') {
        final int errorCode = arguments['errorCode'];
      } else if (method == 'APSSPBannerViewClicked'){
      }
      return Future<dynamic>.value(null);
    }
}
```

{% endcode %}