如何更改升高按鈕 flutter 的邊框半徑

Question

我使用 flutter 連續創建了兩個按鈕。 現在我想更改邊框半徑 o=f 按鈕。 我怎樣才能正確地做到這一點？ 圖片顯示了我創建的按鈕。

Widget lbsButton() => Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 80,
            height:50,
            child: ElevatedButton(
              onPressed: () {},
              child: Text('lbs'),
              style: ButtonStyle(
                
                backgroundColor: MaterialStateProperty.all<Color>(mainPurpleText),

              ),
              
            ),
          ),
          SizedBox(
            width: 10,
          ),
          SizedBox(
            width: 80,
            height:50,
            child: new ElevatedButton(
              onPressed: () {},
              child: Text('kg' , style:TextStyle(color:Colors.grey,fontSize:13),
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>( Colors.white),
              ),
            ),
          )
        ],
      ),
    );

Answer 1

提升的按鈕小部件具有一個 shape 屬性，您可以使用它，如下面的代碼片段所示。

ElevatedButton(
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(mainPurpleText),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),

Answer 2

您可以使用ButtonStyle ，我認為它有點類似Create a rounded button / button with border-radius in Flutter 。

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
    borderRadius:
        BorderRadius.circular(18.0), // radius you want
    side: BorderSide(
      color: Colors.transparent, //color
    ),
  )),

Answer 3

return ElevatedButton( onPressed: onPressed, child: Text('test'), style: ButtonStyle( shape: MaterialStateProperty.all( RoundedRectangleBorder( // Change your radius here borderRadius: BorderRadius.circular(16), ), ), ), );