如何在Flutter中使FadeInImage.assetNetwork图像循环

Question

如何控制FadeInImage.assetNetwork((图像的形状？

下面是我显示用户配置文件图片的代码，其中图片是从firebase接收的(作为url字符串(：myAccountState.customUser.profilePic，可以通过调用_pickImage((函数进行更改。

Center(
child: InkWell(
onTap: () {
_pickImage();
},
child: CircleAvatar(
radius: 40.0,
backgroundColor: Colors.transparent,
child: FadeInImage.assetNetwork(
placeholder: 'images/whiteBackground.png',
image: myAccountState.customUser.profilePic,
),
),
),
),

图像显示为正方形，我希望它是圆形。我通过调用下面的代码将图片创建为圆形，但NetworkImage((不接受myAccountState.customUser.profilePic作为有效字符串。

CircleAvatar(
radius: 40.0,
backgroundColor: Colors.orange,
foregroundImage: NetworkImage(
'image_url_here'),
child: InkWell(
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
splashColor: Colors.orangeAccent,
onTap: () {
_pickImage();
},
),
),

编辑：另一个完全不同的解决方案是将个人资料图片裁剪成圆形。。。我使用image_cropper包(按以下顺序调用三个函数(将图片裁剪成圆形，但图像仍保存为firebase中的正方形。有人知道这是否正常吗？还是我在这里犯了一个错误？

Future _pickImage() async {
final pickedImage = await ImagePicker().pickImage(
source: ImageSource.gallery,
);
imageFile = pickedImage != null ? File(pickedImage.path) : null;
if (imageFile != null) {
setState(() {
state = PicState.picked;
_cropImage();
});
}
}
Future _cropImage() async {
File? croppedFile = await ImageCropper().cropImage(
sourcePath: imageFile!.path,
cropStyle: CropStyle.circle,
aspectRatioPresets: Platform.isAndroid
? [
CropAspectRatioPreset.square,
CropAspectRatioPreset.ratio3x2,
CropAspectRatioPreset.original,
CropAspectRatioPreset.ratio4x3,
CropAspectRatioPreset.ratio16x9
]
: [
CropAspectRatioPreset.original,
CropAspectRatioPreset.square,
CropAspectRatioPreset.ratio3x2,
CropAspectRatioPreset.ratio4x3,
CropAspectRatioPreset.ratio5x3,
CropAspectRatioPreset.ratio5x4,
CropAspectRatioPreset.ratio7x5,
CropAspectRatioPreset.ratio16x9
],
androidUiSettings: AndroidUiSettings(
toolbarTitle: 'Cropper',
toolbarColor: Colors.deepOrange,
toolbarWidgetColor: Colors.white,
initAspectRatio: CropAspectRatioPreset.original,
lockAspectRatio: false),
iosUiSettings: IOSUiSettings(
title: 'Crop your Profile Picture',
));
if (croppedFile != null) {
imageFile = croppedFile;
setState(() {
state = PicState.cropped;
_uploadImage();
});
}
}
Future<void> _uploadImage() async {
final myAccountState = Provider.of<MyAccountState>(context, listen: false);
try {
await profileStrg
.child('profilePic.${myAccountState.customUser.uid}')
.putFile(imageFile!);
_updateProfilePic();
} on CustomError catch (e) {
errorDialog(context, e);
}
}

Answer 1

不要使用InkWell，而是用手势检测器包裹CicularVatar。墨水井是用固定的属性预先构建的，比如填充等，如果它阻止了圆形图像作为按钮，我也不会感到惊讶。