I've implemented cards in a Flutter app. I need a custom BoxShadow for every card. How can this be done?

What I've tried so far is to add the BoxShadow property to the Card() constructor, which is not working...


Solution 1: Raouf Rahiche

The Card Widget doesn't have decoration property so you need to make a card inside a Container and then apply the BoxShadow to the Container,

Sample :

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Card(
        child: new Center(
          child: new Icon(
            Icons.refresh,
            size: 150.0,
          ),
        ),
      ),
      decoration: new BoxDecoration(
        boxShadow: [
          new BoxShadow(
            color: Colors.black,
            blurRadius: 20.0,
          ),
        ],
      ),
    );
  }
}

enter image description here


Solution 2: Christer

See the Card widget

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Color(0xFFdde0e3),
            body: SingleChildScrollView(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Card(
                      elevation:5,
                      margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 16.0),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      child: Container(
                        height: 200,
                      ),
                    )
                  ],
                ),
              ),
            ));
      }

enter image description here


Solution 3: Malisha De Silva

Simply wrap the card in a container for applying shadow to card widget by obtaining boxShadow property.

new Container(
  width: 100,
  height: 100,
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(.5),
        blurRadius: 20.0, // soften the shadow
        spreadRadius: 0.0, //extend the shadow
        offset: Offset(
          5.0, // Move to right 10  horizontally
          5.0, // Move to bottom 10 Vertically
        ),
      )
    ],
  ),
),


Solution 4: Nipun Ravisara

When talk about shadows mainly the appearance of the shadow can be changed by tweaking blurness and color.

So you can do something like this without writing extra lines of code.

Card(
  elevation: 4,  // Change this 
  shadowColor: Colors.black12,  // Change this 
  child: Center(child: Text('Hey, dude.')),
),


Solution 5: J School

Use elevation

Card(elevation: 10, child: theWidget),