Flutter应用深浅模式切换时如何修改Android原生广告的文字颜色

方案1：依托Android系统暗夜模式适配（适合Flutter主题跟随系统的场景） #

步骤1：配置明暗两套颜色资源 #

在Android项目app/src/main/res目录下：

• 已有的values/colors.xml中新增广告相关颜色配置（浅色模式）：

<resources>
    <!-- 其他现有颜色 -->
    <color name="ad_headline_text">#000000</color>
    <color name="ad_body_text">#828282</color>
    <color name="ad_attribution_text">#FFFFFF</color>
</resources>

• 新建values-night文件夹，在文件夹内新建colors.xml（深色模式）：

<resources>
    <!-- 其他现有颜色 -->
    <color name="ad_headline_text">#FFFFFF</color>
    <color name="ad_body_text">#A0A0A0</color>
    <color name="ad_attribution_text">#FFFFFF</color>
</resources>

步骤2：修改广告布局XML，替换硬编码颜色 #

把你现有广告布局里的硬编码色值替换为上面定义的颜色引用：

<!-- 广告标题 -->
<TextView
    android:id="@+id/tv_list_tile_native_ad_headline"
    android:textColor="@color/ad_headline_text"
    <!-- 其他原有属性不变 -->
    />
<!-- 广告正文 -->
<TextView
    android:id="@+id/tv_list_tile_native_ad_body"
    android:textColor="@color/ad_body_text"
    <!-- 其他原有属性不变 -->
    />

步骤3：Flutter手动切换主题的额外处理 #

如果你的Flutter应用是手动切换主题、不跟随系统，需要在切换主题时通过MethodChannel同步状态到原生：

• Android侧MainActivity中添加通道处理：

import android.os.Bundle
import androidx.appcompat.app.AppCompatDelegate
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.yourapp/theme_sync"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "setDarkMode") {
                val isDark = call.argument<Boolean>("isDark") ?: false
                AppCompatDelegate.setDefaultNightMode(
                    if (isDark) AppCompatDelegate.MODE_NIGHT_YES 
                    else AppCompatDelegate.MODE_NIGHT_NO
                )
                result.success(null)
            } else {
                result.notImplemented()
            }
        }
    }
}

• Flutter侧切换主题时调用通道同步：

import 'package:flutter/services.dart';

const _channel = MethodChannel('com.yourapp/theme_sync');
// 切换到深色模式时调用
_channel.invokeMethod('setDarkMode', {'isDark': true});
// 切换到浅色模式时调用
_channel.invokeMethod('setDarkMode', {'isDark': false});

切换主题后已加载的广告需要重新加载才会更新颜色。

方案2：通过广告自定义参数传递主题状态（更灵活，无需依赖系统配置） #

步骤1：Flutter加载广告时传入当前主题状态 #

加载NativeAd时通过customOptions把当前明暗模式传给原生：

NativeAd(
  adUnitId: '你的广告单元ID',
  factoryId: 'listTile',
  customOptions: {
    'is_dark_mode': Theme.of(context).brightness == Brightness.dark
  },
  request: const AdRequest(),
)

步骤2：原生广告工厂中动态设置颜色 #

修改你现有的ListTileNativeAdFactory的createNativeAd方法，拿到参数后动态给文字设置颜色：

override fun createNativeAd(
    nativeAd: NativeAd, 
    customOptions: MutableMap<String, Any>?
): NativeAdView {
    // 原有初始化代码不变
    val nativeAdView = LayoutInflater.from(context)
        .inflate(R.layout.list_tile_native_ad, null) as NativeAdView

    // 拿到主题参数
    val isDarkMode = customOptions?.get("is_dark_mode") as? Boolean ?: false

    // 动态设置文字颜色
    val headlineView = nativeAdView.findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
    headlineView.setTextColor(if (isDarkMode) Color.WHITE else Color.BLACK)

    val bodyView = nativeAdView.findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
    bodyView.setTextColor(
        if (isDarkMode) Color.parseColor("#A0A0A0") 
        else Color.parseColor("#828282")
    )

    // 原有剩余逻辑不变
    // ...
    return nativeAdView
}

每次Flutter页面重建、主题切换时重新加载广告，就会自动用对应颜色渲染。

内容的提问来源于stack exchange，提问作者FadyFouad