# Flutter용 배너 통합

> 다양한 광고 크기와 Mediation 네트워크를 지원하는 Unity 레벨플레이 SDK를 사용하여 Flutter 애플리케이션 배너 광고를 구현합니다.

배너는 정적 광고 또는 애니메이션 광고 중 하나일 수 있는 직사각형 시스템 기반 광고로, 라이브 앱 콘텐츠 주위에 지정된 영역 게재됩니다. 

> **Note:**
>
> 이 기술 자료는 SDK 8.4.0 이상에 해당합니다.

## 필수 조건##prerequisites

* 레벨플레이 플러그인을 앱에 올바르게 [통합했는지 확인](/grow/levelplay/sdk/flutter/plugin-integration.md)합니다.
* 레벨플레이 초기화 API 사용하여 SDK를 초기화해야 합니다.
* 레벨플레이 대시보드에서 AdUnitID를 찾습니다.

## 배너 광고 오브젝트 생성 및 크기 설정##create-banner-ad-objectand-set-size

`onInitSuccess` 콜백을 수신한 후 배너 광고 오브젝트를 생성합니다.

```dart
final GlobalKey<LevelPlayBannerAdViewState> _bannerKey = GlobalKey<LevelPlayBannerAdViewState>();
@override
위젯 빌드(BuildContext 컨텍스트) { 
    return SizedBox(
          width: _adSize.width.toDouble(),
          height: _adSize.height.toDouble(),
          child: LevelPlayBannerAdView(
            key: _bannerKey,
            adUnitId: [YOUR_AD_UNIT_ID],
            adSize: [YOUR_AD_SIZE],
            listener: [YOUR_LISTENER],
            placementName: [YOUR_PLACEMENT], // 선택 사항
            onPlatformViewCreated:[YOUR_LOAD_BANER_METHOD] // 선택 사항
          ),
        );
}
```

### 배너 크기##banner-sizes

| LevelPlayAdSize   | 설명                                                 | dp 단위의 측정 항목(너비 X 높이) |
| ----------------- | -------------------------------------------------- | --------------------- |
| 배너                | 표준 배너                                              | 320 x 50              |
| 대규모               | 대형 배너                                              | 320 x 90              |
| MEDIUM\_RECTANGLE | 중간 직사각형(MREC)                                      | 300 x 250             |
| 적응적               | 모바일 및 태블릿의 크기 및 방향, 방향 설정 조정하기 위해 광고를 자동으로 렌더링합니다. | 기기 너비 X 권장 높이         |

광고 크기를 생성하려면 다음 옵션 중 하나를 따르십시오.

* 화면 너비에 맞게 조정되는 적응적 광고 크기(권장): 이 옵션은 기기 유형에 따라 배너 또는 LEADERBOARD를 반환하므로 "SMART" 통합을 대체합니다. 적응적 기능을 지원하는 네트워크(Google, Yandex)는 최적화 로직에 따라 높이를 반환합니다.

  ```dart
  LevelPlayAdSize adSize = await LevelPlayAdSize.createAdaptiveAdSize();
  ```

* 고정 너비 광고 크기를 사용한 적응적 광고 크기: 이 옵션을 사용하면 특정 너비를 설정할 수 있습니다. 적응적 배너 기능을 지원하는 네트워크(Google, Yandex)는 제공된 너비를 기반으로 최적화 로직을 기반으로 높이를 반환합니다. 다른 모든 네트워크는 제공된 너비에 따라 폴백 크기(배너 또는 리더보드)를 반환합니다.

  ```dart
  LevelPlayAdSize adSize = await LevelPlayAdSize.createAdaptiveAdSize(width: 400);
  ```

* 특정 배너 크기: 이 옵션을 사용하면 배너 크기를 구체적으로 설정할 수 있습니다. 배너, 대형, 중형.

  ```dart
  LevelPlayAdSize adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;
  ```

### Placements##placements

Unity는 리포트 전용 배너에 대한 [배치](/grow/levelplay/platform/settings/placements.md)만 지원합니다. 모든 재로드된 광고에 영향을 주도록 `loadAd` 이전의 플레이스먼트를 설정합니다.

## 배너 리스너 설정##set-banner-listener

코드에 **LevelPlayBannerAdViewListener를 구현**하여 광고 전송에 대해 알 수 있습니다.

* 권장되는 베스트 프랙티스는 배너 광고를 로드하기 전에 리스너를 설정하는 것입니다.
* 각 배너 광고에는 자체 리스너 구현이 있어야 합니다.
* 콜백은 메인 스레드 실행됩니다.

```dart
/**
 배너 로드된 후 호출됩니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdLoaded(LevelPlayAdInfo adInfo) {}
/**
 배너 로드에 실패한 후 호출됩니다.
 @param error 오류에 대한 정보입니다.
 */ 
@override
void onAdLoadFailed(LevelPlayAdError error) {}
/**
 화면이 표시되었음을 알립니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdDisplayed(LevelPlayAdInfo adInfo) {}
/**
 화면 표시 실패를 알립니다.
 @param adInfo 광고 정보입니다.
 @param error 오류에 대한 정보입니다. 
 */ 
@override
void onAdDisplayFailed(LevelPlayAdInfo adInfo, LevelPlayAdError error) {}
/**
 사용자 배너 광고를 클릭할 때 호출합니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdClicked(LevelPlayAdInfo adInfo) {}
/**
 광고가 전체 화면으로 열립니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdExpanded(LevelPlayAdInfo adInfo) {}
/**
 광고가 원본의, 원래의 크기로 복원됩니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdCollapsed(LevelPlayAdInfo adInfo) {}
/**
 사용자 광고를 누르고 앱을 벗어났습니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdLeftApplication(LevelPlayAdInfo adInfo) {}
```

