How can I add shadow to the widget in flutter

Question

How can I add shadow to the widget like in the picture below    This is my current widget code

User · Answer

Before you start reinventing the wheel with one of these answers  check out the Material Card widget  It also allows you to define a global style via the app theme directly

User · Answer

Add box shadow to container in flutter    Container        margin  EdgeInsets only left  30  top  100  right  30  bottom  50         height  double infinity        width  double infinity        decoration  BoxDecoration          color  Colors white          borderRadius  BorderRadius only            topLeft  Radius circular 10               topRight  Radius circular 10               bottomLeft  Radius circular 10               bottomRight  Radius circular 10                     boxShadow              BoxShadow              color  Colors grey withOpacity 0 5               spreadRadius  5              blurRadius  7              offset  Offset 0  3      changes position of shadow                                        Here is my output

User · Answer

Screenshot     Using BoxShadow  more customizations   Container    width  100    height  100    decoration  BoxDecoration      color  Colors teal      borderRadius  BorderRadius circular 20       boxShadow          BoxShadow          color  Colors red          blurRadius  4          offset  Offset 4  8      Shadow position                             Using PhysicalModel  PhysicalModel    color  Colors teal    elevation  8    shadowColor  Colors red    borderRadius  BorderRadius circular 20     child  SizedBox width  100  height  100

User · Answer

this is how I did it       Container    decoration  new BoxDecoration      boxShadow          BoxShadow          color  Colors grey 200           blurRadius  2 0     has the effect of softening the shadow         spreadRadius  2 0     has the effect of extending the shadow         offset  Offset            5 0     horizontal  move right 10           5 0     vertical  move down 10                                  child  Container          color  Colors white    in your example it s blue  pink etc          child    your content

User · Answer

Use Material with shadowColor inside Container like this  Container    decoration  BoxDecoration        borderRadius  BorderRadius only            bottomLeft  Radius circular 10             bottomRight  Radius circular 10          boxShadow            BoxShadow              color  Color 0xffA22447  withOpacity  05               offset  Offset 0  0               blurRadius  20              spreadRadius  3              child  Material      borderRadius  BorderRadius only          bottomLeft  Radius circular 10           bottomRight  Radius circular 10        elevation  5      shadowColor  Color 0xffA22447  withOpacity  05       color  Color 0xFFF7F7F7       child  SizedBox        height  MediaQuery of context  size height   3

User · Answer

The given answers do the trick for outer shadow i e  around the widget  I wanted a shadow on the widget which is inside the boundaries and according to the github issue there is no inset attribute in ShadowBox yet  My workaround was to add a layer of widget with a gradient using the stack widget so that it looks like the widget itself has the shadows  You must use the mediaQuery for dimensions otherwise the layout will be messed up on different devices  Here s a sample of code for better understanding   Stack              children   lt Widget gt                 Container                  decoration  BoxDecoration                    image  DecorationImage                      fit  BoxFit cover                      image  AssetImage  assets sampleFaces makeup jpeg                           fit  BoxFit cover                                                          height  350 0                                 Container                  decoration  BoxDecoration                    gradient  LinearGradient                      begin  FractionalOffset topCenter                      end  FractionalOffset bottomCenter                      colors                          Colors black withOpacity 0 0                         Colors black54                                             stops   0 95  5 0

User · Answer

