Adding Shadows at the bottom of a container in flutter?

Question

I have a simple screen with a container about 100 in height and with blue color. I want to add a shadow or elevation at the bottom of the container.

This is my code below

import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';


void main() {
  runApp(new IncomeFragment());
}

class IncomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
        children: <Widget>[
          new Container(
            height: margin_100dp,
            color: colorPrimary,

          ),
          new Container(    //container to  overlay on top of blue container
            alignment: Alignment.topCenter,


            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                Text(
                    zero_amount,
                    style: TextStyle(color: white, fontSize: 40.0, fontWeight: FontWeight.bold)
                ),
              ],
            ),
          )
        ],
    );
  }
}

can someone help me to add a shadow or elevation at the bottom of my blue container?

see image below. shawdow should be in place in the red circle

thanks in advance

Solution 1

You can reuse the first container that you have in your Stack, the container has a property called decoration and it accept a widget of kind BoxDecoration, as you can see in this link: BoxDecoration Inside this widget you can use the boxShadow property to give to your container a custom shadow, try the next code:

new Container(
      height: margin_100dp,
      decoration: BoxDecoration(
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Colors.black54,
                blurRadius: 15.0,
                offset: Offset(0.0, 0.75)
            )
          ],
        color: colorPrimary
      ),
    ),

Solution 2

Or you can wrap your Container widget with a Material widget which contains an elevation property to give the shadowy effects.

Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Material(
                elevation: 15.0,
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.blue,
                  child: Center(child: Text("Material",style: TextStyle(color: Colors.white),)),
                ),
              ),
              SizedBox(width: 100,),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                          color: Colors.black54,
                          blurRadius: 15.0,
                          offset: Offset(0.0, 0.75)
                      )
                    ],
                    color: Colors.blue
                ),
                child: Center(child: Text('Box Shadow',style: TextStyle(color: Colors.white))),
              ),
            ],
          ),
        ),

Image:

Difference between two widgets is shown above. Hope this helps!!!

Solution 3

Yes, BoxShadow can solve the problem but instead of manually adding the list of BoxShadow, there is a handy map in flutter call kElevationToShadow which map elevation keys to pre-defined list of BoxShadow. It is also defined based on the material design elevation.

Container(
  height: 60.0,
  decoration: BoxDecoration(
    boxShadow: kElevationToShadow[4],
    color: Theme.of(context).bottomAppBarColor,
  ),
  child: ...
);

Solution 4

use the Container Shadow as below:

decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(20.0, 10.0),
        blurRadius: 20.0,
        spreadRadius: 40.0,
      ),
    ], 
  ),

Controll the blurRadius and the SpreadRadius depending on your needs

Solution 5

if you want a container to have shadow only top

 boxShadow: [
      BoxShadow(
        color: Color.fromARGB(255, 218, 218, 218),
        blurRadius: 10.0, // soften the shadow
        spreadRadius: 0.0, //extend the shadow
        offset: Offset(
          0.0, // Move to right 10  horizontally
          -15.0, // Move to bottom 10 Vertically
        ),
      )
    ],

View more solutions

Comments

[Vithani Ravi]

also you use card widget

[Kamlesh]

It gives me very weird output. Thanks.