Search code examples
flutterflutter-image

Images being upscaled in Flutter


I have images stored as blobs in SQLite. Other tools like DB Browser for SQLite show the images themselves are not upscaled.

I scaled them down from an original image with the following code.

final thumbnailData = encodeJpg(copyResize(
  decodeImage(imageData),
  width: 400,
  interpolation: Interpolation.average
));

When displayed in Flutter they are noticably upscaled.

@override
Widget build(BuildContext context) {
  return Image.memory(_getThumbnailData());
}

Image.memory() has a scale argument that defaults to 1.0. Setting it manually to be sure doesn't help either.

I have to set it to some guesstimated value like 2.0 to get the correct scale but I don't understand why and wether 2.0 is actually "unscaled" or still slightly off.

How can I tell Flutter to display the images as they are?


Solution

  • Flutter uses logical pixel instead of physical pixels.

    Device pixels are also referred to as physical pixels. Logical pixels are also referred to as device-independent or resolution-independent pixels.

    How to convert between physical pixels and logical pixels?

    To convert between physical pixels and logical pixels, you can use devicePixelRatio.

    The number of device pixels for each logical pixel. This number might not be a power of two. Indeed, it might not even be an integer. For example, the Nexus 6 has a device pixel ratio of 3.5.

    MediaQuery.of(context).devicePixelRatio