-
-
Notifications
You must be signed in to change notification settings - Fork 58
Creating a native ad
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.
Some users have related some incompatibilities with other admob plugins, such as flutter_native_admob. The native ad view can be blank. See #4
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
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:
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),
),
)
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 |
The code for these can be found in example
Next: Using Ad Builder and Placeholders |
---|