当我调整屏幕大小时，Flutter 图像变黑和变红，如下图所示

Question

这仅在调整屏幕时出现在 Web 中

                  Image(
                    image: AssetImage('assets/rsoft_logo.png'),
                    height: 130,
                    width: 130),

Answer 1

Flutter 加载资产需要时间，因此比 pre-cache 资产更受欢迎。

尝试添加

@override
  void initState() {
    precacheImage(AssetImage('assets/rsoft_logo.png'));
    super.initState();
  }

注意：确保您拥有有状态小部件，因为我们在这里使用状态。

Answer 2

解决方案

我切换到 Flutter 的 master 频道，现在可以正常使用了。似乎这是最近发布的 Flutter 主频道中修复的错误。

检查下面的Flutter版本：

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 2.11.0-0.0.pre.691, on macOS 12.1 21C52 darwin-x64, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.64.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

我什么时候发生的？

起初，它发生在与 Chrome 的 window 播放一段时间后的一张图像上。然后，在开始拖动 Chrome 的 window.

之后，我所有的图像都发生了这种情况

我试图用图像小部件本身检查是什么原因造成的，但一切似乎都是正确的，没有任何东西可以解释渐变。

今天，第一次启动时（重启后）没有发生，但在热重载之后和下一次启动时发生。

我更新了 Android Studio，再次重新启动等等，但没有任何效果。渐变在某些图像上显得非常快（并非总是如此）。

切换到 master 频道为我解决了这个问题。

当我调整屏幕大小时，Flutter 图像变黑和变红，如下图所示

Flutter Image getting black and red like below image when i adjust the screen size

image

flutter

flutter-web