我想创建一个圆形图像小部件,但它最终会像素化。
使用
Image.network(url)
,我得到以下信息:
原来的样子是这样的:
相关代码如下:
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,
),
);
}
}
尝试将此属性添加到 CachedNetworkImage
filterQuality: FilterQuality.high
在尝试使用 Canvas Kit 的标准 Web 选项后,我发现图像已像素化,请从命令行键入以下内容以使用 html 渲染器:
flutter run -d chrome --web-renderer html
.
参见这里 Flutter Web 渲染器