How to fix pixelated image in Flutter

Question

I want to create a rounded image widget, but it ends up pixelated.

With Image.network(url), I get the following:

while the original looks like this:

Here is the relevant code:

class RoundedImage extends StatelessWidget {
  final String URL;
  final double size;
  final bool dynamicallySized;
  final double borderRadius;
  final bool onlyTopBorderRadius;

  const RoundedImage({
    @required this.size,
    @required this.url,
    this.dynamicallySized = false,
    this.borderRadius = 8.0,
    this.onlyTopBorderRadius = false,
  });

  @override
  Widget build(BuildContext context) {
    final newSize = dynamicallySized ? PaddingUtils.getPadding(context, padding: size) : size;
    return ClipRRect(
      borderRadius:
          onlyTopBorderRadius ? BorderRadius.vertical(top: Radius.circular(borderRadius)) : BorderRadius.circular(borderRadius),
      child: CachedNetworkImage(
        imageUrl: url,
        height: newSize,
        width: newSize,
        fit: BoxFit.cover,
      ),
    );
  }
}

Knitter

Answer 1

Try to add this property to CachedNetworkImage

filterQuality: FilterQuality.high

Halloo

Actually, it seems that when scaling down the image, FilterQuality.medium should produce better results. See this comment github.com/flutter/flutter/issues/79645#issuecomment-819920763 – Ouch

for me neither are working – Conan

Answer 2

After trying the standard web option that uses Canvas Kit I found the images were pixelated, type this from the command line to use html renderer instead:

flutter run -d chrome --web-renderer html.

See here Flutter Web Renderers

Gules

Answer 3

Here is a thread about how the image issue can be solved. link -> https://github.com/flutter/flutter/issues/65120

However, this link tells you why you face the pixelation issue, and how it can be solved i.e., for those who do not want to go through the full thread. link-> https://github.com/flutter/flutter/issues/65120#issuecomment-686835554

Marismarisa