Creating a native ad

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.

Creating an ad

To create an ad, use the widget NativeAd:

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

This library provides a default layout builder: adBannerLayoutBuilder:
The code for this can be found on example

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

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

Screenshots

Native Video Ad (wait until the gif loads)

The code for these can be found in example

---

Next: Using Ad Builder and Placeholders