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

I have the following code which launches the image picker to select image from gallery.

File _image;
  final picker = ImagePicker();

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

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

After the image is selected, I want that image to be displayed in an already present CircleAvatar. The above method getImage() is called as shown below:

                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,
                          ),
                        )
                    ),

I have a ClipOval which is the child of the CircleAvatar and has a default AssetImage as its child . I am not able to figure out how to replace this placeholder image with the one that is picked from the gallery! Any help is appreciated.

flutter imagepicker

Solution 1:^[1]

You can use CircleAvatar and provide the file object. .image will give you the ImageProvider that is needed.

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

Solution 2:^[2]

You have to use the _image in the child of ClipOval. That will work. You can also add a check for null or empty,

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

Solution 3:^[3]

it is so easy.only put your file into FileImage and embedded in backgroundImage in the CircleAvatar widget.

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

Solution 4:^[4]

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

 ) 

 )

Solution 5:^[5]

You can you use CircleAvatar widget like this

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

Solution 6:^[6]

Use background image

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sumit Sahoo
Solution 2	Rajshekhar
Solution 3	mohsen tavosi
Solution 4
Solution 5
Solution 6	Mr vd

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]