flutter - 如何在 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,
                          ),
                        )
                    ),

我有一个ClipOvalwhich 是 the 的子级，CircleAvatar并且有一个默认 AssetImage 作为它的 child 。我无法弄清楚如何用从图库中挑选的图像替换这个占位符图像！任何帮助表示赞赏。

score 9 · Accepted Answer

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

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

score 2 · Accepted Answer

您可以使用您的_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,
    ),
  ),
);

score 1 · Accepted Answer

您必须在 ClipOval 的子项中使用 _image。那可行。您还可以添加对 null 或空的检查，

            InkWell(
                    onTap: getImage,
                    child: CircleAvatar(
                      backgroundColor: Colors.black,
                      radius: 40.0,
                      child: CircleAvatar(
                        radius: 38.0,
                        child: ClipOval(
                          child: Image.file(_image),
                        ),
                      ),
                    )
                ),

score 1 · Accepted Answer

它是如此简单。只需将您的文件放入FileImage并嵌入backgroundImage到 CircleAvatar 小部件中。

CircleAvatar(radius: 50.0,
             backgroundColor: Colors.white,
             backgroundImage: FileImage(profileImageFile))

score 0 · Accepted Answer

Container (
child:image != null? Container (. 
height:,
width:,
Decoration: BoxDecoratiob(
shape: BoxShape.circular
Image : DecorationImage(
Image : FileImage(image)
fit:BoxFit.fill
))
): Container (
Child:...

 ) 

 )

score 0 · Accepted Answer

你可以像这样使用 CircleAvatar 小部件

 CircleAvatar(backgroundImage: Image.file(
               File(_image.path
                   .toString()),
                    fit: BoxFit.cover,).image,
       )

score -1 · Accepted Answer

使用背景图片

CircleAvatar(
                           
backgroundImage:Image.file(_image),
    ),

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

7 回答 7

Related

Reference