How can I add shadow to the widget in flutter?

Question

How can I add shadow to the widget like in the picture below?

This is my current widget code.

Image with shadow

Wrap your widget with Material() widget and give elevation: 10.0 — Jerin, May 18 '21 at 07:29

score 593 · Answer 1 · edited Mar 04 '23 at 01:04

593

Check out BoxShadow and BoxDecoration

A Container can take a BoxDecoration (going off of the code you had originally posted) which takes a boxShadow

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

edited Mar 04 '23 at 01:04

My Car

4,198
5
17
50

answered Sep 07 '18 at 18:43

Ashton Thomas

16,659
5
31
25

1

Great answer - tnx! How would you have the ripple effect over the button? currently it's rippling under the button. – nitzanwe May 25 '20 at 09:40
5

It's better to use `borderRadius: BorderRadius.circular(10.0)` if every border is same. – Vinoth Vino Jun 13 '20 at 10:25
1

@nitzanwe you can wrap a widget in `InkWell` widget to get ripple effect on tapping. – Slick Slime Nov 22 '20 at 12:33
The link you mentioned is not working. Changing the domain from flutter.io to flutter.dev works – Hemil Jan 12 '22 at 02:12

CopsOnRoad · Answer 2 · 2022-01-10T20:23:40.230

Screenshot:

Using `BoxShadow` (more customizations):

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.red,
        blurRadius: 4,
        offset: Offset(4, 8), // Shadow position
      ),
    ],
  ),
)

Using `PhysicalModel`:

PhysicalModel(
  color: Colors.teal,
  elevation: 8,
  shadowColor: Colors.red,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox.square(dimension: 100),
)

Using `Card`:

Card(
  elevation: 8,
  shadowColor: Colors.red,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.teal,
  ),
)

Using `Material`:

Material(
  elevation: 8,
  color: Colors.teal,
  shadowColor: Colors.red,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox.square(dimension: 100),
)

Suragch · Answer 3 · 2020-09-26T06:27:23.237

Use BoxDecoration with BoxShadow.

Here is a visual demo manipulating the following options:

opacity
x offset
y offset
blur radius
spread radius

The animated gif doesn't do so well with colors. You can try it yourself on a device.

Here is the full code for that demo:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ShadowDemo(),
      ),
    );
  }
}

class ShadowDemo extends StatefulWidget {
  @override
  _ShadowDemoState createState() => _ShadowDemoState();
}

class _ShadowDemoState extends State<ShadowDemo> {
  var _image = NetworkImage('https://placebear.com/300/300');

  var _opacity = 1.0;
  var _xOffset = 0.0;
  var _yOffset = 0.0;
  var _blurRadius = 0.0;
  var _spreadRadius = 0.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child:
          Container(
            decoration: BoxDecoration(
              color: Color(0xFF0099EE),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, _opacity),
                  offset: Offset(_xOffset, _yOffset),
                  blurRadius: _blurRadius,
                  spreadRadius: _spreadRadius,
                )
              ],
            ),
            child: Image(image:_image, width: 100, height: 100,),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 80.0),
            child: Column(
              children: <Widget>[
                Spacer(),
                Slider(
                  value: _opacity,
                  min: 0.0,
                  max: 1.0,
                  onChanged: (newValue) =>
                  {
                    setState(() => _opacity = newValue)
                  },
                ),
                Slider(
                  value: _xOffset,
                  min: -100,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _xOffset = newValue)
                  },
                ),
                Slider(
                  value: _yOffset,
                  min: -100,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _yOffset = newValue)
                  },
                ),
                Slider(
                  value: _blurRadius,
                  min: 0,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _blurRadius = newValue)
                  },
                ),
                Slider(
                  value: _spreadRadius,
                  min: 0,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _spreadRadius = newValue)
                  },
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

score 17 · Answer 4 · edited Feb 08 '21 at 12:58

17

A Container can take a BoxDecoration (going off of the code you had originally posted) which takes a boxShadow:

decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
        BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
        ),
    ],
),

edited Feb 08 '21 at 12:58

myeongkil kim

2,465
4
16
22

answered Feb 08 '21 at 12:12

MD MEHEDI HASAN

2,044
2
19
34

It seems like I already mentioned these attributes in [my post](https://stackoverflow.com/a/58510302/6618622). – CopsOnRoad Jan 19 '22 at 23:05

score 12 · Answer 5 · answered Jan 29 '21 at 10:30

PhysicalModel will help you to give it elevation shadow.

 Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 60,
            ),
            Container(
              child: PhysicalModel(
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
                elevation: 18,
                shadowColor: Colors.red,
                child: Container(
                  height: 100,
                  width: 100,
                ),
              ),
            ),
            SizedBox(
              height: 60,
            ),
            Container(
              child: PhysicalShape(
                color: Colors.blue,
                shadowColor: Colors.red,
                elevation: 18,
                clipper: ShapeBorderClipper(shape: CircleBorder()),
                child: Container(
                  height: 150,
                  width: 150,
                ),
              ),
            )
          ],
        ),
      )

score 11 · Answer 6 · edited Aug 24 '20 at 04:38

Use Material with shadowColor inside Container like this:

Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10)),
      boxShadow: [
        BoxShadow(
            color: Color(0xffA22447).withOpacity(.05),
            offset: Offset(0, 0),
            blurRadius: 20,
            spreadRadius: 3)
      ]),
  child: Material(
    borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)),
    elevation: 5,
    shadowColor: Color(0xffA22447).withOpacity(.05),
    color: Color(0xFFF7F7F7),
    child: SizedBox(
      height: MediaQuery.of(context).size.height / 3,
    ),
  ),
)

