Native ad template body text squishing call-to-action button

[bhumkong]

[REQUIRED] Step 1: Describe your environment

Real device with Android 14.

Plugin Version

google_mobile_ads: 5.3.0

[REQUIRED] Step 2: Describe the problem

The height of the action button of a medium-sized native ad is unstable – it can be thin or thick, depending on the text (if the text takes one line or two lines). I think it is a bug because it looks inconsistent.

Steps to Reproduce

1. Run flutter create bug.
2. Update the files as follows:
   main.dart:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MreScreen(),
    );
  }
}

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

  @override
  MreScreenState createState() => MreScreenState();
}

class MreScreenState extends State<MreScreen> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;
  final String _cardAdUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  void _disposeNativeAd() {
    _nativeAdIsLoaded = false;
    nativeAd?.dispose();
    nativeAd = null;
  }

  @override
  void dispose() {
    _disposeNativeAd();
    super.dispose();
  }

  /// Workaround for https://github.com/googleads/googleads-mobile-flutter/issues/1171
  void update() async {
    await Future.delayed(Duration(milliseconds: 200));
    setState(() {});
  }

  void loadNewNativeAd() {
    nativeAd = NativeAd(
        adUnitId: _cardAdUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
            update();
          },
          onAdFailedToLoad: (ad, error) {
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdRequest(),
        nativeTemplateStyle: NativeTemplateStyle(
          templateType: TemplateType.medium,
        )
    )
      ..load();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> appBarActions = <Widget>[
      IconButton(
        icon: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            _disposeNativeAd();
          });
          loadNewNativeAd();
        },
      ),
    ];

    final Widget ad;
    if (_nativeAdIsLoaded && nativeAd != null) {
      ad = AdWidget(ad: nativeAd!);
    } else {
      ad = Text("Tap ⟳ to load ad");
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("Native Ad Example"),
        actions: appBarActions,
      ),
      body: Center(
        child: ad,
      ),
    );
  }
}

Define your ads.APPLICATION_ID in AndroidManifest.xml
Run flutter pub add google_mobile_ads
4. Run the app
5. Tap the refresh button – you will see an ad. The text description of the ad will take one or two lines of text.
6. Try refreshing the ad again (maybe multiple times) until you get another get that takes a different amount of text lines.
Expected results:
The action button design looks the same for different ads
Actual results:
The action button height is lower for some ads and significantly higher for other ads.

Screenshots:

flutter doctor -v ``` [✓] Flutter (Channel stable, 3.27.2, on macOS 15.2 24C101 darwin-arm64, locale en-AM) • Flutter version 3.27.2 on channel stable at /Users/anton/dev/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 68415ad1d9 (13 days ago), 2025-01-13 10:22:03 -0800 • Engine revision e672b006cb • Dart version 3.6.1 • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /Users/anton/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)
• All Android licenses accepted.

[✗] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
Download at: https://developer.apple.com/xcode/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is a package manager for iOS or macOS platform code.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/to/platform-plugins
For installation instructions, see https://guides.cocoapods.org/using/getting-started.html#installation

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)

[✓] Connected device (3 available)
• 2311DRK48G (mobile) • DQEUGMJBUG95NFOR • android-arm64 • Android 14 (API 34)
• macOS (desktop) • macos • darwin-arm64 • macOS 15.2 24C101 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.265

[✓] Network resources
• All expected network resources are available.

! Doctor found issues in 1 category.

</details>

[bhumkong]

It have been mentioned in #558

[malandr2]

Hi @bhumkong, I can also replicate this. The content of the native ad is dynamic although the native ad height must be set before the ad is loaded and there is no way to get the size of the native template after it's been loaded. I've shared with @LTPhantom to take a closer look

[weltherjoe]

If the text has three lines, the button is cut in half.

The button disappeared:

[malandr2]

Hey @weltherjoe, thanks for calling out. It appears we aren't truncating body text to respect the 90 character limit (https://support.google.com/admanager/answer/6075370) and constraining the button to have a constant height. This will be addressed and included in a future release