Container 绘制漂亮的盒子

[gaowei1012]

body: Container(
        child: GestureDetector(
          onTap: _handleTap,
          child: Container(
            width: 200.0,
            height: 200.0,
            margin: EdgeInsets.all(100),
            padding: EdgeInsets.all(10),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: _active ? Colors.cyan : Colors.yellow,
              gradient: RadialGradient(

                  /// 背景渐变
                  colors: [Colors.red, Colors.yellow],
                  center: Alignment.center,

                  /// center
                  radius: .98),
              boxShadow: [
                /// 背景阴影
                BoxShadow(
                    color: Colors.black45,
                    offset: Offset(2.0, 1.0),
                    blurRadius: 4.0)
              ],
            ),

            /// 卡片倾斜
            transform: Matrix4.rotationZ(.3),

            child: Text(
              _active ? active : inactive,
              style: TextStyle(fontSize: 32, color: Colors.black),
            ),
          ),
        ),
      ),

[gaowei1012]

常用属性

Container({
  this.alignment, // 内容对其方式
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child, // child
})