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

Question

This happens in web only on adjusting screen

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

Solution 1

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.

Solution 2

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.

Comments

[Yeasin Sheikh]

try flutter clean and rebuild the app. And you can use fit property on image.

[Anandh Krishnan]

tried plenty of times bro, not solved

[leb1755]

I face this issue as well. It is not happening on Desktop (macOS) but it is on Web. I tried adding errorBuilder to the Image widget with no luck. Everything seems fine. Neither AssetImage nor NetworkImage works. Adding a color to the image correctly prints the color on top of the gradient... I believe this should be reported in the Github issues: github.com/flutter/flutter/issues

[Anandh Krishnan]

Not works bro, Is there any other way ?

[nagendra nag]

are you getting any logs in terminal

[nagendra nag]

try using Image.asset or Image.network instead Image

[Anandh Krishnan]

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

[Anandh Krishnan]

this also causing same error. This is my anydesk id 451 156 111 can u fix this bro.

[nagendra nag]

unable to figure out the issue bro

[nagendra nag]

Let us continue this discussion in chat.

[nagendra nag]

@AnandhKrishnan ok done. leb1755's solution isn't useful for you?

[Anandh Krishnan]

no bro ,not works