How to manage/add multiple image resolution/size in flutter for responsive UI

2.4k views Asked by At

I have bitmap images from an array of different dpis, how can I properly arrange them on flutter? - Just like placing them on mipmaps folders on Android.

Dpi list:

  • ldpi - 0.75x
  • mdpi - 1.0x
  • hdpi - 1.5x
  • xhdpi - 2.0x
  • xxhdpi - 3.0x
  • xxxhdpi - 4.0x
1

There are 1 answers

4
EdYuTo On BEST ANSWER

What you need to do is arrange your image assets following this flutter pattern

So, if you set your image path on pubspec.yaml to something like:

flutter:
  assets:
    - images/

You'd simple need to arrange your files as follow:

  • images/0.75x/my_icon.png (ldpi inside 0.75x folder)
  • images/my_icon.png (mdpi directly inside images)
  • images/1.5x/my_icon.png (hdpi inside 1.5x folder)
  • images/2.0x/my_icon.png (xhdpi inside 2.0x folder)
  • images/3.0x/my_icon.png (xxhdpi inside 3.0x folder)
  • images/4.0x/my_icon.png (xxxhdpi inside 4.0x folder)

And when you use Image.asset("images/my_icon.png") flutter will automatically assign the correct asset.