How to add bottom elevation to a container in Flutter?

I've already seen [this][1] and [this][2] and [this][3] but they don't answer my question. I need elevation on my `Container` *just* below it, not all around it.

Here's what I have as of now:

[![container with shadow][4]][4]


My goal at the end is to eliminate the shadow at the top of the days of the week.

I use the code from [this][5] answer to achieve that shadow effect on my `Container` but I don't want it all the way around, just on the bottom with the rounded corners and not on the top. Any help would be appreciated.

[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

[4]:

[5]:

[To see links please register here]

If you only want to add a shadow then `BoxDecoration` combined with `BoxShadow` will do the job

...
...
body: Container(
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 2.0,
spreadRadius: 0.0,
offset: Offset(2.0, 2.0), // shadow direction: bottom right
)
],
),
child: Container(width: 100, height: 50) // child widget, replace with your own
),
...
...
[![enter image description here][1]][1]
[1]:

Use `ClipRRect` to remove shadow effects and add bottom `margin` to `Container` to overcome `ClipRRect` at bottom only to show shadow effect.

**Example:**
```
import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: Container(
height: 100.0,
margin: const EdgeInsets.only(bottom: 6.0), //Same as `blurRadius` i guess
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
),
),
),
),
);
}
}
```
**Result:**

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


[1]:

Use `Material` and must use `borderRadius:` same for `Container()` and `Material()`

Material(
elevation: 5,
borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
child: Container(
height: 100,
width: _width / 1.1,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(50))),
),
),

**Result**

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


[1]:

child: Container(
height: Get.height/4,
width: Get.width/1.1,
decoration: BoxDecoration(
color: UIDataColors.white,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: UIDataColors.white),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
spreadRadius: 0.0,
offset: Offset(2.0, 2.0), // shadow direction: bottom right
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),


//color: UIDataColors.white,

)

Use Card as a parent to your widget and use the elevation property of Card.

Unfortunately there is no `elevation` property for `Container`, you need to use other `Widget` such as `Card`, but if you really do want to give `Container` an `elevation` property, you could take a look at [division][1] and watch this [tutorial][2] about using that package.

Division: Simple to use yet powerfull style widgets with syntax inspired by CSS. ##


[1]:

[To see links please register here]

[2]:

* ### Using `Card`

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

```dart
Card(
elevation: 8,
shadowColor: Colors.blue,
child: Container(width: 100, height: 100, color: Colors.white),
)
```

* ### Using `DecoratedBox`

[![enter image description here][2]][2]

```dart
DecoratedBox(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.blue,
blurRadius: 8,
spreadRadius: 4,
offset: Offset(0, 10),
),
],
),
child: Container(width: 100, height: 100, color: Colors.white),
)
```



* ### Using `PhysicalModel`


[![enter image description here][3]][3]


```dart
PhysicalModel(
color: Colors.white,
elevation: 8,
shadowColor: Colors.blue,
borderRadius: BorderRadius.circular(20),
child: Container(width: 100, height: 100),
)
```


[1]:

[2]:

[3]:

return PhysicalModel(
elevation: 20,
child: Container(),
);

Know more about [PhysicalModel][1] in Flutter Docs.


[1]:

[To see links please register here]

If you want to keep using `Container`. You can use the `boxShadow` in the `BoxDecoration` **with the helper global variable `kElevationToShadow`.**

To only show shadow at the bottom, you can use the `ClipRRect` widget.


``` dart
import 'package:flutter/material.dart';

ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
child: Container(
decoration: BoxDecoration(
boxShadow: kElevationToShadow[4],
),
),
);
```