Flutter 2 - 如何在新的 TextButton 中制作圆角并赋予它一个高度答案

【问题标题】：Flutter 2 - How to make rounded corners in the new TextButton and give it a heightFlutter 2 - 如何在新的 TextButton 中制作圆角并赋予它一个高度
【发布时间】：2021-03-18 08:54:11
【问题描述】：

如何在新的 TextButton 中添加指定高度并使其圆角

这是在现已弃用的 FlatButton 中执行此操作的方法。

FlatButton(
    height: 44,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    color: Colors.green[900],
    minWidth: double.infinity,
    onPressed: () => cart.gtynAddToCart(productID),
    child: Text(
      'Button',
      style: TextStyle(color: Colors.white),
    ));

【问题讨论】：

标签： flutter

【解决方案1】：

由于 FlatButton 在 Flutter 2.0 中已弃用，您可以使用 TextButton

试试

TextButton(
        onPressed: () => cart.gtynAddToCart(productID),
        child: Container(
            alignment: Alignment.center,
            height: 44,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(4)),
              color: Colors.green[900],
            ),
            style:ButtonStyle(tapTargetSize:MaterialTapTargetSize.shrinkWrap,
            ),
            // minWidth: double.infinity,
            child: Text(
              'Button',
              style: TextStyle(color: Colors.white),
            )))

我也找到了另一种实现方式，也许你有兴趣

TextButton(
                onPressed: () => cart.gtynAddToCart(productID),
                style: ButtonStyle(
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    minimumSize:
                        MaterialStateProperty.all(Size(double.infinity, 44)),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4.0)),
                    ),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.green[900])),
                child: Text(
                  'Button',
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ))

【讨论】：

【解决方案2】：

改用 RawMaterialButton：

RawMaterialButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(22),
                    ),
                    side: BorderSide(color: Colors.white, width: 0.5)),
                onPressed: () {},
                child:
                    Text("Sign UP", style: TextStyle(color: Colors.white)),
              ),

新的 TextButton 小部件很难设置样式 :)

【讨论】：

【解决方案3】：

对于圆角半径，您必须在内部使用形状属性，您可以设置如下所示的内容，对于高度和宽度，只需给它填充。

FlatButton(
                child: Text('Rounded Rectangle Border'),
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                color: Colors.pink,
                textColor: Colors.white,
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
              )

【讨论】：