add custom boxshadow to Flutter card

Question

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...

score 63 · Accepted Answer · edited Jun 03 '20 at 10:42

63

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,
          ),
        ],
      ),
    );
  }
}

edited Jun 03 '20 at 10:42

Boken

4,825
10
32
42

answered Apr 01 '18 at 16:52

Raouf Rahiche

28,948
10
85
77

1

Thanks, Another thing I want is, Margin around the Heading Text, so that there's gap between subtitle and Heading, Can you help me with it? – Nirav Madariya Apr 01 '18 at 18:05
2

i don't understand what you mean but if you want to add some margins you can easily add this to the Container : `margin: const EdgeInsets.all(10.0)` – Raouf Rahiche Apr 01 '18 at 18:08
I'm using this. – Ajay Kumar Feb 06 '20 at 07:50

score 19 · Answer 2 · edited Jun 03 '20 at 10:42

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
        ),
      )
    ],
  ),
),

score 17 · Answer 3 · answered Oct 14 '19 at 19:06

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,
                      ),
                    )
                  ],
                ),
              ),
            ));
      }

score 14 · Answer 4 · answered Feb 15 '21 at 09:56

14

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.')),
),

answered Feb 15 '21 at 09:56

Nipun Ravisara

3,629
3
20
35

1

The `elevation` and `shadowColor` only work when you want the shadow effect applied without offset and blur effect. `offset` and `blurRadius` can be defined in the `BoxShadow` object, which can't be achieved by tweaking these two parameters. – tanghao Aug 06 '21 at 01:42

score -2 · Answer 5 · edited Sep 17 '22 at 18:23

-2

Use elevation

Card(elevation: 10, child: theWidget),

edited Sep 17 '22 at 18:23

lepsch

8,927
5
24
44

answered Sep 15 '22 at 10:03

J School

17
3

add custom boxshadow to Flutter card

5 Answers5

Linked