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

您可以使用function formatData(string) { const [q, a] = string.split(':'); const ques = q.split(','); const ans = a.split(','); const obj = {}; for (let i = 0; i < ques.length; i++) { obj[ques[i]] = ans[i].replace("\"", '').trim(); } console.log(obj); return obj; } formatData('Demo Question 1,Demo Question 2,Demo Question 3: "Answer 2,Answer 2,Answer 4"');并提供文件对象。 CircleAvatar将为您提供所需的ImageProvider。

.image

Answer 2

您必须在ClipOval的子级中使用_image。那可行。您还可以添加一个用于检查是否为空或空的支票，

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

Answer 3

您可以使用_image变量检查其是否为null，然后在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 4

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

 ) 

 )

Answer 5

使用背景图片

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

Answer 6

如此简单。只需将文件放入CircleAvatar小部件中的FileImage并嵌入backgroundImage中即可。

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

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

6 个答案: