这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

decoration：背景装饰

decoration可以设置边框、背景色、背景图片、圆角等属性，非常实用。对于transform这个属性，一般有过其他平台开发经验的，都大致了解，这种变换，一般不是变换的实际位置，而是变换的绘制效果，也就是说它的点击以及尺寸、间距等都是按照未变换前的。
但需要注意的是 deoration和 color：背景颜色 不能共存，二者同时只能有一个

Decoration共有以下几种：

BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
ShapeDecoration: 颜色，阴影，图片
FlutterLogoDecoration: Logo图片
UnderlineTabindicator:下划线

BoxDecoration

const BoxDecoration({
	this.color,//背景色
	this.image,//图片
	this.border,//边框
	this.borderRadius,//圆角的大小
	this.boxShadow,//阴影
	this.gradient,//渐变色
	this.backgroundBlendMode,//图像的混合模式
	this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
})
复制代码

boxShadow 阴影

color – 阴影颜色
offset – 阴影相偏移量
blurRadius – 高斯模糊数值
gradient – 渐变，支持2种渐变：LinearGradient线性渐变和 RadialGradient扫描渐变

LinearGradient

begin – 渐变开始的位置
end – 渐变结束的位置
colors – 渐变颜色,数组
stops – 值列表，范围[0,1]
tileMode – 平铺模式
shape形状

example:

new Container(
  constraints: new BoxConstraints.expand(
    height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
    image: new DecorationImage(
      image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  padding: const EdgeInsets.all(8.0),
  alignment: Alignment.center,
  child: new Text('Hello World',
    style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
  transform: new Matrix4.rotationZ(0.3),
)

 
复制代码

tips：
color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
foregroundDecoration：绘制在child前面的装饰。