Flutter：如何修复并为轮廓按钮添加边框和颜色？

Posted 2023-03-28

【中文标题】Flutter：如何修复并为轮廓按钮添加边框和颜色？

【英文标题】：Flutter: How to fix and add a border and color to outlined button?

【发布时间】：2021-09-09 18:00:51

【问题描述】：

谁能告诉我为什么我的代码没有将边框设为蓝色，而是让它的宽度为 3.0？

这就是它的样子（L：我的应用程序，R：教程应用程序）：

代码：

class CreateRoomButton extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return OutlinedButton(
      onPressed: () => print('Create Room'),
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            side: BorderSide(
              color: Colors.blueAccent[100],
              width: 3.0,
            ),
            borderRadius: BorderRadius.circular(30.0),
          ),
        ),
      ),
      child: Row(
        children: [
          ShaderMask(
            shaderCallback: (rect) =>
                Palette.createRoomGradient.createShader(rect),
            child: Icon(
              Icons.video_call,
              color: Colors.white,
              size: 35.0,
            ),
          ),
          const SizedBox(width: 4.0),
          Text(
            'Create\nRoom',
            style: TextStyle(color: Colors.blueAccent[100]),
          ),
        ],
      ),
    );
  

我还必须在某处添加它（但由于 textColor 在 Flutter 2.0 中已被贬低，我想知道如何处理它......）：

textColor: Palette.facebookblue,

谢谢！

【参考方案1】：

只需将 OutlinedButton 更改为：

OutlinedButton(
    onPressed: () => print('Create Room'),
    style: OutlinedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      side: BorderSide(width: 3.0, color: Colors.blueAccent[100]),
    )
    child: yourChildWidget,
)

【参考方案2】：

像这样，你可以在孩子中编写你的小部件

轮廓按钮( 样式：OutlinedButton.styleFrom( 边：BorderSide（颜色：Colors.teal）， ), onPressed: () , 孩子：空， ),