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

Question

有没有办法将凸起的按钮背景颜色更改为渐变？如果没有，我如何实现这样的目标？

Answer 1

更新：

由于RaisedButton和OutlineButton已被弃用，您应该使用ElevatedButton和OutlinedButton。

• ElevatedButton

  

  Container(
    height: 44.0,
    decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.pink, Colors.green])),
    child: ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(backgroundColor: Colors.transparent, shadowColor: Colors.transparent),
      child: Text('Elevated Button'),
    ),
  )
  

• OutlinedButton

  

  创建一个类（空安全）：

  class MyOutlinedButton extends StatelessWidget {
    final VoidCallback onPressed;
    final Widget child;
    final ButtonStyle? style;
    final Gradient? gradient;
    final double thickness;
  
    const MyOutlinedButton({
      super.key,
      required this.onPressed,
      required this.child,
      this.style,
      this.gradient,
      this.thickness = 2,
    });
  
    @override
    Widget build(BuildContext context) {
      return DecoratedBox(
        decoration: BoxDecoration(gradient: gradient),
        child: Container(
          color: Colors.white,
          margin: EdgeInsets.all(thickness),
          child: OutlinedButton(
            onPressed: onPressed,
            style: style,
            child: child,
          ),
        ),
      );
    }
  }
  

  用法：

  MyOutlinedButton(
    onPressed: () {},
    gradient: LinearGradient(colors: [Colors.indigo, Colors.pink]),
    child: Text('OutlinedButton'),
  )
  

Answer 2

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

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,
            )),
      ),
    );
  }
}

并在任何地方使用它，如下所示：

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

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

Answer 3

Refer Below -

RaisedButton(
     onPressed: () {},
     textColor: Colors.white,
     padding: const EdgeInsets.all(0.0),
     shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
     child: Container(
       decoration: const BoxDecoration(
         gradient: LinearGradient(
           colors: <Color>[
             Color(0xFF0D47A1),
             Color(0xFF1976D2),
             Color(0xFF42A5F5),
           ],
         ),
         borderRadius: BorderRadius.all(Radius.circular(80.0))
       ),
       padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
       child: const Text(
           'Gradient Button',
           style: TextStyle(fontSize: 20)
       ),
     ),
   )

Answer 4

Flutter API 文档有一个示例，说明如何RaisedButton使用渐变背景渲染- 参见此处https://api.flutter.dev/flutter/material/RaisedButton-class.html

Widget gradientButton = Container(
  child: RaisedButton(
    onPressed: () { },
    textColor: Colors.white,
    padding: const EdgeInsets.all(0.0),
    child: Container(
      width: 300,
      decoration: new BoxDecoration(
        gradient: new LinearGradient(
          colors: [
            Color.fromARGB(255, 148, 231, 225),
            Color.fromARGB(255, 62, 182, 226)
          ],
        )
      ),
      padding: const EdgeInsets.all(10.0),
      child: Text(
        "Gradient Button",
        textAlign: TextAlign.center,
      ),
    ),
  ),
);

Answer 5

上面的所有解决方案都无法真正解决一些小缺陷或问题（例如，缺少波纹效果，不需要的边框，不尊重按钮主题的minWidth）。

以下解决方案没有上述问题（关键部分是使用Ink小部件在渐变上保留波动能力）：

RaisedButton(
  onPressed: () { },
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
  padding: const EdgeInsets.all(0.0),
  child: Ink(
    decoration: const BoxDecoration(
      gradient: myGradient,
      borderRadius: BorderRadius.all(Radius.circular(80.0)),
    ),
    child: Container(
      constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0), // min sizes for Material buttons
      alignment: Alignment.center,
      child: const Text(
        'OK',
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

Answer 6

渐变包可在酒吧商店获得，它支持一些预定义的渐变

您可以将渐变按钮创建为

GradientButton(
                 child: Text('Gradient'),
                 callback: () {},
                 gradient: Gradients.backToFuture,
           ),

该包有 GradientCard、GradientProgressIndicator、GradientButton、CircularGradientButton 和 GradientText

渐变小部件

Answer 7

只需再创建一个容器，作为子项设置该容器的装饰并根据需要设置渐变颜色

然后在此之后使用RaisingButton作为上述容器的子级，与MaterialButton相同

   child: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.blue],
            begin: FractionalOffset(0.0, 0.0),
            end: FractionalOffset(0.5, 0.0),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp),
      ),
      child: RaisedButton(
        color: Colors.transparent,
        child: Text("Ask Permssion"),
        onPressed: () {
          askPermission();
        },
      )),

输出：