Flutter 透明按钮仰角

Question

我创建了一个自定义按钮，我想为其提供颜色和高度。工作发现，除了当我给按钮颜色

Colors.transparent

。这是一个展示我的问题的示例：

Widget buildButton(void Function() onPressed, String label, double? elevation) {
  return OutlinedButton(
    onPressed: onPressed,
    child: Text(label),
    style: OutlinedButton.styleFrom(
        backgroundColor: Colors.white,
        side: BorderSide(
          width: 2,
          color: Colors.blue,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        elevation: elevation ?? 0
    ),
  );
}

class ButtonsDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            buildButton(() {}, "Button", null),
            buildButton(() {}, "Button", 5),
          ],
        ),
      ),
    );
  }
}

按钮如下所示：

它们应该是这样的（我将按钮的颜色设置为屏幕的背景颜色来展示它们，但我不能在我的代码中这样做）：

我尝试了这个答案，但它只让我到目前为止（我不知道我是否完全错了，但看起来是这样）：

我也尝试过这个答案，它让我到达那里：

所以，正如你所看到的，这两个答案都对我没有任何帮助。谁能告诉我如何向透明按钮添加高度？

Answer 1

解决您问题的最佳方法是使用

ElevatedButton

而不是

OutlinedButton

并给它一个

shadowColor

。下面的代码是第二个按钮的代码，请尝试一下。

ElevatedButton(
          onPressed: () {},
          child: Text(
            'Elevated',
            style: TextStyle(color: Colors.black),
          ),
          style: ElevatedButton.styleFrom(
            elevation: 5,
            primary: Colors.transparent,
            shadowColor: Colors.transparent.withOpacity(0.1),
            side: BorderSide(
              width: 2,
              color: Colors.blue,
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        ),

Answer 2

我通过

highlightElevation: 0

解决了这个问题