Flutter web 在带有深色主题的 Android 浏览器中的颜色错误

问题描述 投票:0回答:3

Android 上的 Opera Touch 浏览器正在使用 Flutter 创建的网站上应用深色主题样式,适用于启用深色主题的设备。

似乎所有

Text
小部件都已更改,例如从黑色到白色,但像
Container
这样的小部件的背景并不总是会改变。这使得网页无法阅读。

有没有办法在 Flutter 中禁用此功能,例如不让浏览器应用自己的主题?

我尝试强制使用浅色主题,但这没有帮助。

MaterialApp(
  title: webpageTitle,
  themeMode: ThemeMode.light,
  darkTheme: ThemeData(brightness: Brightness.light)
  ...
)
android flutter opera flutter-web
3个回答
1
投票

我不知道 Opera 专有的黑色主题“扩展”,但我看到了我使用的一些 chrome 扩展的一些源代码,一般来说,它们所做的就是应用全局“.invert”,或者循环整个网页元素并以选择性的方式更改 css/应用反转。

由于 flutter 无法控制这种行为,所以没有办法..至少在 dart 中没有。

您可以在应用程序中应用深色主题,并将其设置为默认主题。这可能是最简单的方法。

您还可以对 opera 执行的脚本进行逆向工程,并通过禁用变量或覆盖函数来使用您自己的 javascript 进行对抗,并且脚本将无法更改您的应用程序颜色。

您可以使用 此插件将 javascript 直接包含在您的网络应用程序中。

我会使用第一个选项,因为大多数扩展都无法提供漂亮的深色主题,所以最好自己实现。或者甚至使用 javascript 检查脚本使用的变量,如果它们存在,您可以从 javascript 调用您的应用程序以启用深色主题//向用户显示该应用程序无法与该扩展一起正常工作的警告。

这将是未来 Flutter Web 应用程序中反复出现的问题。检查这个答案,虽然这只适用于chrome扩展,也许有一天会有一个类似于antiadblock的antidark脚本


0
投票

参加聚会超级晚了,但对我有帮助的是使用 canvaskit 渲染应用程序。 html 渲染必须属于前面评论者提到的浏览器浏览和更改 CSS 的问题。 canvaskit 只是绘制 UI。不过,您必须等待较长的加载网络应用程序。但是,Flutter Forward 提到未来会减少 40% 的负载。


0
投票

这是在使用 flutter web 和 html 渲染器时发生的事情

© www.soinside.com 2019 - 2024. All rights reserved.