如何更改升高按钮 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), ), ), ), );