Admob Banner ad is cut off on flutter

As shown in the image admob banner ad is cut off or stretched.

If I use AdSize.banner widget does not take the entire width but shows the ad correctly. If I use full-banner the ad is stretched.

How do I get the banner to fit the full width of the screen and show the content correctly (without cut off or streached)?

class _AdBannerState extends State<AdBanner> {
  BannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _finalSize;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.fullBanner;

    _inlineAdaptiveAd = BannerAd(
      adUnitId: AdHelper.bannerAdUnitId,
      size: size,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) async {
          debugPrint('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          BannerAd bannerAd = (ad as BannerAd);
          _finalSize = await bannerAd.getPlatformAdSize();
          // if (size == null) {
          //   debugPrint(
          //       'Error: getPlatformAdSize() returned null for $bannerAd');
          //   return;
          // }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          debugPrint('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) {
    return (_inlineAdaptiveAd != null && _isLoaded && _finalSize != null)
        ? Expanded(
            child: SizedBox(
                width: _finalSize!.width.toDouble(),
                height: _finalSize!.height.toDouble(),
                child: AdWidget(
                  ad: _inlineAdaptiveAd!,
                )))
        : const SizedBox(
            width: 0,
            height: 0,
          );
  }

  @override
  void dispose() {
    _inlineAdaptiveAd?.dispose();

    super.dispose();
  }
}

This is apparently a known issue. Tracked by the developers. Not solved yet.

Workaround can be found here. Not perfect.

https://github.com/googleads/googleads-mobile-flutter/issues/261#issuecomment-1293001373

To make it responsive,

Please use MethodChannel to call any native java/kotlin method which is written as part of the android native code which can be invoked from your .dart file

Example Resource folder: Flutter Official Example

Example MethodChannel: Flutter Official MethodChannel Example

You need to create the below folders and files inside android/app/src/main/res folder yourself and put those values yourself and adjust accordingly

Option 1: to mathematically handle _finalSize and AdWidget sizes based on the values from dimension resource files dimens.xml using folder names Configuration qualifier names

values-sw720dp          10.1” tablet 1280x800 mdpi
values-sw600dp          7.0”  tablet 1024x600 mdpi
values-sw480dp          5.4”  480x854 mdpi 
values-sw480dp          5.1”  480x800 mdpi 
values-xxhdpi           5.5"  1080x1920 xxhdpi
values-xxxhdpi           5.5" 1440x2560 xxxhdpi
values-xhdpi            4.7”   1280x720 xhdpi 
values-xhdpi            4.65”  720x1280 xhdpi 
values-hdpi             4.0” 480x800 hdpi
values-hdpi             3.7” 480x854 hdpi
values-mdpi             3.2” 320x480 mdpi
values-ldpi             3.4” 240x432 ldpi
values-ldpi             3.3” 240x400 ldpi
values-ldpi             2.7” 240x320 ldpi

Define a fraction

<?xml version="1.0" encoding="utf-8"?>
 <resources>
     <fraction name="division_factor_width">0.31</fraction>
     <fraction name="division_factor_height">0.41</fraction>
 </resources>

Get the fraction

child: SizedBox(
       width: _finalSize!.width.toDouble() / getResources().getFraction(R.dimen.division_factor_width, 1,1),
       height: _finalSize!.height.toDouble() / getResources().getFraction(R.dimen.division_factor_height, 1,1),
       child: AdWidget(
            ad: _inlineAdaptiveAd!,
       )))

Option 2: Read constraints in the guide Understanding constraints in flutter

Option 3: Put the SizedBox inside another layout like linear and set the layout properties to center the box without streaching it

Option 4: create sized ads and call the AdHelper.bannerAdUnitId from a values.xml the values.xml will be placed in multiple size folders like hdpi ldpi ... etc

Replace the Expanded widget with a LayoutBuilder and calculate the maximum available width (maxWidth) based on the constraints as below-

 class _AdBannerState extends State<AdBanner> {
      BannerAd? _inlineAdaptiveAd;
      bool _isLoaded = false;
      double _adHeight = 0;
    
      @override
      void didChangeDependencies() {
        super.didChangeDependencies();
        _loadAd();
      }
    
      void _loadAd() async {
        await _inlineAdaptiveAd?.dispose();
        setState(() {
          _inlineAdaptiveAd = null;
          _isLoaded = false;
        });
    
        // Get an inline adaptive size for the current orientation.
        AdSize size = AdSize.fullBanner;
    
        _inlineAdaptiveAd = BannerAd(
          adUnitId: AdHelper.bannerAdUnitId,
          size: size,
          request: const AdRequest(),
          listener: BannerAdListener(
            onAdLoaded: (Ad ad) async {
              debugPrint('Inline adaptive banner loaded: ${ad.responseInfo}');
    
              setState(() {
                _inlineAdaptiveAd = ad as BannerAd;
                _isLoaded = true;
              });
            },
            onAdFailedToLoad: (Ad ad, LoadAdError error) {
              debugPrint('Inline adaptive banner failedToLoad: $error');
              ad.dispose();
            },
          ),
        );
        await _inlineAdaptiveAd!.load();
      }
    
      @override
      Widget build(BuildContext context) {
        return LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            double maxWidth = constraints.maxWidth;
            double maxHeight = maxWidth / _inlineAdaptiveAd!.size.width * _inlineAdaptiveAd!.size.height;
            _adHeight = maxHeight;
    
            return (_inlineAdaptiveAd != null && _isLoaded)
                ? SizedBox(
                    width: maxWidth,
                    height: _adHeight,
                    child: AdWidget(ad: _inlineAdaptiveAd!),
                  )
                : SizedBox(
                    width: 0,
                    height: 0,
                  );
          },
        );
      }
    
      @override
      void dispose() {
        _inlineAdaptiveAd?.dispose();
    
        super.dispose();
      }
    }

I hope this will work for you.

> If I use AdSize.banner widget does not take the entire width but shows
> the ad correctly. If I use full-banner the ad is stretched.

That's because:

• The AdSize.banner actual size is 320x50.
• The AdSize.fullBanner actual size is 468x60.

Keep in mind that those sizes are fixed regardless of the actual device screen size. To clarify, it seems that the emulator screen width that you are using is less than 468, and more than 320.
<br/><br/>

Therefore, you need to provide a custom size as an AdSize. Instead of declaring size and _finalSize as

AdSize size = AdSize.fullBanner;
_finalSize = const AdSize(height: 40, width: 320);

they could be something like

// use it directly in the BannerAd creation
AdSize size = AdSize(
  width: MediaQuery.of(context).size.width.toInt(),
  height: 40,
);

// ...

// then let _finalSize be the same size for later use (in the build method)
_finalSize = size;

At this point, I'd assume that there is no need to wrap the SizedBox in the build method with an Expanded.

Furthermore, here is a tip:

Use

SizedBox.shrink();

instead of

const SizedBox(
  width: 0,
  height: 0,
);