How to give elevation to an image in Flutter?

Question

I have to implement elevation (like a shadow) on an image widget, but I couldn't find a solution to this. Is there a way to implement elevation to an image?

An image example of what I want to remove:

I used the Material widget, but it renders empty space!! The original image has no spaces, how can I remove them?

Answer 1

You can simply use the Material or the Card widget:

Center(
  child: Material( // with Material
    child: Image.network('https://placeimg.com/640/480/any'),
    elevation: 18.0,
    shape: CircleBorder(),
    clipBehavior: Clip.antiAlias,

  ),
),
Center(
  child: Card( // with Card
    child: Image.network('https://placeimg.com/640/480/any'),
    elevation: 18.0,
    shape: CircleBorder(),
    clipBehavior: Clip.antiAlias,

  ),
),

If you want more control on the Radius of the Image. Then you can use CircleAvatar:

Center(
  child: Card(
    child: CircleAvatar(
      maxRadius: 54.0,
      backgroundImage:
          NetworkImage('https://placeimg.com/640/480/any'),
    ),
    elevation: 18.0,
    shape: CircleBorder(),
    clipBehavior: Clip.antiAlias,
  ),
),