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.

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

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

Solution 3

I am using Flutter 1.12.13+hotfix.5

Image.file(_image).image will convert to ImageProvider then it can be used external image in BoxDecoration directly.

File _storedImage;
     :
     :

Widget _localImageFromCamera() {
  return Container(
    height: 80.0,
    width: 80.0,
    decoration: BoxDecoration
         borderRadius: BorderRadius.circular(50),
         border: Border.all(color: const Color(0x33A6A6A6)),
         image: DecorationImage(image: Image.file(_storedImage).image, fit: BoxFit.cover),
    ),
  ));
}

Solution 4

Add new Circle Avatar and it 's have a child add in it your image and you have radius

new CircleAvatar(
  child:new Image.asset("Your Directory"),
  radius: 60.0
)

Solution 5

If you are using a local image from asset then you can use CircleAvatar as,

CircleAvatar(
              backgroundImage: ExactAssetImage('assets/images/cook.jpeg'),
              // Optional as per your use case
              // minRadius: 30,
              // maxRadius: 70,
            ),

If you are using a network image then you can use CircleAvatar as,

CircleAvatar(
         radius: 30.0,
         backgroundImage: NetworkImage(imageURL),
         backgroundColor: Colors.transparent,
         ));

View more solutions

Comments

[Sunil]

I have a File object that contains the path of image. Above solution is not working.

[Sunil]

<br/>new Container(<br/> height: 80.0,<br/> width: 80.0,<br/> decoration: new BoxDecoration(<br/> color: const Color(0xff7c94b6),<br/> image: new DecorationImage(<br/> image: new ExactAssetImage(_image.path),<br/> fit: BoxFit.cover,<br/> ),<br/> border: Border.all(color: const Color(0xFF28324E)),<br/> borderRadius: new BorderRadius.all(const Radius.circular(50.0)),<br/> ), )

[Bostrot]

The code your posted initially was missing a bracket. I edited the post to include the BoxDecoration with the BoxShape class.

[Abdul Rahman Shamair]

And what about, if you want to load the image from Assets folder?

[Abdul Rahman Shamair]

Also any Placeholder while the image is being fetch from the network?