---
metadata:
  - name: generator
    content: Diplodoc Platform v5.57.3
alternate:
  - https://ads.yandex.com/helpcenter/en/easy/integration/flutter/formats/banner.md
  - https://ads.yandex.com/helpcenter/ru/easy/integration/flutter/formats/banner.md
  - https://ads.yandex.com/helpcenter/zh/easy/integration/flutter/formats/banner.md
  - href: en/easy/integration/flutter/formats/banner.md
    type: text/markdown
    title: Markdown version
  - href: ../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/en/llms.txt

# Banner

## Banner types

The Yandex Mobile Ads SDK has two banner types:

#|
||

**Banner**

|

**Description**

|

**When to use**

||
||

Sticky banner

|

A banner that is pinned to the screen edge and displayed on top of other elements. Banners of this type are unaffected by scrolling.

|

When you want a banner to “stick”, which means to remain in its place and be shown on top of content even if a user scrolls the screen.

||
||

Inline banner

|

A banner that is embedded in your app (for example, in content or a list) as if it's a UI element.

|

When the banner should be part of the page content, appearing in a news feed, between posts, or as a list item.

||
|#

Banners of all types automatically refresh creatives every 60 seconds.

{% note tip %}

To set a custom auto‑refresh period, contact your personal manager.

{% endnote %}

Code-wise, these banners only differ in how you set their sizes. Examples:

{% list tabs %}

- Sticky banners

    ```dart
    BannerAdSize.sticky(width: screenWidth)
    ```

- Inline banners

    ```dart
    BannerAdSize.inline(width: screenWidth, maxHeight: maxHeight)
    ```

{% endlist %}


#|
||

**Entity**

|

**Description**

||
||

`BannerAdSize`

|

The banner height:

- **Mustn't** exceed 15% of the screen height.

- Must be at least 50 **dp/pt** (**Android/iOS**).

All banner sizes must be specified in **dp**.

||
||

`adUnitId`

|

Use:

- **Development mode** to work with [demo ad units](https://ads.yandex.com/helpcenter/en/easy/integration/flutter/testing.md#blocks).

- **Production mode** to work with `R-M-XXXXXX-Y` (for the actual ID, check the Yandex Advertising Network interface). `R-M-XXXXXX-Y` is a template for your actual ad unit ID that will be used to receive various creatives.

||
|#

<!-- source: en/easy/_includes/notes-flutter-easy-guide.md -->
{% note info %}

Examples showing how all the format types work are available in the [demo project](https://ads.yandex.com/helpcenter/en/easy/integration/flutter/testing.md#demo).

{% endnote %}
<!-- endsource: en/easy/_includes/notes-flutter-easy-guide.md -->

## Example of creating a banner

```dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:yandex_mobileads/mobile_ads.dart';

class BannerPage extends StatefulWidget {
  const BannerPage({super.key});

  @override
  State<BannerPage> createState() => _BannerPageState();
}

class _BannerPageState extends State<BannerPage> {
  static const _tag = 'Banner';
  static const _adUnitId = 'demo-banner-yandex';

  BannerAd? _banner;
  StreamSubscription<BannerAdLoadState>? _loadSubscription;
  StreamSubscription<BannerAdEvent>? _eventSubscription;
  String _status = 'Loading...';

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_banner == null) {
      _createBanner();
    }
  }

  @override
  void dispose() {
    _loadSubscription?.cancel();
    _eventSubscription?.cancel();
    _banner?.destroy();
    super.dispose();
  }

  void _createBanner() {
    final size = MediaQuery.of(context).size;
    final screenWidth = size.width.round();
    final maxHeight = (size.height / 3).round();

    final banner = BannerAd(
      adSize: BannerAdSize.inline(width: screenWidth, maxHeight: maxHeight),
    );

    _loadSubscription?.cancel();
    _eventSubscription?.cancel();

    _loadSubscription = banner.loadStateStream.listen((state) {
      if (state is BannerAdLoadStateLoaded) {
        debugPrint('[$_tag] onAdLoaded');
        if (mounted) setState(() => _status = 'Loaded');
      } else if (state is BannerAdLoadStateError) {
        debugPrint('[$_tag] onAdFailedToLoad: ${state.error.description}');
        if (mounted) setState(() => _status = 'Error: ${state.error.description}');
      }
    });

    _eventSubscription = banner.events.listen((event) {
      if (event is BannerAdClickedEvent) {
        debugPrint('[$_tag] onAdClicked');
      } else if (event is BannerAdImpressionEvent) {
        debugPrint('[$_tag] onAdImpression');
      }
    });

    banner.load(AdRequest(adUnitId: _adUnitId));
    _banner = banner;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Banner')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(_status),
          ),
          const Spacer(),
          if (_banner != null)
            SizedBox(
              width: double.infinity,
              child: AdWidget(bannerAd: _banner!),
            ),
        ],
      ),
    );
  }
}

```

## Checking integration

<!-- source: en/easy/_includes/notes-flutter-easy-guide.md -->
Build and run your project. You can check if the integration is successful by searching the `YandexAds` keyword in **Logcat** in **Android Studio**:
<!-- endsource: en/easy/_includes/notes-flutter-easy-guide.md -->

```
[Integration] Ad type banner was integrated successfully
```