Flutter 自定义实现，渐变色圆角按钮

效果图如下：

image.png

直接上代码

class GradientButton extends StatelessWidget {
  GradientButton({
    this.colors,
    this.width,
    this.height,
    this.onPressed,
    this.borderRadius,
    @required this.child,
  });

  // 渐变色数组
  final List colors;

  // 按钮宽高
  final double width;
  final double height;

  final Widget child;
  final BorderRadius borderRadius;

  //点击回调
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);

    //确保colors数组不空
    List _colors = colors ??
        [theme.primaryColor, theme.primaryColorDark ?? theme.primaryColor];

    return DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: _colors),
        borderRadius: borderRadius,
       // 阴影的设置
        boxShadow: [BoxShadow(color: Colors.grey[300], offset: Offset(3.0, 3.0), blurRadius: 3.0, spreadRadius: 2.0),]

      ),
      child: Material(

        type: MaterialType.transparency,
        child: InkWell(
          splashColor: _colors.last,
          highlightColor: Colors.transparent,
          borderRadius: borderRadius,
          onTap: onPressed,
          child: ConstrainedBox(
            constraints: BoxConstraints.tightFor(height: height, width: width),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: DefaultTextStyle(
                  style: TextStyle(fontWeight: FontWeight.bold),
                  child: child,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

调用方式：

GradientButton(
              child: Text('渐变色按钮'),
              height: 50,
              width: 200,
              colors: [Colors.lightBlue,Colors.blueGrey],
              onPressed: (){},
              borderRadius: BorderRadius.all(Radius.circular(30)),
            ),