如何在 Flutter 中以圆形头像显示选取的图像？

Question

我有以下代码可以启动图像选择器以从图库中选择图像。

File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      _image = File(pickedFile.path);
    });
  }

选择图像后，我希望该图像显示在已经存在的CircleAvatar. 上面的方法 getImage() 被调用如下：

                InkWell(
                        onTap: getImage,
                        child: CircleAvatar(
                          backgroundColor: Colors.black,
                          radius: 40.0,
                          child: CircleAvatar(
                            radius: 38.0,
                            child: ClipOval(
                              child: Image.asset('images/newimage.png'),
                            ),
                            backgroundColor: Colors.white,
                          ),
                        )
                    ),

我有一个ClipOval是 的孩子，CircleAvatar并且有一个默认的 AssetImage 作为它的孩子。我不知道如何用从图库中挑选的图像替换这个占位符图像！任何帮助表示赞赏。

Answer 1

您可以使用CircleAvatar并提供文件对象。.image将为您提供所需的 ImageProvider。

CircleAvatar(
        backgroundColor: Colors.red,
        radius: radius,
        child: CircleAvatar(
            radius: radius - 5,
            backgroundImage: Image.file(
              profileImage,
              fit: BoxFit.cover,
            ).image,
        ),
)

Answer 2

您可以使用_image变量检查它是否为空，然后相应地在 中设置图像ClipOval。

InkWell(
  onTap: getImage,
  child: CircleAvatar(
    backgroundColor: Colors.black,
    radius: 40.0,
    child: CircleAvatar(
      radius: 38.0,
      child: ClipOval(
        child: (_image != null)
        ? Image.file(_image)
        : Image.asset('images/newimage.png'),
      ),
      backgroundColor: Colors.white,
    ),
  ),
);