How can I add shadow to the widget in flutter?

### Screenshot:

[![enter image description here][1]][1]


----------

- #### Using `BoxShadow` (more customizations):

```dart
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`:


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

- #### Using `Card`:

```dart
Card(
elevation: 8,
shadowColor: Colors.red,
child: Container(
width: 100,
height: 100,
color: Colors.teal,
),
)
```
- #### Using `Material`:

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

[1]:

[2]:

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

Check out [BoxShadow](

[To see links please register here]

) and [BoxDecoration ][1]

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

[1]:

[To see links please register here]

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!

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