Resolution aware images not working - Flutter

776 views Asked by At

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/[email protected]
.../pinLocationIcons/[email protected]
...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?

3

There are 3 answers

0
Shaveen On BEST ANSWER

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,
    );
  }
0
Raman CHAWRESH On

I suggest that you find the asset path manually if you have a deadline for a project you are working on. Seems like you have done everything as per https://flutter.dev/docs/development/ui/assets-and-images

0
Sunshine On

Following up on Shaveen's answer you can also avoid having to use the BuildContext like so :

static Future<BitmapDescriptor> makeBitmapDescriptor(
      String path) {
    return BitmapDescriptor.fromAssetImage(
      ImageConfiguration(devicePixelRatio: MediaQueryData.fromWindow(WidgetsBinding.instance.window).devicePixelRatio,
      path,
    );
  }

using MediaQueryData.fromWindow(WidgetsBinding.instance.window).devicePixelRatio