DecoratedBox 装饰器

[gaowei1012]

/// 参数
 const BoxDecoration({
    this.color, /// 设置背景颜色
    this.image,  /// 背景图片
    this.border, /// 盒子边框
    this.borderRadius,  /// 盒子圆角
    this.boxShadow, /// 盒子阴影效果
    this.gradient, /// 用于背景色渐变
    this.backgroundBlendMode, /// 背景混合模式
    this.shape = BoxShape.rectangle, /// 形状
  })

BoxDecoration copyWith({
    Color? color,
    DecorationImage? image,
    BoxBorder? border,
    BorderRadiusGeometry? borderRadius,
    List<BoxShadow>? boxShadow,
    Gradient? gradient,
    BlendMode? backgroundBlendMode,
    BoxShape? shape,
  }) {
    return BoxDecoration(
      color: color ?? this.color,
      image: image ?? this.image,
      border: border ?? this.border,
      borderRadius: borderRadius ?? this.borderRadius,
      boxShadow: boxShadow ?? this.boxShadow,
      gradient: gradient ?? this.gradient,
      backgroundBlendMode: backgroundBlendMode ?? this.backgroundBlendMode,
      shape: shape ?? this.shape,
    );
  }

[gaowei1012]

实现一个渐变效果

...
body: Flex(
          /// 水平居中

          mainAxisAlignment: MainAxisAlignment.center,

          /// x轴对其
          direction: Axis.horizontal,
          children: [
            Container(
              margin: EdgeInsets.only(top: 20),
              decoration: BoxDecoration(
                /// 背景渐变
                gradient:
                    LinearGradient(colors: [Colors.red, Colors.orange[700]]),
                borderRadius: BorderRadius.circular(3),

                /// 渐变
                boxShadow: [
                  BoxShadow(
                      color: Colors.black54,
                      offset: Offset(2.0, 2.0),
                      blurRadius: 4.0)
                ],
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 80, vertical: 18),
                child: Text('box decroation'),
              ),
            ),
          ],
        ));

...