Native ad template displays white text when text color is set to black.

[weltherjoe]

[REQUIRED] Step 1: Describe your environment

Real and simulated Android devices. Apparently, it's ok on iOS.

Plugin Version

google_mobile_ads: 5.3.1

[REQUIRED] Step 2: Describe the problem

When the text color in nativeTemplateStyle is changed to black, the text turns white.

Steps to Reproduce

Github project to reproduce: https://github.com/weltherjoe/nativead_test.git

main.dart

import 'dart:io';
import 'dart:developer' as developer;

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

Color backgroundColor = Colors.white;
Color textColor = Colors.black;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await MobileAds.instance.initialize();
  MobileAds.instance.setAppMuted(true);

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'NativeAd Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (_, index) {
                final MyNativeAdmobTweet myNativeAd = MyNativeAdmobTweet();
                myNativeAd.loader();

                if (index == 2 || index == 12) {
                  return Column(
                    children: [
                      ValueListenableBuilder<bool>(
                        valueListenable: myNativeAd,
                        builder: (_, value, child) {
                          return Visibility(
                            visible: value,
                            child: ConstrainedBox(
                              constraints: const BoxConstraints(
                                minWidth: 320, // minimum recommended width
                                minHeight: 320, // minimum recommended height
                                maxWidth: 400,
                                maxHeight: 400,
                              ),
                              child: value
                                  ? AdWidget(ad: myNativeAd.nativeAd!)
                                  : const SizedBox.shrink(),
                            ),
                          );
                        },
                      ),
                      const Divider(height: 1, color: Colors.grey),
                    ],
                  );
                } else {
                  return Column(
                    children: [
                      SizedBox(
                          height: 40,
                          child: Text(
                            'Item $index',
                            style: TextStyle(color: textColor),
                          )),
                      const Divider(height: 1, color: Colors.grey),
                    ],
                  );
                }
              },
            ),
          ),
          SizedBox(
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    FilledButton(
                      onPressed: () => setState(() {
                        backgroundColor = Colors.black;
                      }),
                      child: const Text("Black Background"),
                    ),
                    FilledButton(
                        onPressed: () => setState(() {
                              backgroundColor = Colors.white;
                            }),
                        child: const Text("White Background")),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    FilledButton(
                      onPressed: () =>
                          setState(() => backgroundColor = Colors.purple),
                      child: const Text("Purple Background"),
                    ),
                    FilledButton(
                        onPressed: () =>
                            setState(() => backgroundColor = Colors.amber),
                        child: const Text("Amber Background")),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    FilledButton(
                        onPressed: () =>
                            setState(() => textColor = Colors.black),
                        child: const Text("Black Text")),
                    FilledButton(
                        onPressed: () =>
                            setState(() => textColor = Colors.white),
                        child: const Text("White Text")),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    FilledButton(
                        onPressed: () =>
                            setState(() => textColor = Colors.purple),
                        child: const Text("Purple Text")),
                    FilledButton(
                        onPressed: () =>
                            setState(() => textColor = Colors.amber),
                        child: const Text("Amber Text")),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class MyNativeAdmobTweet extends ValueNotifier<bool> {
  NativeAd? nativeAd;

  MyNativeAdmobTweet() : super(false);

  loader() {
    NativeAd(
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/2247696110'
          : 'ca-app-pub-3940256099942544/3986624511',
      request: const AdRequest(),
      listener: NativeAdListener(
        onAdClicked: (ad) => developer.log('Ad clicked: ${ad.adUnitId}.'), //
        onAdClosed: (ad) => developer.log('Ad closed: ${ad.adUnitId}.'), //
        onAdFailedToLoad: (ad, error) {
          developer.log('Ad failed to load: ${ad.adUnitId}, $error.');
          ad.dispose();
        },
        onAdImpression: (ad) =>
            developer.log('Ad impression: ${ad.adUnitId}.'), //
        onAdLoaded: (ad) {
          nativeAd = ad as NativeAd;
          developer.log('Ad loaded: ${ad.adUnitId}.'); //
          value = true;
        },
        onAdOpened: (ad) => developer.log('Ad opened: ${ad.adUnitId}.'), //
        onAdWillDismissScreen: (ad) =>
            developer.log('Ad dismiss screen: ${ad.adUnitId}.'), //
        onPaidEvent: (ad, doub, precision, str) => developer.log(
            'Native Ad paid event: ${ad.adUnitId}, $doub, $precision, $str.'), //
      ),
      nativeTemplateStyle: NativeTemplateStyle(
        // Required: Choose a template.
        templateType: TemplateType.medium,
        // Optional: Customize the ad's style.
        mainBackgroundColor: backgroundColor,
        primaryTextStyle: NativeTemplateTextStyle(
          textColor: textColor,
          style: NativeTemplateFontStyle.bold,
        ),
        secondaryTextStyle: NativeTemplateTextStyle(
          textColor: textColor,
          style: NativeTemplateFontStyle.bold,
        ),
        tertiaryTextStyle: NativeTemplateTextStyle(
          textColor: textColor,
          style: NativeTemplateFontStyle.bold,
        ),
      ),
    ).load();
  }
}

Expected results:
The text should turn black when clicking the "Black Text" button
Actual results:
The text turns white

Screenshots:
Amber Text

Black Text

Logs

[✓] Flutter (Channel stable, 3.27.3, on macOS 14.5 23F79 darwin-arm64, locale pt-BR)
    • Flutter version 3.27.3 on channel stable at /Users/welther/Developer/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c519ee916e (9 days ago), 2025-01-21 10:32:23 -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/welther/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 17.0.10+0-17.0.10b1087.21-11609105)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2024.1)
    • 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 17.0.10+0-17.0.10b1087.21-11609105)

[✓] VS Code (version 1.96.4)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (6 available)
    • MI 9 (mobile)                   • 99eabd28                             • android-arm64  • Android 10 (API 29)
    • WobbleWumpus (mobile)           • 00008130-000579921433803A            • ios            • iOS 17.6.1 21G93
    • iPhone 15 Pro Max (mobile)      • 5D19BD98-875C-428D-948E-A8FDA3992FA4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-17-5 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 14.5 23F79
      darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 14.5 23F79
      darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome
      132.0.6834.111

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

[malandr2]

Hi @weltherjoe, can you also replicate using our native_template_example? Does Dark/Light mode have any affect on your expectations?

[weltherjoe]

Hi @weltherjoe, can you also replicate using our native_template_example? Does Dark/Light mode have any affect on your expectations?

Dark and Light mode do not affect the result. With "native_template_example" the result is the same. See the screenshot:

[malandr2]

Thanks for testing, I've shared with this @LTPhantom to address.