Question 178517 in Flutter Question posted in
The official Flutter documentation can be found here.

Is Admob Banner ad 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();
  }
}

enter image description here

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search