DecoratedBox

DecoratedBox可以在其子widget繪製前(或後)繪製一個裝飾Decoration（如背景、邊框、漸變等）。DecoratedBox定義如下：

const DecoratedBox({
  Decoration decoration,
  DecorationPosition position = DecorationPosition.background,
  Widget child
})

• decoration：代表將要繪製的裝飾，它型別為Decoration，Decoration是一個抽象類，它定義了一個介面 createBoxPainter()，子類的主要職責是需要通過實現它來建立一個畫筆，該畫筆用於繪製裝飾。
• position：此屬性決定在哪裡繪製Decoration，它接收DecorationPosition的列舉型別，該列舉類兩個值：

background：在子widget之後繪製，即背景裝飾。
foreground：在子widget之上繪製，即前景。

BoxDecoration

我們通常會直接使用BoxDecoration，它是一個Decoration的子類，實現了常用的裝飾元素的繪製。

    BoxDecoration({
      Color color, //顏色
      DecorationImage image,//圖片
      BoxBorder border, //邊框
      BorderRadiusGeometry borderRadius, //圓角
      List<BoxShadow> boxShadow, //陰影,可以指定多個
      Gradient gradient, //漸變
      BlendMode backgroundBlendMode, //背景混合模式
      BoxShape shape = BoxShape.rectangle, //形狀
    })

示例：

DecoratedBox(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景漸變
      borderRadius: BorderRadius.circular(3.0), //3畫素圓角
      boxShadow: [ //陰影
        BoxShadow(
            color:Colors.black54,
            offset: Offset(2.0,2.0),
            blurRadius: 4.0
        )
      ]
    ),
  child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text("Login", style: TextStyle(color: Colors.white),),
  )
)

image-20180910115903588.png