Flutter Native Ads Example

This Flutter Native Ads example shows how to integrate fully customizable native ads using Flutter Ads SDK. Design ads with media, text, and call-to-action elements that match your app UI for higher engagement.

Flutter Native Ads provide flexible layouts and better performance compared to traditional banner ads, making them ideal for modern mobile, web, and desktop applications.

Flutter Native Ads example showing customizable UI layout

Native Ad Preview

How Flutter Native Ads Work

Native ads allow developers to fully control the design and layout while still delivering high-quality ads. This ensures better user experience, improved engagement, and higher conversion rates.

1. Ensure Ads Available

Ensure native ads are available before rendering.


await FlutterAds.instance.ensureAdsAvailable(
  adType: AdType.native,
  context: context, // Required only if enableAutoFetch() has NOT been called
);

2. Render Ad


// Always returns a widget.
// If an ad is available it renders it,
// otherwise the provided placeholder is shown.

FlutterAds.instance.getNativeAdWidget(
    placeholderWidget: const SizedBox(height: 60),
    testMode: true,
    heightConstraint: MaxHeightConstraint(400),
    styling: NativeAdStylingModel(),
);

// Returns a widget only if an ad is available.
// If no ad exists, returns null — allowing you
// to conditionally render or skip placement.

FlutterAds.instance.maybeGetNativeAdWidget(
    placeholderWidget: const SizedBox(height: 60),
    testMode: true,
    heightConstraint: MaxHeightConstraint(400),
    styling: NativeAdStylingModel(),
);

3. Styling (Optional)

Customize layout, typography, and visual elements using the styling model.


NativeAdStylingModel(
    logoSize: 30,
    logoBackgroundColor: Theme.of(context).primaryColor,
    descriptionStyle: const TextStyle(color: Colors.black, fontSize: 12),
    actionStyle: const TextStyle(color: Colors.white, fontSize: 10),
    headerTileStyle: AdListTileStyle(
        tileHeight: 45,
        tileTitleAlignment: MainAxisAlignment.start,
        tileElementsAlignment: CrossAxisAlignment.center,
        tileColor: Colors.white,
        titleTextStyle: const TextStyle(color: Colors.black, fontSize: 11),
        subtitleTextStyle: const TextStyle(color: Colors.grey, fontSize: 10),
    ),
    footerTileStyle: AdListTileStyle(
        tileHeight: 45,
        tileTitleAlignment: MainAxisAlignment.spaceEvenly,
        tileElementsAlignment: CrossAxisAlignment.center,
        tileColor: Colors.indigo,
        titleTextStyle: const TextStyle(color: Colors.white, fontSize: 11),
        subtitleTextStyle: const TextStyle(color: Colors.white, fontSize: 10),
    ),
)
Native ads offer maximum flexibility. Design them to match your app UI while maintaining clear distinction from organic content.

Next Steps