Native

💡Tips

Native ads use a pure Widget-based integration via McNativeAdView for fully custom layouts

All sub-components can be freely combined and arranged to match your UI style

Native ads do not support programmatic mode — use Widget mode (i.e. self-rendering)

1. Create Native Ad View

Use the McNativeAdView component to build native ads, customizing the ad layout by combining sub-components via the child parameter.

dart Copy

final McNativeAdViewController nativeAdController = McNativeAdViewController();

Widget buildNativeAd() {
  return McNativeAdView(
    adUnitId: "your mediation unit id",
    listener: McNativeAdListener(
      onAdLoadedCallback: (McAd ad) {
        // Native ad loaded successfully
      },
      onAdLoadFailedCallback: (String adUnitId, McError error) {
        // Native ad failed to load
      },
      onAdClickedCallback: (McAd ad) {
        // Native ad clicked
      },
      onAdDisplayedCallback: (McAd ad) {
        // Native ad displayed successfully
      },
      onAdRevenuePaidCallback: (McAd ad) {
        // Native ad revenue callback
      },
    ),
    controller: nativeAdController,
    width: double.infinity,
    height: 300,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Ad title
        McNativeAdTitleView(
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 4),
        // Advertiser name
        McNativeAdAdvertiserView(),
        SizedBox(height: 8),
        // Ad body text
        McNativeAdBodyView(),
        SizedBox(height: 8),
        // Media view (image / video)
        McNativeAdMediaView(width: double.infinity, height: 200),
        SizedBox(height: 8),
        Row(
          children: [
            // Ad icon
            McNativeAdIconView(width: 48, height: 48),
            SizedBox(width: 8),
            Expanded(
              // Call-to-action button
              child: McNativeAdCallToActionView(
                style: ButtonStyle(
                  backgroundColor: WidgetStatePropertyAll(Colors.blue),
                  foregroundColor: WidgetStatePropertyAll(Colors.white),
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            // Star rating
            McNativeAdStarRatingView(size: 12, color: Colors.amber),
            Spacer(),
            // Ad options (AdChoices, etc.)
            McNativeAdOptionsView(width: 20, height: 20),
          ],
        ),
      ],
    ),
  );
}

💡 Tips

McNativeAdView automatically loads the ad when mounted to the Widget tree.

The width and height parameters define the ad container dimensions.

The order and layout of sub-components in child are fully controlled by the developer.

2. Native Ad Sub-Components

McNativeAdView provides the following sub-components that can be freely combined as needed:

Component	Description	Main Parameters
`McNativeAdTitleView`	Ad title text	`style` (TextStyle)
`McNativeAdAdvertiserView`	Advertiser name	—
`McNativeAdBodyView`	Ad body description	—
`McNativeAdMediaView`	Media content (image or video)	`width`, `height`
`McNativeAdIconView`	Ad icon	`width`, `height`
`McNativeAdOptionsView`	Ad options view (e.g. AdChoices)	`width`, `height`
`McNativeAdCallToActionView`	Call-to-action button	`style` (ButtonStyle)
`McNativeAdStarRatingView`	Star rating	`size`, `color`

McNativeAd Data Fields

After a successful load, the McNativeAd object contains the following available fields:

Field	Type	Description
`title`	String?	Ad title
`advertiser`	String?	Advertiser name
`body`	String?	Ad body text
`callToAction`	String?	Call-to-action text
`starRating`	double?	Star rating
`mediaContentAspectRatio`	double?	Media content aspect ratio
`isIconImageAvailable`	bool	Whether icon image is available
`isOptionsViewAvailable`	bool	Whether options view is available
`isMediaViewAvailable`	bool	Whether media view is available

💡 Tips

Not all ad networks return all fields; it is recommended to perform null checks before displaying.

Use isIconImageAvailable, isOptionsViewAvailable, and isMediaViewAvailable to determine whether the corresponding component has content to display, and hide empty components as needed.

3. Loading & Refreshing

McNativeAdView automatically triggers ad loading on first mount. To manually refresh the ad, use the McNativeAdViewController:

dart Copy

final McNativeAdViewController nativeAdController = McNativeAdViewController();

// Manually refresh the native ad
nativeAdController.loadAd();

💡 Tips

Calling loadAd() triggers a new ad request, and the view content is automatically updated upon completion.

Avoid calling loadAd() too frequently, as it may negatively impact fill rate and user experience.

4. Callback Reference

McNativeAdListener provides the following callback methods:

Callback	Trigger	Parameters
`onAdLoadedCallback`	Native ad loaded	`McAd`
`onAdLoadFailedCallback`	Native ad failed to load	`String` adUnitId, `McError`
`onAdClickedCallback`	User clicked the ad	`McAd`
`onAdDisplayedCallback`	Ad displayed	`McAd`
`onAdRevenuePaidCallback`	Ad generated revenue	`McAd`
`onAdHiddenCallback`	Native ad dismissed	`McAd`

dart Copy

McNativeAdListener(
  onAdLoadedCallback: (McAd ad) {
    // Ad loaded successfully, read fields from ad to display custom UI
  },
  onAdLoadFailedCallback: (String adUnitId, McError error) {
    // Load failed, retry or fallback based on error info
    print("Error code: ${error.code}, Error message: ${error.message}");
  },
  onAdClickedCallback: (McAd ad) {
    // User clicked the ad
  },
  onAdDisplayedCallback: (McAd ad) {
    // Ad has been successfully displayed on screen
  },
  onAdRevenuePaidCallback: (McAd ad) {
    // Ad generated revenue, use for revenue tracking
  },
  onAdHiddenCallback: (McAd ad) {
    // Native ad dismissed callback
  },
)

Rewarded-Video

Banner

Last modified: 2026-06-25Powered by

Outline