Image not inside circle avatar

Question

i'm trying to pick image from my gallery then show it to my circleavater, the problem is, the image isn't inside the circle avatar.

So, i'm using image_picker: ^0.4.12+1

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

and here is the widget

  children: <Widget>[
                _image == null ?
                 Container(
                    width: 150.0,
                    height: 150.0,
                    margin: EdgeInsets.only(top: 25.0, bottom: 10.0),
                     child: CircleAvatar(
                       radius: 30.0,
                       backgroundImage:
                       NetworkImage('https://via.placeholder.com/150'),
                       backgroundColor: Colors.transparent,
                     )
                ): Container(
                  height: 150.0,
                  width: 150.0,
                    margin: EdgeInsets.only(top: 25.0, bottom: 10.0),
                    child: CircleAvatar(
                      radius: 30.0,
                      backgroundImage:
                      NetworkImage('https://via.placeholder.com/150'),
                      backgroundColor: Colors.transparent,
                      child:  new Image.file(_image),
                    )

                )
//etc

here is the screenshot when the page open

and here is the screenshot after i pick an image

how can i fix it, sorry for my english and thanks in advance

you have to give - `Image.file(_image)`, to `backgroundImage:` not to child — anmol.majhail, Mar 01 '19 at 12:05
thanks, but i already try that. It give me an error. type 'Image' can't be assigned to the parameter type 'ImageProvider' — Boby, Mar 01 '19 at 12:11
Do `FileImage(_image)` - `backgroundImage: FileImage(_image)` — anmol.majhail, Mar 01 '19 at 12:12
`child` basically overlay it on top. we have to clip it manually if we want to use child. — anmol.majhail, Mar 01 '19 at 13:00

score 0 · Answer 1 · answered Apr 23 '23 at 08:07

Replace CircleAvatar with clipoval and your image get fixed in container.

Container(
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.black, width: 1),
              ),
              child: ClipOval(
                child:  NetworkImage('https://via.placeholder.com/150'),
              ),
            ),

Image not inside circle avatar

1 Answers1