Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display image with top and bottom gradient shadow in flutter?

Tags:

I am working on flutter to display a image with top and bottom gradient overlay. Some portion of image top and bottom should be display with shadow like covered by other color like gray.

Please find the attached image for reference which is drawn by me.

I have used Container with CachedNetworkImage. And tried using BoxDecoration. Which is not giving me the expected result. The effect with the below code only applying shadow below the image. But i would like to display on top of my image as a overlay top and bottom gradient effect.

Please provide me suggestion.

Code reference:

 Container(
  height: 174.0,
  width: 116.0,
    decoration: new BoxDecoration(
    boxShadow: [
    BoxShadow(
    color: Colors.red,
    blurRadius: 20.0, // has the effect of softening the shadow
    spreadRadius: 5.0, // has the effect of extending the shadow
    offset: Offset(
    10.0, // horizontal, move right 10
    10.0, // vertical, move down 10
),
)
],),
child: CachedNetworkImage(...),

Image for representing expectation:

enter image description here