Menu

Banner

💡Tips

The Flutter SDK provides two ways to load banner ads: Programmatic and Widget.

Programmatic

Create and load a banner ad via McSdk static methods. Suitable for scenarios that require precise control over the ad lifecycle.

dart Copy 
void initializeBannerAd() {
  // Set banner ad callback listener
  McSdk.setBannerListener(McAdViewAdListener(
    onAdLoadedCallback: (McAd ad) {
      // Banner loaded successfully callback
    },
    onAdLoadFailedCallback: (String adUnitId, McError error) {
      // Banner load failed callback
    },
    onAdClickedCallback: (McAd ad) {
      // Banner clicked callback
    },
    onAdExpandedCallback: (McAd ad) {
      // Banner expanded callback
    },
    onAdCollapsedCallback: (McAd ad) {
      // Banner collapsed callback
    },
    onAdDisplayedCallback: (McAd ad) {
      // Banner displayed successfully callback
    },
    onAdRevenuePaidCallback: (McAd ad) {
      // Banner ad revenue callback
    },
    onAdLoadFinishedCallback: (String adUnitId) {
      // Current load round finished callback
    },
  ));

  loadBannerAd();
}

void loadBannerAd() {
  // Set scenario ID (optional)
  McSdk.setBannerPlacement("your mediation unit id", "test_scenario_id_banner");

  // Set banner background color (optional, hex color string only)
  McSdk.setBannerBackgroundColor("your mediation unit id", "#000000");

  // Create banner ad and specify display position
  McSdk.createBanner("your mediation unit id", AdViewPosition.bottomCenter);
}

💡 Tips

  • After calling createBanner, the SDK will automatically start loading the ad.
  • If auto-refresh is enabled, the SDK will automatically load the next round of ads when the refresh interval expires.
  • Only when auto-refresh is paused do you need to manually call McSdk.loadBanner(adUnitId) to reload.

AdViewPosition supports the following position enums:

Enum Value Description
AdViewPosition.topCenter Top center
AdViewPosition.topRight Top right
AdViewPosition.centered Screen center
AdViewPosition.centerLeft Vertically centered left
AdViewPosition.centerRight Vertically centered right
AdViewPosition.bottomLeft Bottom left
AdViewPosition.bottomCenter Bottom center
AdViewPosition.bottomRight Bottom right

Widget

Use the McAdView widget to embed directly into the Flutter Widget tree. Suitable for scenarios that require flexible layout.

dart Copy 
final McAdViewController adViewController = McAdViewController();

Widget buildBannerAd() {
  return McAdView(
    adUnitId: "your mediation unit id",
    adFormat: AdFormat.banner,
    controller: adViewController,
    listener: McAdViewAdListener(
      onAdLoadedCallback: (McAd ad) {
        // Banner loaded successfully callback
      },
      onAdLoadFailedCallback: (String adUnitId, McError error) {
        // Banner load failed callback
      },
      onAdClickedCallback: (McAd ad) {
        // Banner clicked callback
      },
      onAdExpandedCallback: (McAd ad) {
        // Banner expanded callback
      },
      onAdCollapsedCallback: (McAd ad) {
        // Banner collapsed callback
      },
      onAdDisplayedCallback: (McAd ad) {
        // Banner displayed successfully callback
      },
      onAdRevenuePaidCallback: (McAd ad) {
        // Banner ad revenue callback
      },
      onAdLoadFinishedCallback: (String adUnitId) {
        // Current load round finished callback
      },
    ),
    extraParameters: {"key": "value"}, // Set Extra Parameter (Max only)
    localExtraParameters: {"key": "value"}, // Set Local Extra Parameter
    adaptiveBannerWidth: 320.0, // Optional, set adaptive banner width
  );
}

💡 Tips

  • The McAdView widget automatically loads ads when mounted to the Widget tree.
  • To manually refresh the ad, call the loadAd() method via McAdViewController.
  • After setting adaptiveBannerWidth, the banner height will automatically adapt based on the width.
  • You can also use McSdk.getAdaptiveBannerHeightForWidth(width) to get the recommended height in advance.

Only the Programmatic approach requires manual show/hide control. The Widget approach is automatically managed by the Flutter Widget lifecycle.

dart Copy 
// Show banner ad
McSdk.showBanner("your mediation unit id");

// Hide banner ad
McSdk.hideBanner("your mediation unit id");

3. Release Resources

When the banner ad is no longer needed, release resources promptly to avoid memory leaks.

dart Copy 
// Release banner ad resources
McSdk.destroyBanner("your mediation unit id");

💡 Tips

  • After calling destroyBanner, all callbacks for that placement will stop firing.
  • To show the ad again, you need to call createBanner to create a new ad.

4. Set Custom Parameters

Use custom parameters to pass additional configuration to the Ad Network.

dart Copy 
// Set Extra Parameter (Max only)
McSdk.setBannerExtraParameter(
  "your mediation unit id",
  "banner_test_extra_key",
  "banner_test_extra_value",
);

// Set Local Extra Parameter
McSdk.setBannerLocalExtraParameter(
  "your mediation unit id",
  "banner_test_local_extra_key",
  value,
);

To get the recommended adaptive banner height for a given width, use the following method:

dart Copy 
double? height = await McSdk.getAdaptiveBannerHeightForWidth(320.0);
if (height != null) {
  // Use the recommended height to layout the banner container
  print("Recommended banner height: $height");
}
Previous
Native
Next
MREC
Last modified: 2026-06-25Powered by