Adaptive banners
Types of adaptive banners
The Yandex Mobile Ads SDK has two types of adaptive banners:
|
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.
Tip
To set a custom auto‑refresh period, contact your personal manager.
Code-wise, these banners only differ in how you set their sizes. Examples:
BannerAdSize.sticky({required int width})
BannerAdSize.inline({required int width, required int maxHeight})
|
Entity |
Description |
|
|
The banner height:
All banner sizes must be specified in dp. |
|
|
Use:
|
Note
Examples showing how all the format types work are available in the demo project.
Example of creating an adaptive banner
import 'dart:convert';
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;
bool _adLoaded = false;
String _status = 'Loading...';
@override
void didChangeDependencies() {
super.didChangeDependencies();
if (_banner == null) {
_createBanner();
}
}
@override
void dispose() {
_banner?.destroy();
super.dispose();
}
void _createBanner() {
final size = MediaQuery.of(context).size;
_banner = BannerAd(
adUnitId: _adUnitId,
adSize: BannerAdSize.inline(
width: size.width.round(),
maxHeight: (size.height / 3).round(),
),
adRequest: const AdRequest(),
onAdLoaded: () {
debugPrint('[$_tag] onAdLoaded');
if (mounted) setState(() { _adLoaded = true; _status = 'Loaded'; });
},
onAdFailedToLoad: (error) {
debugPrint('[$_tag] onAdFailedToLoad: ${error.description}');
if (mounted) setState(() => _status = 'Error: ${error.description}');
},
onAdClicked: () => debugPrint('[$_tag] onAdClicked'),
onLeftApplication: () => debugPrint('[$_tag] onLeftApplication'),
onReturnedToApplication: () => debugPrint('[$_tag] onReturnedToApplication'),
onImpression: (ImpressionData impressionData) => debugPrint('[$_tag] onAdImpression: $impressionData'),
onAdClose: () => debugPrint('[$_tag] onAdClose'),
);
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
Build and run your project. You can check if the integration is successful by searching the YandexAds keyword in Logcat in Android Studio:
[Integration] Ad type Banner was integrated successfully