Flutter如何为凸起的按钮填充渐变色？答案

【问题标题】：Flutter how to fill gredient color for raised button?Flutter如何为凸起的按钮填充渐变色？
【发布时间】：2020-04-10 01:27:03
【问题描述】：

我正在尝试渲染渐变按钮，但在某些设备上，渐变颜色没有像下图那样展开。

我该如何解决这个问题？
谢谢！

代码

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;
  const GradientButton({@required this.child, @required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      textColor: Colors.white,
      shape: StadiumBorder(),
      padding: const EdgeInsets.all(0.0),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[Color(0xff00F260), Color(0xff0575E6)],
          ),
        ),
        padding: EdgeInsets.all(8.0),
        child: child
        onPressed: onPressed,
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

试试这个，圆形边框的材质按钮

MaterialButton(
  onPressed: () {},
  child: Ink(
    padding: EdgeInsets.all(DEFAULT_PADDING),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: <Color>[
          SECONDARY_COLOR_SHADE_DARK_NEW,
          SECONDARY_COLOR_SHADE_LITE_NEW,
        ],
      ),
  ),
    child: Text(
      buttonText,
      style: Theme.of(context).textTheme.button.copyWith(fontWeight: FontWeight.bold),
      textAlign: TextAlign.center,
    ),
  ),
  shape: CircleBorder(),
);

【讨论】：

【解决方案2】：

如果您想维护 RaisedButton 小部件及其行为，您可以这样做：

RaisedButton(
  textColor: Colors.white,
  shape: StadiumBorder(),
  padding: const EdgeInsets.all(0.0),
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: child,
  ),
  onPressed: onPressed,
),

但是容器周围的填充感觉有点像作弊。您可以使用 GestureDetector 包装一个容器，然后根据需要操作该容器，如下所示：

GestureDetector(
  onTap: onPressed,
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: Text('Lets Go',
      style: TextStyle(color: Colors.white),
    ),
  ),
),

【讨论】：

感谢您的回答！能分享一下conainer版本的代码吗？
@KodaiTakata 我已将您要求的代码添加到我的原始回复中。

【解决方案3】：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;

  const GradientButton({Key key, this.onPressed, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: const StadiumBorder(),
        gradient: LinearGradient(
          colors: [Color(0xff00F260), Color(0xff0575E6)],
        ),
      ),
      child: MaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        shape: const StadiumBorder(),
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}

您还可以获得一些MaterialButton 效果，例如点击时的Ripple，当onPressed 为空时禁用等。对于ShapeDecoration 中的高程设置shadows 属性

shadows: [
  BoxShadow(
      color: Colors.black54,
      spreadRadius: 0.5,
      blurRadius: 3,
      offset: Offset(1, 1))
]

【讨论】：