Banner Ads are not cut off and look horrible

[patolax]

I have tried several Google forums to get this fixed or obtain a proper implementation method.

This is the last response I got. Not sure where to go from here.

I can't release the app ads shown like this. It looks horrible.

This is my code. Please provide me a working solution.

class AdBanner extends StatefulWidget {
  const AdBanner({Key? key}) : super(key: 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.
    AdSize size = AdSize.banner;
    size = (await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        windowwidth)) as AdSize;

    _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();
  }
}

[huycozy]

Hi @patolax
When checking this issue on my device Realme 6, Android 11, the banner looks fine in the center:

Which device are you seeing the issue?

Could you try running native sample AdaptiveBannerExample on your device to see if the issue also occurs?

[patolax]

This is from my own Android app using admob integration in Java running on the same device.

As you can see the ad is working fine without any miss alignments.

The issue is when I use fultter integration.
May others have reported this #261 (comment)

This is my test device https://www.motorola.com.au/smartphone-motorola-moto-g22/p

[patolax]

And here is the output from https://github.com/googleads/googleads-mobile-android-examples/tree/main/kotlin/admob/AdaptiveBannerExample. Its working fine.

[huycozy]

Thanks for checking this. I will re-open #261 as many reports along with information there. Please leave there a comment (or update your comment) with a demo above and device information as well.

Closing this as a duplicate.