Banner Ads

Banner ads are rectangular ads that occupy a portion of your app's layout. They can refresh automatically and stay on screen while users interact with your app.

Each ad format uses a Zone ID to identify the ad placement. Zone IDs are configured in the Empower dashboard.

Note: All ad status callbacks are optional. The SDK handles ad loading and display automatically. Use callbacks only if you need to track ad states for analytics, UI updates, or custom logic.

---

Supported Sizes

Size	Description
320x50	Standard Banner
320x100	Large Banner
300x250	Medium Rectangle (MREC)

---

Quick Start

import 'package:empower_mobile_ads/empower_mobile_ads.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(child: Text('Your Content')),

          // Standard Banner
          EmpowerBannerAd(
            zoneId: 'YOUR_BANNER_ZONE_ID',
            width: 320,
            height: 50,
          ),
        ],
      ),
    );
  }
}

---

Zone ID Options

Zone IDs can be specified in three ways:

Single Zone ID (Same for Both Platforms)

EmpowerBannerAd(
  zoneId: 'YOUR_ZONE_ID',
  width: 320,
  height: 50,
)

Per-Platform Zone IDs

EmpowerBannerAd(
  zoneId: '', // fallback
  androidZoneId: 'ANDROID_ZONE_ID',
  iosZoneId: 'IOS_ZONE_ID',
  width: 320,
  height: 50,
)

Using Platform Check

import 'dart:io';

EmpowerBannerAd(
  zoneId: Platform.isAndroid ? 'ANDROID_ZONE_ID' : 'IOS_ZONE_ID',
  width: 320,
  height: 50,
)

---

Listening to Banner Status (Optional)

Track banner status for analytics or UI updates:

import 'package:empower_mobile_ads/empower_mobile_ads.dart';

class BannerWithStatus extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return EmpowerBannerAd(
      zoneId: 'YOUR_ZONE_ID',
      width: 320,
      height: 50,
      onAdStatusChanged: (AdStatus status, String zoneId) {
        switch (status) {
          case AdStatus.ready:
            print('Banner loaded for zone: $zoneId');
            break;
          case AdStatus.failed:
            print('Banner failed for zone: $zoneId');
            break;
          case AdStatus.willLeave:
            print('User clicked the ad');
            break;
          default:
            break;
        }
      },
    );
  }
}

---

ListView Usage

When displaying banners inside a ListView, use fixed dimensions and explicit zone IDs to ensure proper rendering:

import 'package:flutter/material.dart';
import 'package:empower_mobile_ads/empower_mobile_ads.dart';

const bannerPosition = 5; // Show banner after 5th item

class FeedWithBanner extends StatelessWidget {
  final List<String> items;

  const FeedWithBanner({required this.items});

  @override
  Widget build(BuildContext context) {
    final totalItems = items.length + 1; // +1 for banner

    return ListView.builder(
      itemCount: totalItems,
      itemBuilder: (context, index) {
        if (index == bannerPosition) {
          return Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: EmpowerBannerAd(
                zoneId: 'YOUR_ZONE_ID',
                width: 300,
                height: 250,
              ),
            ),
          );
        }

        final itemIndex = index > bannerPosition ? index - 1 : index;
        return ListTile(title: Text(items[itemIndex]));
      },
    );
  }
}

---

Sticky Banner

To display a sticky banner pinned to the bottom of the screen:

import 'package:flutter/material.dart';
import 'package:empower_mobile_ads/empower_mobile_ads.dart';

class StickyBannerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(child: Text('Your app content')),
          ),

          // Sticky banner at bottom
          SafeArea(
            top: false,
            child: Container(
              color: Colors.white,
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                border: Border(
                  top: BorderSide(color: Color(0xFFDDDDDD), width: 0.5),
                ),
              ),
              child: EmpowerBannerAd(
                zoneId: 'YOUR_ZONE_ID',
                width: 320,
                height: 50,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Tip: Place the sticky banner widget outside your navigation stack (e.g., in a wrapper Scaffold) so it persists across all screens.

---

Props Reference

EmpowerBannerAd

Prop	Type	Required	Default	Description
zoneId	String	Yes	—	Zone ID for the banner placement
androidZoneId	String?	No	null	Android-specific zone ID (overrides zoneId)
iosZoneId	String?	No	null	iOS-specific zone ID (overrides zoneId)
width	double	No	320	Width of the banner ad
height	double	No	50	Height of the banner ad
onAdStatusChanged	Function(AdStatus, String)?	No	null	Called when ad status changes
backgroundColor	Color	No	Color(0xFFF5F5F5)	Background color when ad is not loaded

---

Best Practices

• Set explicit dimensions — Always provide width and height matching the expected ad size (320x50, 320x100, or 300x250)
• Load in visible areas — The widget loads the ad when it mounts. Don't place banner widgets off-screen
• Handle failures gracefully — Use onAdStatusChanged to hide the banner container or show fallback content when status is failed
• One zone ID per widget — Don't reuse the same zone ID for multiple banner widgets on the same screen

---

Ad Status Reference

Status	Description
AdStatus.initializing	Banner is loading
AdStatus.ready	Banner is loaded and displayed
AdStatus.failed	Banner failed to load
AdStatus.willLeave	User clicked the ad (leaving app)