score 8 · Answer 7 · answered Apr 13 '20 at 17:20

this is how I did it

    Container(
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey[200],
        blurRadius: 2.0, // has the effect of softening the shadow
        spreadRadius: 2.0, // has the effect of extending the shadow
        offset: Offset(
          5.0, // horizontal, move right 10
          5.0, // vertical, move down 10
        ),
      )
    ],
  ),
  child: Container( 
       color: Colors.white, //in your example it's blue, pink etc..
       child: //your content
  )

score 5 · Answer 8 · answered Nov 26 '19 at 20:46

The given answers do the trick for outer shadow i.e. around the widget. I wanted a shadow on the widget which is inside the boundaries and according to the github issue there is no inset attribute in ShadowBox yet. My workaround was to add a layer of widget with a gradient using the stack widget so that it looks like the widget itself has the shadows. You must use the mediaQuery for dimensions otherwise the layout will be messed up on different devices. Here's a sample of code for better understanding:

Stack(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/sampleFaces/makeup.jpeg"),
                    // fit: BoxFit.cover,
                  ),
                ),
                height: 350.0,
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: FractionalOffset.topCenter,
                    end: FractionalOffset.bottomCenter,
                    colors: [
                      Colors.black.withOpacity(0.0),
                      Colors.black54,
                    ],
                    stops: [0.95, 5.0],
                  ),
                ),
              )
            ],
          ),

E. Sun · Answer 9 · 2021-02-25T14:59:02.370

5

Before you start reinventing the wheel with one of these answers, check out the Material Card widget. It also allows you to define a global style via the app theme directly:

example

edited Feb 25 '21 at 14:59

answered Feb 16 '21 at 02:52

E. Sun

1,093
9
15

score 4 · Answer 10 · answered Nov 10 '20 at 04:16

class ShadowContainer extends StatelessWidget {
  ShadowContainer({
    Key key,
    this.margin = const EdgeInsets.fromLTRB(0, 10, 0, 8),
    this.padding = const EdgeInsets.symmetric(horizontal: 8),
    this.circular = 4,
    this.shadowColor = const Color.fromARGB(
        128, 158, 158, 158), //Colors.grey.withOpacity(0.5),
    this.backgroundColor = Colors.white,
    this.spreadRadius = 1,
    this.blurRadius = 3,
    this.offset = const Offset(0, 1),
    @required this.child,
  }) : super(key: key);

  final Widget child;
  final EdgeInsetsGeometry margin;
  final EdgeInsetsGeometry padding;
  final double circular;
  final Color shadowColor;
  final double spreadRadius;
  final double blurRadius;
  final Offset offset;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin,
      padding: padding,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(circular),
        boxShadow: [
          BoxShadow(
            color: shadowColor,
            spreadRadius: spreadRadius,
            blurRadius: blurRadius,
            offset: offset,
          ),
        ],
      ),
      child: child,
    );
  }
}

score 4 · Answer 11 · answered Feb 06 '21 at 05:49

Maybe it is sufficient if you wrap a Card around the Widget and play a bit with the elevation prop.

I use this trick to make my ListTile look nicer in Lists.

For your code it could look like this:

return Card(
   elevation: 3, // PLAY WITH THIS VALUE 
   child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
         // ... MORE OF YOUR CODE 
      ],
   ),
);

score 2 · Answer 12 · answered May 16 '23 at 05:30

To add shadow to an any widget in flutter, You can just wrap that widget with Container and set following properties:

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: YourWidget(), // Replace YourWidget with your desired widget
);

Happy Fluttering!

score 0 · Answer 13 · answered Jul 15 '23 at 09:36

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color:  Colors.purple.withOpacity(0.3),
        blurRadius: 4,
        offset: Offset(6, 5), // Shadow position
      ),
    ],
  ),
),

score 0 · Answer 14 · edited Aug 02 '23 at 15:04

try this

Container(
                        width: double.infinity,
                        decoration: BoxDecoration(
                          gradient: RadialGradient(
                            center: AlignmentDirectional.topEnd,
                            focalRadius: 5,
                            focal: AlignmentDirectional.topEnd,
                            colors: [
                              Themes.primaryColorDark.withOpacity(0.5),
                              Themes.primaryColorDark.withOpacity(0.2),
                            ],
                            stops: [0.9, 0.0],
                          ),
                          borderRadius: BorderRadius.circular(25.0),
                        ),

score -2 · Answer 15 · answered Jan 26 '22 at 13:29

-2

Wrap your widget into container and give box shadow list to it

answered Jan 26 '22 at 13:29

jay

15
3

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30913201) – tomerpacific Feb 01 '22 at 14:12
1

Correct, but too vague. Add the code, so that people can basically just copy it into their own code and it'll work! From there, they can personalize it as they want. See below upvoted answer for an excellent example. – Karolina Hagegård Feb 07 '22 at 18:33

How can I add shadow to the widget in flutter?

15 Answers15

Screenshot:

Using `BoxShadow` (more customizations):

Using `PhysicalModel`:

Using `Card`:

Using `Material`:

Linked

How can I add shadow to the widget in flutter?

15 Answers15

Screenshot:

Using BoxShadow (more customizations):

Using PhysicalModel:

Using Card:

Using Material:

Linked

Using `BoxShadow` (more customizations):

Using `PhysicalModel`:

Using `Card`:

Using `Material`: