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?

Wrap it with https://docs.flutter.io/flutter/material/Material-class.html — Günter Zöchbauer, Feb 18 '19 at 08:17
I tried but what it makes square elevation, my image is circle — Privacy of Animal, Feb 18 '19 at 08:19

score 39 · Answer 1 · edited Mar 14 '22 at 05:46

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: const CircleBorder(),
    clipBehavior: Clip.antiAlias,
  ),
),
Center(
  child: Card( // with Card
    child: Image.network('https://placeimg.com/640/480/any'),
    elevation: 18.0,
    shape: const 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: const CircleBorder(),
    clipBehavior: Clip.antiAlias,
  ),
),

@PrivacyofAnimal looks like you are using `padding` widget in between. My solutions works as standalone you can run them. - with-out seeing your code its hard to debug. — anmol.majhail, Feb 18 '19 at 08:36

How to give elevation to an image in Flutter?

1 Answers1