CODEWITHSUNDEEP
imageflutterdartnetworkimageview
Emil Djupvik
Emil Djupvik

Reputation: 111

How to fix pixelated image in Flutter

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

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

Pixelated image

while the original looks like this:

enter image description here

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

Upvotes: 9

Views: 5102

Answers (3)

Axel Asa
Axel Asa

Reputation: 43

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

Upvotes: 0

Philip Collings
Philip Collings

Reputation: 11

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

Upvotes: 1

Vadim Popov
Vadim Popov

Reputation: 772

Try to add this property to CachedNetworkImage

filterQuality: FilterQuality.high

Upvotes: 5

Related Questions