Flutter BoxShadow(繪製陰影)+Container+BoxDecoration

勿以善小而不為，勿以惡小而為之。——劉備

      

陰影(BoxShadow)+Y軸偏移量(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), //陰影y軸偏移量
                  blurRadius: 0, //陰影模糊程度
                  spreadRadius: 0 //陰影擴散程度
                  )
            ],
          ),
          child: Text("BoxShadow(繪製陰影)+Container+BoxDecoration"),
        ));
  }
}

 陰影(BoxShadow)+X軸偏移量(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), //陰影x軸偏移量
                  blurRadius: 0, //陰影模糊程度
                  spreadRadius: 0 //陰影擴散程度
                  )
            ],
          ),
          child: Text("BoxShadow(繪製陰影)+Container+BoxDecoration"),
        ));
  }
}

 陰影(BoxShadow)+XY軸偏移量(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), //陰影x軸偏移量
                  blurRadius: 0, //陰影模糊程度
                  spreadRadius: 0 //陰影擴散程度
                  )
            ],
          ),
          child: Text("BoxShadow(繪製陰影)+Container+BoxDecoration"),
        ));
  }
}

 陰影(BoxShadow)+XY軸偏移量(Offset) +模糊(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), //陰影x軸偏移量
                  blurRadius: 10, //陰影模糊程度
                  spreadRadius: 0 //陰影擴散程度
                  )
            ],
          ),
          child: Text("BoxShadow(繪製陰影)+Container+BoxDecoration"),
        ));
  }
}

陰影(BoxShadow)+XY軸偏移量(Offset) +模糊(blurRadius)+擴散(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), //陰影x軸偏移量
                  blurRadius: 10, //陰影模糊程度
                  spreadRadius: 10 //陰影擴散程度
                  )
            ],
          ),
          child: Text("BoxShadow(繪製陰影)+Container+BoxDecoration"),
        ));
  }
}

withOpacity淡化陰影

     

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), //陰影x軸偏移量
                  blurRadius: 10, //陰影模糊程度
                  spreadRadius: 5 //陰影擴散程度
                  )
            ],
          ),
          child: Text("BoxShadow(繪製陰影)+Container+BoxDecoration"),
        ));
  }
}

通過英文單詞理解:

box-盒子

shadow-陰影

blur-模糊

spread-傳播擴散

我們可以理解為: 這樣一個裝有widget的盒子的外面需要新增陰影效果,我們可以設定陰影擴散範圍和陰影模糊程度.