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 476 · Answer 1 · edited Mar 31 '22 at 10:42

476

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 31 '22 at 10:42

Zoe stands with Ukraine

25,310
18
114
149

answered Sep 07 '18 at 18:43

Ashton Thomas

14,643
5
29
25

10

all is better than only – shinriyo May 10 '20 at 05:16
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
3

It's better to use `borderRadius: BorderRadius.circular(10.0)` if every border is same. – Vinoth Vino Jun 13 '20 at 10:25
@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

Suragch · Answer 2 · 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)
                  },
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

CopsOnRoad · Answer 3 · 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),
)

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

13

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,268
4
14
20

answered Feb 08 '21 at 12:12

Mehedi Hasan

1,116
10
24

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 10 · Answer 5 · 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 9 · Answer 6 · 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,
                ),
              ),
            )
          ],
        ),
      )

Paresh Mangukiya · Answer 7 · 2022-02-08T12:16:04.527

Add box shadow to container in flutter

  Container(
      margin: EdgeInsets.only(left: 50, top: 80, right: 50, bottom: 80),
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
            bottomLeft: Radius.circular(12),
            bottomRight: Radius.circular(12)
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.6),
            spreadRadius: 8,
            blurRadius: 6,
            offset: Offset(0, 4),
          ),
        ],
      ),
  )

Here is my output

After your edit on the accepted answer was approved, they are not pretty much identical and this answer doesn't add much value to the thread anymore. — geisterfurz007, Aug 02 '21 at 11:24

score 7 · Answer 8 · 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 4 · Answer 9 · 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],
                  ),
                ),
              )
            ],
          ),

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

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

3

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

743
5
11

score 2 · Answer 12 · 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 -1 · Answer 13 · answered Jan 26 '22 at 13:29

-1

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

answered Jan 26 '22 at 13:29

jay

7
3

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

13 Answers13

Screenshot:

Using `BoxShadow` (more customizations):

Using `PhysicalModel`:

Using `Card`:

Using `Material`:

Linked

How can I add shadow to the widget in flutter?

13 Answers13

Screenshot:

Using BoxShadow (more customizations):

Using PhysicalModel:

Using Card:

Using Material:

Linked

Using `BoxShadow` (more customizations):

Using `PhysicalModel`:

Using `Card`:

Using `Material`: