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.

Answer 1

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

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

Answer 2

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: