Flutter: equivalent CSS image-Rendering in Flutter

Question

I have an API that returns pixel art’s, this API returns only images with small size: 25x25, 50x50.

• Problem

As the images are very small it is not possible to display these images at a higher resolution, (e.g.: 900x900, 350x350, 600x600)

• Web solution

To display these pixelated images on the web I use the property image-rendering of CSS with value pixelated, This makes the pixelated image high resolution regardless of size

<img src="..." width="1200" height="1200" style="image-rendering: pixelated"> <!-- Ok -->

• Solution in Flutter

What approach is needed to use something similar to image-rendering: pixelated on the Flutter? Something like:

@override
Widget build(BuildContext context) {
  return Image.network('...', rendering: ImageRendering.pixelated);
}

Answer 1

According to the documentation of that property, we have that pixelated means:

When scaling the image up, the Nearest-neighbor Algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as auto.

That is, from English: When the image size is increased, the nearest neighbor algorithm should be used. (Free translation).

While looking at the documentation of widget builders Image, we see the following property FilterQuality:

Use filterQuality to change the quality when scaling an image. Use the Filterquality.low quality Setting to Scale the image, which Corresponds to bilinear Interpolation, rather than the default Filterquality.None which Corresponds to Nearest-neighbor.

That is, this property represents the change in quality when changing the size of an image. To use the nearest neighbor algorithm, use the value FilterQuality.none. This is the desired result in the question.

According to your example, stay:

@override
Widget build(BuildContext context) {
  return Image.network('...', filterQuality: FilterQuality.none);
}

It is worth making clear that this property is present in the other widget builders Image (for example Image.Asset(), etc...)

To see other values than property filterQuality can get, read here.