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,
      ),
    );
  }
}

score 5 · Accepted Answer · answered Jan 14 '21 at 15:33

5

Try to add this property to CachedNetworkImage

filterQuality: FilterQuality.high

answered Jan 14 '21 at 15:33

Vadim Popov

727
8
16

3

Actually, it seems that when scaling down the image, `FilterQuality.medium` should produce better results. See this comment https://github.com/flutter/flutter/issues/79645#issuecomment-819920763 – Lukas Nevosad Jul 06 '22 at 16:49
1

for me neither are working – Karan V Jan 25 '23 at 00:29

How to fix pixelated image in Flutter

1 Answers1