Use BoxDecoration with BoxShadow  Here is a visual demo manipulating the following options   opacity x offset y offset blur radius spread radius  The animated gif doesn t do so well with colors  You can try it yourself on a device   Here is the full code for that demo  import  package flutter material dart    void main     gt  runApp MyApp      class MyApp extends StatelessWidget      override   Widget build BuildContext context        return MaterialApp        home  Scaffold          body  ShadowDemo                           class ShadowDemo extends StatefulWidget      override    ShadowDemoState createState     gt   ShadowDemoState       class  ShadowDemoState extends State lt ShadowDemo gt      var  image   NetworkImage  https   placebear com 300 300       var  opacity   1 0    var  xOffset   0 0    var  yOffset   0 0    var  blurRadius   0 0    var  spreadRadius   0 0      override   Widget build BuildContext context        return Stack        children   lt Widget gt           Center            child            Container              decoration  BoxDecoration                color  Color 0xFF0099EE                 boxShadow                    BoxShadow                    color  Color fromRGBO 0  0  0   opacity                     offset  Offset  xOffset   yOffset                     blurRadius   blurRadius                    spreadRadius   spreadRadius                                                                child  Image image  image  width  100  height  100                                    Align            alignment  Alignment bottomCenter            child  Padding              padding  const EdgeInsets only bottom  80 0               child  Column                children   lt Widget gt                   Spacer                    Slider                    value   opacity                    min  0 0                    max  1 0                    onChanged   newValue    gt                                          setState      gt   opacity   newValue                                                          Slider                    value   xOffset                    min  -100                    max  100                    onChanged   newValue    gt                                          setState      gt   xOffset   newValue                                                          Slider                    value   yOffset                    min  -100                    max  100                    onChanged   newValue    gt                                          setState      gt   yOffset   newValue                                                          Slider                    value   blurRadius                    min  0                    max  100                    onChanged   newValue    gt                                          setState      gt   blurRadius   newValue                                                          Slider                    value   spreadRadius                    min  0                    max  100                    onChanged   newValue    gt                                          setState      gt   spreadRadius   newValue

User · Answer

PhysicalModel will help you to give it elevation shadow   Container          alignment  Alignment center          child  Column            children   lt Widget gt               SizedBox                height  60                             Container                child  PhysicalModel                  borderRadius  BorderRadius circular 20                   color  Colors blue                  elevation  18                  shadowColor  Colors red                  child  Container                    height  100                    width  100                                                                 SizedBox                height  60                             Container                child  PhysicalShape                  color  Colors blue                  shadowColor  Colors red                  elevation  18                  clipper  ShapeBorderClipper shape  CircleBorder                     child  Container                    height  150                    width  150

User · Answer

A Container can take a BoxDecoration  going off of the code you had originally posted  which takes a boxShadow  decoration  BoxDecoration      borderRadius  BorderRadius circular 10       boxShadow            BoxShadow              color  Colors grey withOpacity 0 5               spreadRadius  5              blurRadius  7              offset  Offset 0  3      changes position of shadow

User · Answer

Check out BoxShadow and BoxDecoration  A Container can take a BoxDecoration  going off of the code you had originally posted  which takes a boxShadow return Container    margin  EdgeInsets only left  30  top  100  right  30  bottom  50     height  double infinity    width  double infinity    decoration  BoxDecoration      color  Colors white      borderRadius  BorderRadius only        topLeft  Radius circular 10           topRight  Radius circular 10           bottomLeft  Radius circular 10           bottomRight  Radius circular 10             boxShadow          BoxShadow          color  Colors grey withOpacity 0 5           spreadRadius  5          blurRadius  7          offset  Offset 0  3      changes position of shadow                         Screenshot

User · Answer

class ShadowContainer extends StatelessWidget     ShadowContainer       Key key      this margin   const EdgeInsets fromLTRB 0  10  0  8       this padding   const EdgeInsets symmetric horizontal  8       this circular   4      this shadowColor   const Color fromARGB          128  158  158  158     Colors grey withOpacity 0 5       this backgroundColor   Colors white      this spreadRadius   1      this blurRadius   3      this offset   const Offset 0  1        required this child         super key  key      final Widget child    final EdgeInsetsGeometry margin    final EdgeInsetsGeometry padding    final double circular    final Color shadowColor    final double spreadRadius    final double blurRadius    final Offset offset    final Color backgroundColor      override   Widget build BuildContext context        return Container        margin  margin        padding  padding        decoration  BoxDecoration          color  backgroundColor          borderRadius  BorderRadius circular circular           boxShadow              BoxShadow              color  shadowColor              spreadRadius  spreadRadius              blurRadius  blurRadius              offset  offset                                         child  child

User · Answer

Maybe it is sufficient if you wrap a Card around the Widget and play a bit with the elevation prop  I use this trick to make my ListTile look nicer in Lists  For your code it could look like this  return Card     elevation  3     PLAY WITH THIS VALUE     child  Row        crossAxisAlignment  CrossAxisAlignment center        children   lt Widget gt                   MORE OF YOUR CODE

[dart] How can I add shadow to the widget in flutter?

Examples related to dart

Examples related to flutter