无法为 OutlineButton 设置填充颜色

Question

OutlineButton的文档说该color属性填充按钮颜色并且默认情况下是透明的。Flutter 文档特别提到了 color 属性：“color ? Color 按钮的填充颜色，由其材质显示，而它处于默认（未按下、启用）状态。”

但是设置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");
            },
          ),