# Flutter 的横幅集成

> 使用 Unity LevelPlay SDK 在 Flutter 应用程序中实现横幅广告服务，支持各种广告大小和聚合网络。

横幅是由系统启动的矩形广告服务，可以是静态广告，也可以是动画广告，并在实时 app 内容周围的指定区域提供。 

> **Note:**
>
> 本文档与 SDK 8.4.0+ 相关。

## 先决条件##prerequisites

* 确保已将 LevelPlay Flutter 插件正确[集成](/grow/levelplay/sdk/flutter/plugin-integration.md)到 app 中。
* 确保使用 LevelPlay Initialization API 初始化 SDK。
* 在 LevelPlay 后台中找到 AdUnitID。

## 创建横幅广告对象并设置大小##create-banner-ad-objectand-set-size

在收到`onInitSuccess`回调后创建横幅广告对象。

```dart
final GlobalKey<LevelPlayBannerAdViewState> _bannerKey = GlobalKey<LevelPlayBannerAdViewState>();
@override
Widget 构建(BuildContext context) { 
    return SizedBox(
          width: _adSize.width.toDouble(),
          height: _adSize.height.toDouble(),
          child：LevelPlayBannerAdView(
            key: _bannerKey,
            adUnitId: [YOUR_AD_UNIT_ID],
            adSize：[YOUR_AD_大小]、
            listener：[YOUR_LISTENER]、
            placementName: [YOUR_PLACEMENT], // optional
            onPlatformViewCreated:[YOUR_LOAD_BANNER_METHOD] // optional
          ),
        );
}
```

### 横幅大小##banner-sizes

| LevelPlayAdSize | 描述                        | Dimensions in dp（Width X Height） |
| --------------- | ------------------------- | -------------------------------- |
| BANNER          | 标准横幅                      | 320 x 50                         |
| 大型              | 大型横幅                      | 320 x 90                         |
| 中矩形             | 中等矩形 (MREC)               | 300 x 250                        |
| 自适应             | 自动渲染广告服务以调整移动端和平板电脑的大小和方向 | 设备宽度 X 建议高度                      |

要创建广告大小，请遵循以下选项之一：

* 适应屏幕宽度的自适应广告大小（推荐）：此选项取代了“SMART”集成，因为它将根据设备类型返回横幅或 LEADERBOARD。支持自适应功能的网络（Google、Yandex）将根据其优化逻辑返回高度。

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

* 使用固定宽度广告大小的自适应广告大小：此选项允许您设置指定的宽度。支持自适应横幅功能的网络（Google、Yandex）将根据提供的宽度根据其优化逻辑返回高度。所有其他网络将根据提供的宽度返回回退大小（横幅或 LEADERBOARD）。

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

* 指定的横幅大小：此选项允许您专门设置横幅大小：横幅、大横幅、中等横幅。

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

### 广告位##placements

Unity 支持仅用于举报的广告横幅中的[广告位](/grow/levelplay/platform/settings/placements.md)。在`loadAd`之前设置广告位以影响所有重新加载的广告服务。

## 设置横幅监听器##set-banner-listener

在代码中实现 **LevelPlayBannerAdViewListener** 以获取广告投放信息。

* 建议的最佳做法是在加载横幅广告之前设置监听器。
* 每个横幅广告必须有自己的监听器实现。
* 回调在主线程上运行。

```dart
/**
 加载横幅后调用。
 @param adInfo 广告的信息。
 */ 
@override
void onAdLoaded(LevelPlayAdInfo adInfo) {}
/**
 横幅广告加载失败后调用。
 @param 报错 报错的相关信息。
 */ 
@override
void onAdLoadFailed(LevelPlayAdError error) {}
/**
 通知屏幕已显示。
 @param adInfo 广告的信息。
 */ 
@override
void onAdDisplayed(LevelPlayAdInfo adInfo) {}
/**
 通知屏幕无法显示。
 @param adInfo 广告的信息。
 @param 报错 报错的相关信息。
 */ 
@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) {}
/**
 用户按下广告后被导航出 app。
 @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.BANNER;
  @override
  Widget 构建(BuildContext context) {
    return SizedBox(
      width：adSize.width.toDouble(), // 获取实际横幅布局宽度大小
      height：adSize.height.toDouble(), // 获取实际横幅布局高度大小
      child：LevelPlayBannerAdView(
        key: _bannerKey,
        adUnitId：'YOUR_AD_UNIT_ID',
        adSize：adSize、
        监听器：此，
        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...
```

## LevelPlay Mediation 演示应用程序##levelplay-mediation-demo-app

Integration Demo 应用程序演示如何在 app 中集成横幅广告单元 API。

[下载 Flutter Demo 应用程序](https://github.com/ironsource-mobile/Flutter-SDK/tree/master/example)

验证与 [Integration Test Suite](/grow/levelplay/sdk/flutter/integration-test-suite/.md) 的集成。

## 后续步骤##next-steps

请遵循 Flutter 集成指南来集成其他插页式广告网络或配置其他广告格式：

* [添加聚合网络](/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)