Open
Description
[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.