Don't miss doing any good thing no matter how insignificant it looks , Don't do any bad thing no matter how insignificant it looks .—— Liu Bei

      

shadow (BoxShadow)+Y Axis offset (Offset)

 
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.green,), boxShadow: [ BoxShadow( color:
Colors.green, offset: Offset(0.0, 6.0), // shadow y Axis offset blurRadius: 0, // Shadow blur
spreadRadius: 0 // Shadow diffusion ) ], ), child:
Text("BoxShadow( Draw shadows )+Container+BoxDecoration"), )); } }
  shadow (BoxShadow)+X Axis offset (Offset)

     

 
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.black,), boxShadow: [ BoxShadow( color:
Colors.black, offset: Offset(6.0, 0.0), // shadow x Axis offset blurRadius: 0, // Shadow blur
spreadRadius: 0 // Shadow diffusion ) ], ), child:
Text("BoxShadow( Draw shadows )+Container+BoxDecoration"), )); } }
  shadow (BoxShadow)+XY Axis offset (Offset)

      

class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.green,), boxShadow: [ BoxShadow( color:
Colors.green, offset: Offset(6.0, 6.0), // shadow x Axis offset blurRadius: 0, // Shadow blur
spreadRadius: 0 // Shadow diffusion ) ], ), child:
Text("BoxShadow( Draw shadows )+Container+BoxDecoration"), )); } }
  shadow (BoxShadow)+XY Axis offset (Offset) + vague (blurRadius)

     

 
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.black,), boxShadow: [ BoxShadow( color:
Colors.black, offset: Offset(-6.0, 6.0), // shadow x Axis offset blurRadius: 10, // Shadow blur
spreadRadius: 0 // Shadow diffusion ) ], ), child:
Text("BoxShadow( Draw shadows )+Container+BoxDecoration"), )); } }
shadow (BoxShadow)+XY Axis offset (Offset) + vague (blurRadius)+ spread (spreadRadius) 

      
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 1, color: Colors.green,), boxShadow: [ BoxShadow( color:
Colors.green, offset: Offset(-6.0, 6.0), // shadow x Axis offset blurRadius: 10, // Shadow blur
spreadRadius: 10 // Shadow diffusion ) ], ), child:
Text("BoxShadow( Draw shadows )+Container+BoxDecoration"), )); } }
withOpacity Lighten shadows

     
class _MyHomePageState extends State<MyHomePage> { @override Widget
build(BuildContext context) { return Scaffold( appBar: AppBar( title:
Text(widget.title), ), body: Container( padding: EdgeInsets.all(20.0), margin:
EdgeInsets.all(20.0), decoration: new BoxDecoration( color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)), border: new
Border.all(width: 0, color: Colors.red,), boxShadow: [ BoxShadow( color:
Colors.red.withOpacity(0.2), offset: Offset(-6.0, 6.0), // shadow x Axis offset blurRadius:
10, // Shadow blur spreadRadius: 5 // Shadow diffusion ) ], ), child:
Text("BoxShadow( Draw shadows )+Container+BoxDecoration"), )); } }
Understanding through English words :

box- Box

shadow- shadow

blur- vague

spread- Communication and diffusion

We can understand it as : Such a device widget You need to add a shadow effect to the outside of the box , We can set the shadow spread range and shadow blur .

 

Technology
©2020 ioDraw All rights reserved
JavaScript study ( Scope )R Language group summation , Group average , Group count antd table sort 2021 Front end high frequency interview questions ( You have to watch it !!!)Android end Firefox Testing credit card and address auto fill function Sql What is the order of execution of ?vue+element-ui Realize the input limit of price 2021 Front end interview questions and written questions ——Vuejavascript Adding and deleting form information FastAPI to write get,post Interface , adopt json Interface for parameter transfer