如何在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作为其子元素。我无法弄清如何将这个占位符图片替换为从画廊中选择的图片！任何帮助都将不胜感激。

- S M Vaidhyanathan

---

backgroundImage 怎么办？在 CircleAvatar() 中，有一个名为 backgroundImage 的属性，其类型为 ImageProvider<Object>?。我该如何将我的选择的图像放在那里？ - pragmateek

Answer 1

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

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

- Sumit Sahoo

---

这是最直接的答案！！！应该被标记为解决方案。 - blessing dickson

对我有用！同意，这是最好的答案。 - artoniaz

这绝对是疯狂的。恭喜你，伙计！ - Kimanthi K.

Answer 2

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

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

- Aris_choice

Answer 3

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

- Zeeshan Hussain

Answer 4

这很容易。只需将您的文件放入FileImage，并嵌入到CircleAvatar小部件的backgroundImage中即可。

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

- mohsen tavosi

Answer 5

你需要在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),
                        ),
                      ),
                    )
                ),

- Rajshekhar

Answer 6

如果想要将图片存储在 circleAvatar 的 backgroundImage 属性中，以下代码是最佳选择： child: CircleAvatar(backgroundImage: img != null ? Image.file(img!).image :Image.asset('assets/images/startup.jpg').image,radius:70)

- Ram udgar Yadav

---

这是最好的一个。 - Ram udgar Yadav

Answer 7

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

 ) 

 )

- S.R Keshav

Answer 8

您可以使用ClipPath小部件轻松实现它

ClipPath(
          clipper: const ShapeBorderClipper(shape:  CircleBorder()),
          clipBehavior: Clip.hardEdge,
          child: (_image != null) ? Image.file(_image)
        : Image.asset('images/newimage.png'),)

- IonicFireBaseApp

Answer 9

Use background image

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

- Mr vd

---

参数类型“Image”无法分配给参数类型“ImageProvider<Object>”。 - LearningPath