如何在 flutter 中为高架按钮提供圆角边框？

Question

As RaisedButton and OutlineButton are deprecated, the flutter team introduces a new ElevatedButton . But I don't know how to make ElevatedButton's border rounded like the below image.

ElevatedButton(
  onPressed: () {},
  child: Text('Testing'),
),

Answer 1

You could do something like this:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
  child: Text(' Elevated Button')
)

Answer 2

 ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                      side: BorderSide(color: Colors.green)),
                ),
              ),
              onPressed: () {},
              child: Text('test'),
        )

Answer 3

This is how you can use new Ele Button

ElevatedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.resolveWith<OutlinedBorder>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(10));
            }
            return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(10)); //CHoose any shape you want
          },
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return greyColor;
            }
            return selectedPrimaryColor; 
          },
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.black;
            }
            return selectedPrimaryColor; 
          },
        ),
      ),
    ),

Answer 4

As RaisedButton and OutlineButton are deprecated, the flutter team introduces a new ElevatedButton . But I don't know how to make ElevatedButton's border rounded like the below image.

ElevatedButton(
  onPressed: () {},
  child: Text('Testing'),
),