Flutter集成InAppWebView时DatePicker样式老旧问题求助

针对你遇到的Android端InAppWebView 6.0.0显示旧版日期选择器的问题，给你几个无需修改网页端的可行方案：

方案1：对齐系统WebView核心配置 #

初始化InAppWebView时，开启混合渲染模式并统一关键配置，让InAppWebView的行为贴近系统原生WebView：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  androidOptions: AndroidInAppWebViewOptions(
    useHybridComposition: true,
    domStorageEnabled: true,
    javaScriptEnabled: true,
    allowFileAccess: true,
    // 替换为你设备上系统WebView的User Agent，可通过普通WebView获取
    userAgent: "Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36",
  ),
)

useHybridComposition会让InAppWebView调用系统原生WebView引擎渲染，避免自定义实现的样式差异；统一UA能防止网页因识别不同WebView加载旧版控件。

方案2：客户端注入CSS强制启用现代控件 #

如果方案1没效果，可在网页加载时注入CSS，移除可能导致控件降级的自定义样式：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  initialSettings: InAppWebViewSettings(javaScriptEnabled: true),
  onPageStarted: (controller, url) async {
    await controller.injectCSSCode(code: """
      input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
      }
    """);
  },
)

这段CSS会重置date输入框的外观样式，强制使用系统默认的现代日期选择器。

方案3：升级Android端依赖配置 #

检查android/app/build.gradle，确保使用高版本的SDK和WebView库：

android {
    defaultConfig {
        targetSdkVersion 33 // 推荐33及以上
    }
}

dependencies {
    implementation 'androidx.webkit:webkit:1.6.0' // 保持最新版
}

旧版本的WebView库可能不支持现代表单控件样式，升级后能适配系统原生控件。

内容的提问来源于stack exchange，提问作者Ángel Moreno Muñoz