dart - 如何创建具有圆角和渐变背景的按钮？

Question

我一直在尝试创建一个带有圆角和渐变背景的凸起按钮，但没有成功。我只能实现其中之一。已经 2 个小时了，关于如何同时实现圆角和渐变背景，我自己还没有找到解决方案。

以下是我最近尝试实现带有圆角和渐变背景的凸起按钮的代码。

GradientButton 的自定义类

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: new LinearGradient(
          colors: [
            Colors.blue,
            Colors.red,
          ],
          begin: FractionalOffset.centerLeft,
          end: FractionalOffset.centerRight,
        ),
      ),
      child: Material(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(128.0)),
//        color: Colors.transparent,
        child: InkWell(
            onTap: onPressed,
            child: Center(
              child: child,
            )),
      ),
    );
  }
}

我如何使用上面的代码:

RaisedGradientButton(
    onPressed: navigateToNextPage,
        child: Text("Select Community"),
)

它的样子:

如您所见，渐变在那里，但是当我尝试创建圆角时，它重叠了，渐变落后了。

Answer 1

有一个简单的解决方案。为按钮和按钮内的容器添加相同的边框半径。这是一个简单的例子。

RaisedButton(
   onPressed: () {},
   textColor: Colors.white,
   color: Colors.transparent,
   padding: EdgeInsets.all(0),
   shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(18.0),
   ),
   child: Container(
      decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(18),
         gradient: LinearGradient(
            colors: <Color>[
               Colors.black38,
               Colors.black26,
               Colors.white38,
            ],
         ),
      ),
      padding: const EdgeInsets.fromLTRB(24, 12, 24, 12),
      child: const Text('Sign In', style: TextStyle(fontSize: 20)),
   ),
),