Banner ads cut off in production

[patolax]

We put a lot of effort into creating a nice UI, but AdMob ads come and destroy it.

This is from the production version. Some ads are misaligned and get cut off and the entire UI looks bad. How to fix this? my code is shown below.

`class AdBanner extends StatefulWidget {
  const AdBanner({super.key});

  @override
  State<AdBanner> createState() => _AdBannerState();
}

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

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      var windowWidth = MediaQuery.of(context).size.width.truncate();
      _loadAd(windowWidth);
    });
  }

  void _loadAd(int windowWidth) async {
    await _inlineAdaptiveAd?.dispose();
    // Get an inline adaptive size for the current orientation.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            windowWidth);
    if (size == null) {
      debugPrint('Unable to get height of anchored banner.');
      return;
    }

    _inlineAdaptiveAd = BannerAd(
      adUnitId: AdHelper.bannerAdUnitId,
      size: size,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) async {
          debugPrint('Inline BannerAdListener onAdLoaded');
          if (mounted) {
            setState(() {
              _isLoaded = true;
            });
          }
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          debugPrint('Inline adaptive banner failedToLoad: $error');
          _isLoaded = false;
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

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

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

    super.dispose();
  }
}`

[malandr2]

Hi @patolax, the flutter plugin does not control how the content in the AdWidget is displayed. As long as you have set the widget's bounds to the your desired size, it is working as intended. The content that is displayed in the widget is most likely the source of the issue. As a next step I recommend to debug your ad unit and any other questions/debugging concerns you may have can be directed to the AdMob Developer forum to properly triage.

Closing this out. Thanks!