如何更改升高按钮颤动的边框半径

Question

我使用 flutter 连续创建了两个按钮。现在我想更改 border-radius 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

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

Answer 2

提升的按钮小部件有一个 shape 属性，您可以使用它，如下面的代码片段所示。

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

Answer 3

你可以使用ButtonStyle，我认为它有点类似 在 Flutter 中创建一个带有 border-radius 的圆形按钮/按钮。

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