颤振-如何制作具有渐变背景的凸起按钮？

问题描述

是否可以将凸起的按钮背景颜色更改为渐变？如果没有，我该如何实现？

Is there a way to change the raised button background color to a gradient? if not, how can I achieve something like this?

推荐答案

您可以自己创建一个自定义的人

You can create a custom one yourself

class RaisedGradientButton extends StatelessWidget {
  final Widget child;
  final Gradient gradient;
  final double width;
  final double height;
  final Function onPressed;

  const RaisedGradientButton({
    Key key,
    @required this.child,
    this.gradient,
    this.width = double.infinity,
    this.height = 50.0,
    this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: 50.0,
      decoration: BoxDecoration(gradient: gradient, boxShadow: [
        BoxShadow(
          color: Colors.grey[500],
          offset: Offset(0.0, 1.5),
          blurRadius: 1.5,
        ),
      ]),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
            onTap: onPressed,
            child: Center(
              child: child,
            )),
      ),
    );
  }
}

并在以下任何地方使用它：

And use it anywhere as follows:

RaisedGradientButton(
  child: Text(
    'Button',
    style: TextStyle(color: Colors.white),
  ),
  gradient: LinearGradient(
    colors: <Color>[Colors.green, Colors.black],
  ),
  onPressed: (){
    print('button clicked');
  }
),

您可以通过编辑Container的装饰属性，直到其符合您的规格，进一步处理阴影和圆角边框。

You can further play around with the shadow and rounded borders by editing the Container's decoration property until it matches your spec.

这篇关于颤振-如何制作具有渐变背景的凸起按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！