Flutter Image gets blurred to red and black when screen size changes

user_13003387 0
Viewed 292

enter image description here

Hi everyone, we're having problem when using flutter web. What happens:

  • we run flutter run -d chrome --web-renderer canvaskit and flutter run -d chrome --web-renderer html but nothing changes
  • we open inspect on browser, then close it quickly, suddenly the image is broken like shown in the picture.
  • image format is .png

Does anyone here know what might cause this problem?

flutter-web flutter responsive google-chrome html
1 Answers

Just remove the width and height of the image, and adjust the image width and height on image editing tools.

from this

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

into this

               Image(
                    image: AssetImage('assets/logo.png')),

If this not works than try this

Image yourImage;

@override
void initState() {
  super.initState();
  yourImage= Image.asset('assets/logo.png');
}
  
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  precacheImage(yourImage.png, context);
}

If both not works than the problem with your image. Just change your image I hope this will help, Thank you.

user_51977120
Related