androidimageflutterdevicepixelratioflutter-assetimage

Resolution aware images not working - Flutter

I am trying to add resolution aware image markers to google maps by converting each image to bitmap as such:

static Future<BitmapDescriptor> makeBitmapDescriptor(String path) {
    return BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), "assets/pinLocationIcons/house.png");
  }

I have followed this format from flutter documentation:

.../pinLocationIcons/house.png
.../pinLocationIcons/2.0x/house.png
.../pinLocationIcons/3.0x/house.png
...etc.

It does not not seem to be working on both android and ios. In my yaml file I have tried declaring only the ".../image.png" and also declaring each directory/file of the variants specifically. However, it continues to use the 1x image.

I tried naming the files like this instead:

.../pinLocationIcons/house.png
.../pinLocationIcons/house@2x.png
.../pinLocationIcons/house@3x.png
...etc.

This now works for ios but always uses the 1x image for android. Is there something I am missing that could make it work for both ios and android? Is there something wrong with my configuration?

Solution

  • After some investigation it turns out I needed to declare device pixel ratio in the image configuration used to make the bitmap.

    static Future<BitmapDescriptor> makeBitmapDescriptor(
      String path, BuildContext context) {
    return BitmapDescriptor.fromAssetImage(
      ImageConfiguration(devicePixelRatio: MediaQuery.of(context).devicePixelRatio,
      path,
    );
  }