How to add bottom elevation to a container in Flutter?

Question

I've already seen this and this and this 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:

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

score 145 · Answer 1 · edited Dec 23 '22 at 21:17

145

In my option the best way is to add Material() over the widget you are currently using.

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

edited Dec 23 '22 at 21:17

BeniaminoBaggins

11,202
41
152
287

answered May 11 '20 at 21:05

Aashar Wahla

2,785
1
13
19

1

It's great but it won't work correctly if you also want to change Container shape. If so, use solution from the accepted answer. – Michał Powłoka Nov 25 '20 at 14:43
5

You can also add the same custom shape to Material – Julio Henrique Bitencourt Dec 10 '20 at 17:34
This does not work if implemented in Carousel. – Bcktr Jun 30 '21 at 04:23
2

This is actually not a correct solution, it is not adding shadow only to bottom of Container as questioned, but to all sides. – xbalaj Aug 17 '21 at 16:31

score 85 · Accepted Answer · answered Jan 16 '20 at 03:26

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:

As of October 2022, Material widget implements a shape property that enables you to define the shape of the widget according to your child. This way, you don't need that much parkour to make it work. — Emilio Dalla Torre, Oct 18 '22 at 13:40

Hian · Answer 3 · 2020-01-16T03:08:38.573

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

score 38 · Answer 4 · answered May 30 '21 at 14:50

Using `Card`

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

Using `DecoratedBox`

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`

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

score 15 · Answer 5 · answered Dec 09 '20 at 11:36

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

score 6 · Answer 6 · answered Dec 29 '21 at 12:15

6

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

Know more about PhysicalModel in Flutter Docs.

answered Dec 29 '21 at 12:15

Ahmad Khan

757
9
22

Its also a good solution instead of shadows +1 – Balaji Aug 23 '22 at 11:28

score 5 · Answer 7 · answered Feb 25 '22 at 20:45

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.

import 'package:flutter/material.dart';

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

score 3 · Answer 8 · edited May 30 '21 at 14:34

3

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 and watch this tutorial about using that package.

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

edited May 30 '21 at 14:34

CopsOnRoad

237,138
77
654
440

answered Jan 16 '20 at 02:00

Federick Jonathan

2,726
2
13
26

you can use a container with a BoxDecoration to make an elevation shadow tho – 1housand Nov 06 '21 at 17:39

score 1 · Answer 9 · edited Feb 02 '21 at 14:47

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,

            )

score -1 · Answer 10 · answered Apr 21 '21 at 19:21

-1

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

answered Apr 21 '21 at 19:21

Junaid Hassan Final

307
1
2
11

How to add bottom elevation to a container in Flutter?

10 Answers10

Using Card

Using DecoratedBox

Using PhysicalModel

Using `Card`

Using `DecoratedBox`

Using `PhysicalModel`