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

zy1mlcev 于 2023-02-09 发布在 Flutter

关注(0)|答案(9)|浏览(173)

我有下面的代码，启动图像选择器从画廊选择图像.

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作为其子级。我不知道如何将此占位符图像替换为从库中选取的图像！如有任何帮助，我们将不胜感激。

flutter

来源：https://stackoverflow.com/questions/63114278/how-to-display-picked-image-in-a-circle-avatar-in-flutter

9条答案

按热度按时间

mum43rcc1#

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

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

赞(0）回复(0）举报 2023-02-09

gpnt7bae2#

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

赞(0）回复(0）举报 2023-02-09

eivgtgni3#

你必须在ClipOval的子元素中使用_image。这是可行的。你也可以添加一个null或empty的检查。

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

赞(0）回复(0）举报 2023-02-09

j1dl9f464#

这是如此简单。只需要把你的文件放进FileImage，然后嵌入到CircleAvatar小部件的backgroundImage中。

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

赞(0）回复(0）举报 2023-02-09

3qpi33ja5#

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

 ) 

 )

赞(0）回复(0）举报 2023-02-09

11dmarpk6#

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

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

赞(0）回复(0）举报 2023-02-09

xoshrz7s7#

如果想在circleAvtar的backgorundImage属性中存储图像，那么下面的代码是最好的：
x1月1x）

赞(0）回复(0）举报 2023-02-09

ha5z0ras8#

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

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

赞(0）回复(0）举报 2023-02-09

mw3dktmi9#

使用背景图像

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

赞(0）回复(0）举报 2023-02-09

我来回答

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

9条答案

相关问题

热门标签

最新问答