Is it possible to use 2x assets on a 3x device in Flutter

Issue

I have a iOS and Android app, written in Flutter. I have an assets folder with png files, structured in standard Flutter fashion with 1.5x, 2x, 3x and 4x sub-folders.

I have added this to pubspec.yaml:

  assets:
    - assets/

This works fine.

But for a specific set of images I would like to only have them in one size, say 2x and the just scale those for the other sizes. I am aware that this will make them a bit fuzzy but for those specific images this is ok.

For native iOS development I could just include the 2x images and iOS would automatically choose those and scale them, e.g. on a 3x device.

Is there a way to achive the same with Flutter?

If I just delete the assets in the 3x folder, I get an exception on a 3x device.

Solution

One way to come closer to automatic scaling is according to my tests to include 1x and 2x assets. This seems to lead Flutter to use the 2x assets also for 3x devices.

If I include only 2x assets in the project it will fail with an exception at runtime. If I include only 1x assets, those will be used and scaled. If I include both 1x and 2x assets, the 2x assets will be used and scaled.

Scaled 2x assets looks significantly less fuzzy on a 3x device (iPhone X) and when 1x assets are used.

Answered By – Nicolai Henriksen

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *