如何修改Flutter Webview中DatePicker的颜色？

针对你遇到的问题——需要把WebView里DatePicker的水绿色改成底部导航栏加号按钮的蓝色，分两种场景处理：

场景1：网页用的是HTML5原生日期输入框 #

如果网页里是<input type="date">这种HTML5控件，你可以通过向WebView注入自定义CSS来调整样式：

初始化WebViewController时，加入JS代码注入：

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('你的网页地址'))
  ..runJavaScript('''
    // 修改输入框的文字颜色，同时遍历所有日期输入控件
    const dateInputs = document.querySelectorAll('input[type="date"]');
    dateInputs.forEach(input => {
      input.style.color = '#你的蓝色十六进制值';
      // 部分浏览器支持修改弹窗样式，比如Chrome的伪元素，不过兼容性有限
    });
  ''');

场景2：网页唤起了系统原生DatePicker #

如果是WebView调用了手机系统的原生日期选择器，就得分别给Android和iOS做配置：

Android端修改 #

打开android/app/src/main/res/values/styles.xml，修改AppTheme的颜色属性，把原生控件的高亮色换成目标蓝色：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">#你的蓝色值</item>
    <item name="colorAccent">#你的蓝色值</item>
    <!-- 单独指定DatePicker弹窗的主题 -->
    <item name="android:datePickerDialogTheme">@style/CustomDatePicker</item>
</style>

<style name="CustomDatePicker" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="colorAccent">#你的蓝色值</item>
</style>

iOS端修改 #

两种方式任选其一：

1. 修改ios/Runner/Info.plist，添加全局tint颜色配置：

<key>UIView tintColor</key>
<string>#你的蓝色值</string>

2. 在ios/Runner/AppDelegate.swift中代码设置：

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    // 替换成你的蓝色RGB值
    window?.tintColor = UIColor(red: 0/255, green: 122/255, blue: 255/255, alpha: 1.0)
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

注意点 #

• 先确认你的DatePicker属于哪种场景：是网页内的HTML控件，还是唤起的系统原生控件
• 用取色工具获取底部导航栏加号按钮的精确颜色值（十六进制或RGB），确保颜色统一

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