Shadow Effect only to the left of a card In flutter?-CodePudding

So here is the output image which I wanted to achieve.

and this is the result that I have achieved.

So you can see the shadow effect is in the left and slowly fading towards right. here is my code for this

Container(
     width: MediaQuery.of(context).size.width * 0.45,
     height: MediaQuery.of(context).size.height * 0.15,
     decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20)
                              ),
     child: Card(
                 elevation: 5,
                ),
          ),

So elevation provides me with shadow but only towards bottom but I want it to be on the left to right fading... any way to achieve this?

Thanks.

CodePudding user response：

Try the following code:

    Container(
      width: MediaQuery.of(context).size.width * 0.45,
      height: MediaQuery.of(context).size.height * 0.15,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: const Offset(-7.5, 7.5),
          ),
        ],
      ),
      child: Card(),
    ),

CodePudding user response：

Container(
  margin: EdgeInsets.all(3),
  padding: EdgeInsets.zero,
  width: MediaQuery.of(context).size.width * 0.5,
  height: MediaQuery.of(context).size.height * 0.15,
  decoration: BoxDecoration(
    color: Colors.blueAccent,
    boxShadow: [
      BoxShadow(blurRadius: 8.0),
      BoxShadow(color: Colors.white, offset: Offset(0, -16)),
      BoxShadow(color: Colors.white, offset: Offset(0, 16)),
      BoxShadow(color: Colors.white, offset: Offset(-16, -16)),
      BoxShadow(color: Colors.white, offset: Offset(-16, 16)),
    ],
  ),
  child: Card(color: Colors.white,elevation: 0),

),

You can customize it according to your own code

CodePudding user response：

You can Simply Do This In Card Using RoundedRectangleBorder

     Card(
                   elevation:12.0,
                  color: Colors.grey[900],
                  shape: RoundedRectangleBorder(
                    side: BorderSide(color: Colors.white70, width: 1),
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0),
                    bottomLeft: Radius.circular(8.0),
                    ),
                  ),
                  margin: EdgeInsets.all(20.0),
                  child: Container(
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(
                            'example',
                            style: TextStyle(fontSize: 18, color: Colors.white),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

CodePudding user response：

You can set the shadow of the container box with this one.

Container(
      margin: EdgeInsets.all(3),
      padding: EdgeInsets.zero,
      width: MediaQuery.of(context).size.width * 0.45,
      height: MediaQuery.of(context).size.height * 0.15,
      decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              spreadRadius: 5,
              blurRadius: 6,
              offset: const Offset(-6.0, 6.00),
            ),
          ],
          borderRadius: BorderRadius.circular(20),
          color: Colors.white
      ),
      child: Card(color: Colors.white,elevation: 0),
    ),