Adding Shadows At The Bottom Of A Container In Flutter?

Answer :

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

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

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: ... );