<br />

[Native style settings](https://support.google.com/admanager/answer/6366914)
enable Google Ad Manager to handle the rendering of your native ads based on native
styles you specify within the product. First, specify size and targeting.
Then add HTML, CSS, and JavaScript to define ads that are responsive
and produce a quality display across all screens. You don't need to do
any of the rendering; Ad Manager automatically applies the right native style
for the destination. Native styles are implemented just like banner ads,
using a `AdManagerAdView`. They can be used with a fixed ad
size determined ahead of time, or a fluid ad size determined at runtime.

## Prerequisites

- Google Mobile Ads Flutter Plugin version 0.13.6 or higher

This guide assumes some working knowledge of Google Mobile Ads Flutter Plugin.
If you haven't already done so, consider running through our
[Get Started](https://developers.google.com/ad-manager/mobile-ads-sdk/flutter/quick-start.md.txt) guide.

## Fixed size

Native styles with a fixed size allow you to control the width and height
of the native ad. To set a fixed size, follow these steps:

1. Create a line item in the Ad Manager UI and select one of the
   predefined sizes from the `Size` field dropdown.

2. Load an `AdManagerBannerAd` with the same size you set up in step 1.
   See the [Banner Ad](https://developers.google.com/ad-manager/mobile-ads-sdk/flutter/banner/get-started#instantiate_ad)
   documentation for how to instantiate and load an ad.
   You can see a list of sizes and their corresponding `AdSize` constants
   in the [Banner size](https://developers.google.com/ad-manager/mobile-ads-sdk/flutter/banner/get-started#banner_sizes)
   section.

Here's an example of how to specify a fixed size, such as the
`MEDIUM_RECTANGLE` (300x250) ad size:

```dart
AdManagerBannerAd ad = AdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  sizes: <AdSize>[AdSize.mediumRectangle],
  request: AdManagerAdRequest(),
);
```

## Fluid size

In some cases, a fixed size may not make sense. For example, you may
want the width of the ad to match your app's content, but need its height
to dynamically adjust to fit the ad's content. To handle this case,
you can specify `Fluid` as the ad size in the Ad Manager UI, which
designates that the size of the ad is determined at runtime in the app.
The SDK provides a special `AdSize` constant, `FLUID`, to handle this case.
The fluid ad size height is dynamically determined based on the publisher
defined width, allowing the platform ad view to adjust its height to match that
of the creative.

### Fluid request

Use `FluidAdManagerBannerAd` to request a fluid ad:

```dart
final fluidAd = FluidAdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  request: AdManagerAdRequest(),
  listener: AdManagerBannerAdListener(
    onAdLoaded: (Ad ad) {
      print('$_fluidAd loaded.');
    },
    onAdFailedToLoad: (Ad ad, LoadAdError error) {
      print('$_fluidAd failedToLoad: $error');
      ad.dispose();
    },
  ),
```

### Displaying the fluid ad

After your ad is loaded, use `FluidAdWidget` to display fluid ads. It will
adjust its height to match the underlying platform ad view:

```dart
FluidAdWidget(
  width: <your-width>,
  ad: fluidAd,
);
```

See an example implementation of Ad Manager Fluid ad size in the example app
on [Github](https://github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/lib/fluid_example.dart).