Creating a native ad

Developer's note

This plugin has so many limitations when it comes from designing layouts. If you need to create very complex layouts, try using google_mobile_ads. This only supports linear layouts.

Native Ads are supported only on Android!

---

Native ads are ad assets that are presented to users via UI components that are native to the platform. They can be formatted to match the visual design of the user experience in which they live. In coding terms, this means that when a native ad loads, your app receives a NativeAd object that contains its assets, and the app (rather than the Google Mobile Ads SDK) is then responsible for displaying them.

Broadly speaking, there are two parts to successfully implementing Native Ads: loading an ad via the SDK and displaying the ad content in your app.

When to request native ads

Applications displaying native ads are free to request them in advance of when they'll actually be displayed. In many cases, this is the recommended practice. An app displaying a list of items with native ads mixed in, for example, can load native ads for the whole list, knowing that some will be shown only after the user scrolls the view and some may not be displayed at all.

Incompatibility with other admob dependencies

Some users have related some incompatibilities with other admob plugins, such as flutter_native_admob. The native ad view can be blank. See #4

Creating an ad

To create an ad, use the widget NativeAd:

NativeAd(
  buildLayout: adBannerLayoutBuilder,
  loading: Text('loading'),
  error: Text('error'),
)

This library provides built-in ad templates. You can use the templates or create your layout builder

Creating a layout builder

You can use each provided view only once. headline and attribution are required to be in the view by google

// ⭐Note⭐: The function must be a getter, otherwise hot reload will not work
AdLayoutBuilder get myCustomLayoutBuilder => (ratingBar, media, icon, headline,
    advertiser, body, price, store, attribution, button) {
  return AdLinearLayout(
    margin: EdgeInsets.all(10),
    borderRadius: AdBorderRadius.all(10),
    // The first linear layout width needs to be extended to the
    // parents width, otherwise the children won't fit good
    width: MATCH_PARENT,
    children: [
      AdLinearLayout(
        children: [
          icon,
          AdLinearLayout(
            children: [
              headline,
              AdLinearLayout(
                children: [attribution, advertiser],
                orientation: HORIZONTAL,
                width: WRAP_CONTENT,
              ),
            ],
          ),
        ],
        width: WRAP_CONTENT,
        orientation: HORIZONTAL,
        margin: EdgeInsets.all(6),
      ),
      button,
    ],
    backgroundColor: Colors.blue,
  );
};

🔴IMPORTANT❗🔴: You can NOT use flutter widgets to build your layouts

To use it in your NativeAd, pass it as an argument to layoutBuilder:

NativeAd(
  layoutBuilder: myCustomLayoutBuilder
)

Your layout must follow google's native ads policy & guidelines. Learn more:

• Native ads policies & guidelines
• AdMob native ads policy compliance checklist

Using templates

We provide 3 templates by default:

Name	Preview	Info
adBannerLayoutBuilder		Use the banner layout builder to build a native ad that acts like a BannerAd, but has the advantage to fit the whole screen and resize itself when the orientation changes
smallAdTemplateLayoutBuilder		The small template is ideal for ListViews, or any time you need a long rectangular ad view. For instance you could use it for in-feed ads.
mediumAdTemplateLayoutBuilder		The medium template is meant to be a one-half to three-quarter page view but can also be used in feeds. It is good for landing pages or splash pages.

Customizing views

All the avaiable views are customizable. To customize a view use:

NativeAd(
  layoutBuilder: ...,
  headling: AdTextView(
    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black),
    maxLines: 1,
  ),
  attribution: AdTextView(
    width: WRAP_CONTENT, // You can use WRAP_CONTENT
    height: WRAP_CONTENT, // or MATCH_PARENT
    padding: EdgeInsets.symmetric(horizontal: 2, vertical: 1),
    backgroundColor: Colors.yellow,
    // The label to indicate the ad is an ad.
    // You can change it depending on the device's language
    text: 'Ad',
    margin: EdgeInsets.only(right: 2),
    maxLines: 1,
    borderRadius: AdBorderRadius.all(10),
  ),
  button: AdButtonView(
    backgroundColor: Colors.yellow,
    margin: EdgeInsets.all(6),
    borderRadius: AdBorderRadius.vertical(bottom: 10),
  ),
)

Avaiable views

Field	Class	Description	Always included?	Required to be displayed?
Headline	AdTextView	Primary headline text (e.g., app title or article title).	Yes	Yes
Attribution	AdTextView	Indicate that the ad is an ad	Yes	Yes
Image	AdMediaView	Large, primary image.	Yes	Recommended
Body	AdTextView	Secondary body text (e.g., app description or article description).	Yes	Recommended
Icon	AdImageView	Small icon image (e.g., app store image or advertiser logo).	No	Recommended
Call to action	AdButtonView	Button or text field that encourages user to take action.	No	Recommended
Star rating	AdRatingBarView	Rating from 0-5 that represents the average rating of the app in a store.	No	Recommended
Store	AdTextView	The app store where the user downloads the app.	No	Recommended
Price	AdTextView	Cost of the app.	No	Recommended
Advertiser	AdTextView	Text that identifies the advertiser (e.g., advertiser or brand name).	No	Recommended

Learn more

Hot reload

When creating the layout builder, hot reload is supported but it's not as fast as flutter's hot reload (3x slower). This happens because this plugin is backed by Platform Views, and it request an UI update everytime the layout is changed.

Limitations

• You can only create line-based layouts (AdLinearLayout), that means you can't put one view on top of another.

Screenshots

The code for these can be found in example

---

Next: Using Ad Builder and Placeholders