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

user_5197712 0
Viewed 390

This happens in web only on adjusting screenenter image description here

                  Image(
                    image: AssetImage('assets/rsoft_logo.png'),
                    height: 130,
                    width: 130),
flutter-web flutter image
2 Answers

Solution

I switched to the master channel of Flutter and it works perfectly now. It seems that it was a bug fixed in a recent release of the Flutter master channel.

Check the Flutter version below:

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!

When did it happen for me?

At first, it happened on one image after playing a while with Chrome's window. Then it happened with all of my images just after starting to drag the Chrome's window.

I tried to check what was causing this with the Image widget itself but everything seemed right and nothing explained the gradient.

Today, it didn't happen on first launch (after a reboot), but happened just after a hot reload and and on next launches.

I updated Android Studio, rebooted again, etc, but nothing worked. The gradient appeared pretty fast on some images (not always all).

Switching to master channel solved it for me.

user_35452780

Flutter needs time to load the assets, so it is preferred to pre-cache the assets.

Try adding

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

NOTE: make sure you have the stateful widget as we are using state here.

user_150457930
Related