How to create a Card with both an inner shadow and a gradient fill

Question

I'm trying to create a ListView similar to this image (the one on the left):

A cool menu UI --notice that there is a gradient from right to left on each row of the list, and also, shadows on each row's top cast from the rows above

But for the love of evil I cannot make flutter draw both a gradient and an inner shadow(from top) for a Card widget!

In my Scaffold, I created a ListView, with a bunch of InkWells for children. Each of these InkWells contain a Card which has a Container as its child. These Containers contain A Row consisting A bunch of text and stuff.

I have tried lot's of tricks to have both a color gradient (From centerLeft to centerRight) for the cards color (BG color) and BoxShadow (which unfortunately doesn't have the option to be drawn only for Top of the widget). But so far nothing was close to the effect I desire.

body: new ListView(
            children: <Widget>[
          new InkWell(
            onTap: () => showContent("Shadows in Flutter? :/"),
            child: new Card(
              elevation: 9.0,
              margin: EdgeInsets.all(0),
              child: new Container(
                  height: 104.0,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Container(

                        padding: EdgeInsets.only(left: 2.0, right: 5.0),
                        child: new Text("John Smith",
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                                color: Color.fromARGB(255, 224, 117, 86),),
                      ),
                    ],
                  ),
                  decoration: new BoxDecoration(
                    boxShadow: [
                      new BoxShadow(
                          color: Colors.black,
                          blurRadius: 5.0,
                          offset: Offset(0, 10.0)
                      ),
                    ],
                    gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        const Color.fromARGB(255, 254, 225, 111),
                        const Color.fromARGB(255, 232, 206, 96)
                      ],

                      tileMode: TileMode.clamp,
                    ),
                  )),
            ),
          ),

     ----- put a couple of Inkwell's similar to above

Shadows are not drawn properly, I cannot make flutter to draw a single drop shadow from the upper element on the Listview

So, is there any way to achieve what I want?

Ahmed Ahmed · Accepted Answer · 2019-08-15T02:58:47

use foregroundDecoration add LinearGradient it's not an answer but does the trick for shadow

oregroundDecoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment(-1, -1),
          end: Alignment(-1, -0.8),
          colors: [Colors.black26, Colors.transparent],
        ),
      )

How to create a Card with both an inner shadow and a gradient fill

1 Answers