Native Ads templates - cleveradssolutions/CAS-Flutter GitHub Wiki

Native templates are code-complete views for your native ads, designed for fast implementation and easy modification. With native templates, the plugin provides prebuilt Android and iOS layouts for you, and you can customize the style of the native assets using a Dart API.

By default, if no factoryId is specified when loading a native ad, the standard CAS Template will be used to display the native ad content. Below is an example of how the CAS Template appears depending on the size of the CASWidget.

  1. If the height is greater than 500, a large native ad layout is used.
  1. If the height is greater than 200, a medium layout is used.
  1. Otherwise, a banner layout is used.

Customize ad

The CAS Template can be customized by changing the colors of individual components and the font style using NativeTemplateStyle parameters when loading a native ad in Dart code.

  • The background color.
  • The primary color for "Call to action" button background.
  • The text color for "Call To Action" button.
  • The Headline text color.
  • The Headline text font style.
  • The Secondary (other) text color.
  • The Secondary (other) text font style.

Load ad content

The following example loads a native ad using the NativeTemplateStyle with the default configuration:

class NativeAdExampleState extends State<NativeAdExample> {
  AdViewInstance? _nativeAd;
  
  void _loadAd() {
    CASNativeContent.load( 
      factoryId: 'nativeFactoryIdExample',  
        templateStyle: NativeTemplateStyle(  
        backgroundColor: Colors.white,  
        primaryColor: Colors.blueAccent,  
        primaryTextColor: Colors.white,  
        headlineTextColor: Colors.black,  
        headlineFontStyle: NativeTemplateFontStyle.bold,  
        secondaryTextColor: Colors.black12,  
        secondaryFontStyle: null,  
      ),
      onAdLoaded: (AdViewInstance ad) { 
        // Called when an ad is successfully loaded. 
        print('$ad loaded'); 
        setState(() { 
          _nativeAd = ad;
        });
      },  
    );
  }
}

🔗 Next
Use native ads as described on the Get Started page.