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

Question

我有以下代码启动图像选择器到select图库中的图像。

File _image;
  final picker = ImagePicker();

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

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

图像 select 编辑后，我希望该图像显示在已经存在的 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

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

Answer 2

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

 ) 

 )

Answer 3

Use background image

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

Answer 4

您必须在 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),
                        ),
                      ),
                    )
                ),

Answer 5

就是这样 easy.only 将您的文件放入 FileImage 并嵌入到 CircleAvatar 小部件的 backgroundImage 中。

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

Answer 6

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

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

Answer 7

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

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

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

How to display picked image in a circle avatar in Flutter?

flutter

imagepicker