无法为OutlineButton设置填充颜色

Question

OutlineButton的documentation表示color属性填充按钮颜色，默认情况下是透明的。具体来说，Flutter文档说明了颜色属性：“颜色→颜色按钮的填充颜色，由其材料显示，而处于默认（未按下，已启用）状态。”

但是设置color属性没有任何效果：

OutlineButton(
        color: Colors.orange,
        textColor: BmsColors.primaryForegroundColor,
        borderSide: BorderSide(color: BmsColors.primaryForegroundColor, width: 2.0),
        shape: new RoundedRectangleBorder(
          borderRadius:
              new BorderRadius.circular(8.0),
        ),
        child: Text(
          this.text,
          style: TextStyle(fontFamily: 'Lalezar', fontWeight: FontWeight.w400),
        ),
        onPressed: () {},
      );

Answer 1

如果你查看OutlineButton的源代码，有一种获取fillColor的方法

      Color _getFillColor() {
        if (widget.highlightElevation == null || widget.highlightElevation == 0.0)
          return Colors.transparent;
        final Color color = widget.color ?? Theme.of(context).canvasColor;
        final Tween<Color> colorTween = ColorTween(
          begin: color.withAlpha(0x00),
          end: color.withAlpha(0xFF),
        );
        return colorTween.evaluate(_fillAnimation);
      }

但是这种方法有一个if条件，只有当color与highlightElevation不同时它才使用0，并且它还使用colorTween的color.withAlpha(0x00)动画到color.withAlpha(0xFF)。

因此，当您按下它时，它会从透明变为您的颜色。

如果你愿意，你可以创建自己的OutlineButton小部件，这是我做的一个样本：

    class MyCustomOutlineButton extends StatelessWidget {
      final String text;
      final VoidCallback onPressed;
      final Color color;

      const MyCustomOutlineButton({Key key, this.text, this.onPressed, this.color})
          : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.yellow, width: 2.0),
            color: color,
            borderRadius: BorderRadius.circular(8.0),
          ),
          margin: EdgeInsets.all(2.0),
          child: RawMaterialButton(
            fillColor: color,
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 14.0),
              child: Text(
                text,
                style: TextStyle(
                    fontFamily: 'Lalezar',
                    fontWeight: FontWeight.w400,
                    color: Colors.yellow),
              ),
            ),
            onPressed: onPressed,
          ),
        );
      }
    }

用法

  MyCustomOutlineButton(
            text: "Become a Member",
            color: Colors.orange,
            onPressed: () {
              print("here");
            },
          ),

Answer 2

根据需要，您可以使用简单的RaisedButton和RoundedRectangleBorder。见例如：

Container(
            color: Colors.pink,
            child: RaisedButton(
              color: Colors.black,
              child: Text('Become a member', style: TextStyle(color: Colors.yellow)),
              onPressed: () {
                print('Hello');
              },
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  side: BorderSide(color: Colors.yellow, width: 5.0)),
            ),
          )

可以使用BorderSide指定边框颜色，填充的颜色只是RaisedButton的常规颜色属性。 希望这有帮助。