Reputation: 111
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,
),
);
}
}
Upvotes: 9
Views: 5102
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
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
Reputation: 772
Try to add this property to CachedNetworkImage
filterQuality: FilterQuality.high
Upvotes: 5