2021 年更新：

Question

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

Answer 1

上面的所有解决方案都无法真正解决一些小瑕疵或问题（例如，缺少波纹效果，不必要的边框，不尊重主题的 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 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

Flutter RaisedButton Tutorial

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Gradient RaisedButton Example'),
    ),
    body: Center(
      child: RaisedButton(
        textColor: Colors.white,
        padding: EdgeInsets.all(0.0),
        shape: StadiumBorder(),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25.0),
            gradient: LinearGradient(
              colors: <color>[
                Color(0xFF00b09b),
                Color(0xFF96c93d),
              ],
            ),
          ),
          child: Text(
            'ANDROIDRIDE',
            style: TextStyle(fontSize: 15.0),
          ),
          padding: EdgeInsets.symmetric(horizontal: 70.0, vertical: 15.0),
        ),
        onPressed: () {
          print('Gradient RaisedButton clicked');
        },
      ),
    ),
  ),
);
  }
}

Answer 4

请参阅下方-

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 5

Gradient软件包可在发布店中购买，该软件包仅支持少量预定义的渐变

您可以将渐变按钮创建为

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

该软件包具有GradientCard，GradientProgressIndicator，GradientButton，CircularGradientButton和GradientText

Gradient Widgets

Answer 6

文档最后一个示例https://api.flutter.dev/flutter/material/RaisedButton-class.html

RaisedButton(
  onPressed: () {},
  textColor: Colors.white,
  padding: const EdgeInsets.all(0.0),
  child: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: <Color>[
          Color(0xFF0D47A1),
          Color(0xFF1976D2),
          Color(0xFF42A5F5),
        ],
      ),
    ),
    padding: const EdgeInsets.all(10.0),
    child: const Text(
      'Gradient Button',
      style: TextStyle(fontSize: 20)
    ),
  ),
);

Answer 7

2021 年更新：

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

`ElevatedButton`

DecoratedBox(
  decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.pink, Colors.green])),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(primary: 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({
    Key? key,
    required this.onPressed,
    required this.child,
    this.style,
    this.gradient,
    this.thickness = 2,
  }) : super(key: key);

  @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 8

简单地再增加一个容器，作为孩子设置该容器的装饰并根据需要制作渐变颜色

然后在此之后，将 RaisedButton 用作上述容器的子代与 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();
        },
      )),

输出：

Answer 9

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 10

我知道这个问题有点老了。但是我发现自己有这个要求，我想分享我的解决方案。它使用[' R100 OPEN PN"10057609" "RES S 5mOhm 1% 2512_H6_1(T)";', ' R101 100 5 5 f PN"66151002538" "CH-WID_ 100R -5-RR 0603 (B)";', ' C100 100n 10 10 f PN"10210616" "CFCAP X7R S 100nF 50V (T)";', ' R100 OPEN PN"10057609" "RES S 5mOhm 1% 2512_H6_1(T)";', ' R100 CLOSED PN"10057609" "RES S 5mOhm 1% 2512_H6_1 (T)" VERSION 12046547;']并在按下按钮时动画显示高程。

Card

有改进的余地（也许您不希望默认使用那些圆角的边框），但希望对某些人有用：D

Answer 11

通过使用RawMaterialButton中的material.dart，可以使用更简单的方法，也可以使其形状为圆形或圆形。这是一个简单的例子。

  Card(
    elevation: 7,
    child: Container(
      width: 120.0,
      height: 75.0,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: <Color>[
            Colors.blue,
            Colors.red,
          ],
        ),
      ),
      child: RawMaterialButton(
        onPressed: () {},
        splashColor: Colors.grey,
        child: Text(
          "Button",
          style: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
      ),
    ),
  ),

Answer 12

这对我来说是什么工人。 RaisedButton 被弃用我使用了 ElevatedButton。所以这应该是要走的路。

import 'package:flutter/material.dart';

class MainButton extends StatelessWidget {
  final Widget thechild;
  final double width;
  final double height;
  final Function theaction;

  const MainButton({
    Key key,
    @required this.thechild,
    this.width = double.infinity,
    this.height = 50.0,
    this.theaction,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: theaction,
      style: ElevatedButton.styleFrom(
        primary: Colors.transparent,
        elevation: 4.0,
        minimumSize: Size(88.0, 45.0),
        padding: const EdgeInsets.all(0.0),
      ),
      child: Ink(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [
                0.1,
                0.8,
                0.9
              ],
              colors: [
                Color.fromARGB(255, 186, 252, 244),
                Color.fromARGB(255, 55, 183, 230),
                Color.fromARGB(255, 49, 175, 230),
              ]),
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
        child: Container(
          constraints: const BoxConstraints(minWidth: 88.0, minHeight: 45.0),
          alignment: Alignment.center,
          child: thechild,
        ),
      ),
    );
  }
}

使用

先导入

import '../widgets/mainButton.dart';

然后

MainButton(
                        thechild: Text(AppLocalization.translate('loginbtn'),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 20)),
                        theaction: () {},
                      ),

Answer 13

DecoratedBox(
    decoration: ShapeDecoration(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        gradient: RadialGradient(
            radius: 2, colors: [Colors.white, Colors.redAccent]),),
     child:RaisedButton(),
),

使用 DecoratedBox 作为父控件为任何控件添加渐变

Example

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

13 个答案:

2021 年更新：

`ElevatedButton`

`OutlinedButton`