Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Images loose quality when using image.asset in flutter

I have user Image.asset for a png, but have remarked that image loose quality, how to preserve same quality in real devices.

Thanks in advance.

like image 978
khalid tounoussi Avatar asked May 21 '19 14:05

khalid tounoussi


People also ask

What is the difference between AssetImage and image asset in Flutter?

Image is a StatefulWidget and Image. asset is just a named constructor, you can use it directly on your widget tree. AssetImage is an ImageProvider which is responsible for obtaining the image of the specified path. If you check the source code of the Image.

Does Flutter support JPEG?

The Flutter app supports many image formats, such as JPEG, WebP, PNG, GIF, animated WebP/GIF, BMP, and WBMP.


1 Answers

In my case, the problem was due to a bad configuration of the image resolution system.

On the one hand, you have to specify the different resolutions in the assets folder.

assets/my_icon.png
assets/2.0x/my_icon.png
assets/3.0x/my_icon.png

On the other hand, you have to declare these variants in the pubspec.yaml file.

flutter:
  assets:
    - assets/
    - assets/2.0x/
    - assets/3.0x/

More information in the Flutter docs.

TIP: If you export the images from another program (Adobe XD for example), you can automate this task with the image_res package.

like image 126
AlejandroQS Avatar answered Sep 17 '22 19:09

AlejandroQS