CODEWITHSUNDEEP
flutterimagepicker
S M Vaidhyanathan
S M Vaidhyanathan

Reputation: 360

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.

Upvotes: 9

Views: 19667

Answers (9)

IonicFireBaseApp
IonicFireBaseApp

Reputation: 1230

You can use ClipPath widget to achieve it easily

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

Upvotes: 0

Ram udgar Yadav
Ram udgar Yadav

Reputation: 1

If one's want to store the image in backgorundImage properties of circleAvtar then the code below is bestOne:

child: CircleAvatar(backgroundImage: img != null ? Image.file(img!).image :Image.asset('assets/images/startup.jpg').image,radius:70)

Upvotes: 0

Aris_choice
Aris_choice

Reputation: 402

You can you use CircleAvatar widget like this

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

Upvotes: 3

Sumit Sahoo
Sumit Sahoo

Reputation: 3219

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

Upvotes: 22

mohsen tavosi
mohsen tavosi

Reputation: 155

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

Upvotes: 2

S.R Keshav
S.R Keshav

Reputation: 2073

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

 ) 

 )

Upvotes: 0

Rajshekhar
Rajshekhar

Reputation: 614

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

Upvotes: 1

Mr vd
Mr vd

Reputation: 988

Use background image

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

Upvotes: -1

Zeeshan Hussain
Zeeshan Hussain

Reputation: 842

You can use your _image variable to check if it is null or not and then accordingly set the image in 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,
    ),
  ),
);

Upvotes: 1

Related Questions