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.
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(width: screenWidth)
BannerAdSize.inline(width: screenWidth, maxHeight: 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 a banner
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
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