Flutter 2 - 如何在新的 TextButton 中制作圓角並賦予其高度

Question

如何在新的 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),
    ));

Answer 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,
                ))

Answer 2

對於角半徑，您必須在內部使用形狀屬性，您可以設置如下所示的內容，對於高度和寬度，只需給它填充。

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),
              )

Answer 3

改用 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 小部件很難設置樣式:)