Display image in circular shape from external storage

Question

I have tried following code snippet:

new Container(
    height: 80.0,
    width: 80.0,
    decoration: new BoxDecoration
    shape: BoxShape.circle,
    border: Border.all(color: const Color(0x33A6A6A6)),
    // image: new Image.asset(_image.)
    ),
    child: new Image.file(_image),
));

But it's not working.

Answer 1

You can try either the BoxDecoration class with a Radius of 50:

new Container(
    height: 80.0,
    width: 80.0,
    decoration: new BoxDecoration(
        color: const Color(0xff7c94b6),
        borderRadius: BorderRadius.all(const Radius.circular(50.0)),
        border: Border.all(color: const Color(0xFF28324E)),
    ),
    child: new Image.file(_image)
),

the CircleAvatar class:

new CircleAvatar(
  backgroundColor: Colors.brown.shade800,
  child: new Image.file(_image),
),

or more specifically your code is missing a ( after BoxDecoration and has to many ).

So with the BoxShape class:

new Container(
  height: 80.0,
  width: 80.0,
  decoration: new BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: const Color(0x33A6A6A6)),
    // image: new Image.asset(_image.)
  ),
  child: new Image.file(_image),
),

Answer 2

here you can do like this to set placeholder image and picked image from camera/gallery

GestureDetector(
  onTap: () => onProfileClick(context), // choose image on click of profile
  child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
            image: profilePhoto == null  //profilePhoto which is File object
                ? AssetImage(
                "assets/images/profile_placeholder.png")
                : FileImage(profilePhoto), // picked file
            fit: BoxFit.fill)),
  ),
),