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
Daily Recommendation