如何改变高位按钮颤振的边界半径

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

你可以使用按钮样式，我认为它有点类似于在Flutter中创建一个带有边框半径的圆形按钮/按钮。

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

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

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