## 배너 광고 로드##load-banner-ad

배너 광고를 로드하려면 **loadAd를** 사용하십시오.

```dart
// Load the banner ad 
_bannerKey.currentState?.loadAd();
```

배너 뷰 컨테이너가 완전히 생성된 `onPlatformViewCreated is called`일 때 또는 선택한 다른 시간에 loadAd를 호출할 수 있습니다.

## 배너 새로고침 일시 정지 및 재개##pause-and-resume-banner-refresh

새로고침 값이 플랫폼에서 정의된 경우 코드에서 배너 새로고침을 일시 정지할 수 있습니다. 배너 광고의 자동 새로고침을 중지하거나, 일시 중지한 후 다시 활성화하다, 사용 가능하다. 

> **Note:**
>
> 배너 다시 표시되면 배너가 일시 정지된 시점부터 새로고침까지의 시간을 완료합니다. 

* `pauseAutoRefresh`: 배너 광고의 자동 새로고침을 일시 중지합니다.
* `resumeAutoRefresh`: 배너 광고가 일시 중지된 후 배너 광고의 자동 새로고침을 재개합니다.

```dart
// Pause refresh 
_bannerKey.currentState?.pauseAutoRefresh(); 
// Resume refresh 
_bannerKey.currentState?.resumeAutoRefresh();
```

## 배너 광고 삭제##destroy-banner-ad

배너를 파괴하려면 `destroy` 메서드를 호출합니다.

삭제된 배너 더 이상 표시할 수 없습니다. 더 많은 광고를 표시하려면 새 `LevelPlayBannerAdView` 오브젝트를 만드십시오. 

```dart
_bannerKey.currentState?.destroy();
```

## 배너 광고의 전체 구현 예시##full-implementation-example-of-banner-ads

다음은 표준 배너 크기를 사용하여 배너 광고를 생성하고 로드하는 예제입니다.

```dart
  // Start of the widget...
  final _bannerKey = GlobalKey<LevelPlayBannerAdViewState>();
  final adSize = LevelPlayAdSize. 배너;
  @override
  위젯 빌드(BuildContext 컨텍스트) {
    return SizedBox(
      너비: adSize.width.toDouble(), // 실제 배너 레이아웃 너비 크기를 가져옵니다
      height: adSize.height.toDouble(), // 실제 배너 레이아웃 높이 크기를 가져옵니다
      child: LevelPlayBannerAdView(
        key: _bannerKey,
        adUnitId: 'YOUR_AD_UNIT_ID',
        adSize: adSize,
        listener: 이,
        placementName: 'YOUR_PLACEMENT',
        onPlatformViewCreated: () {
	// In this implementation we call loadAd on the key,
            // it is also possible to store the LevelPlayBannerAdView widget
            // in a variable and call loadAd on it as described above in the docs.
          _bannerKey.currentState?.loadAd(); 
        },
      ),
    );
  }
  @override
  void onAdClicked(LevelPlayAdInfo adInfo) {
    // Implement your logic here...
  }
  @override
  void onAdCollapsed(LevelPlayAdInfo adInfo) {
    // Implement your logic here...
  }
  @override
  void onAdDisplayFailed(LevelPlayAdInfo adInfo, LevelPlayAdError error) {
    // Implement your logic here...
  }
  @override
  void onAdDisplayed(LevelPlayAdInfo adInfo) {
    // Implement your logic here...
  }
  @override
  void onAdExpanded(LevelPlayAdInfo adInfo) {
    // Implement your logic here...
  }
  @override
  void onAdLeftApplication(LevelPlayAdInfo adInfo) {
    // Implement your logic here...
  }
  @override
  void onAdLoadFailed(LevelPlayAdError error) {
    // Implement your logic here...
  }
  @override
  void onAdLoaded(LevelPlayAdInfo adInfo) {
    // Implement your logic here...
  }
  // End of widget...
```

## 레벨플레이 Mediation 데모 앱##levelplay-mediation-demo-app

통합 데모 애플리케이션 앱에 배너 배너 유닛 API를 통합하는 방법을 보여 줍니다.

[Flutter 데모 애플리케이션 다운로드](https://github.com/ironsource-mobile/Flutter-SDK/tree/master/example)

[Integration Test Suite](/grow/levelplay/sdk/flutter/integration-test-suite/.md)와의 연동을 확인합니다.

## 다음 단계##next-steps

추가 인터스티셜 광고 광고 네트워크를 연동하거나 추가 광고 형식을 설정 Flutter 연동 가이드를 따르십시오.

* [Mediation Networks 추가](/grow/levelplay/sdk/flutter/mediation-networks.md)
* [보상형 광고](/grow/levelplay/sdk/flutter/rewarded-ads-integration.md)
* [인터스티셜 광고](/grow/levelplay/sdk/flutter/interstitial-integration.md)
* [네이티브 광고](/grow/levelplay/sdk/flutter/native-ads-integration.md)