Create a rounded button / button with border-radius in Flutter

1. Solution Summary

FlatButton and RaisedButton are deprecated.

So, you can use shape which placed in the style property, for TextButton and ElevatedButton.

There are some changes since Flutter 2.0:

• style: the property type has changed to ButtonStyle
• shape: the property type has changed to MaterialStateProperty<T>

2. Rounded Button

Inside the style property exists the shape property:

style: ButtonStyle(  shape: MaterialStateProperty.all<RoundedRectangleBorder>(    RoundedRectangleBorder(      borderRadius: BorderRadius.circular(18.0),      side: BorderSide(color: Colors.red)    )  ))

Square Button

For a square button you can use ElevatedButton or otherwise add:

style: ButtonStyle(  shape: MaterialStateProperty.all<RoundedRectangleBorder>(    RoundedRectangleBorder(      borderRadius: BorderRadius.zero,      side: BorderSide(color: Colors.red)    )  ))

Complete Example

Row(  mainAxisAlignment: MainAxisAlignment.end,  children: [    TextButton(      child: Text(        "Add to cart".toUpperCase(),        style: TextStyle(fontSize: 14)      ),      style: ButtonStyle(        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),        shape: MaterialStateProperty.all<RoundedRectangleBorder>(          RoundedRectangleBorder(            borderRadius: BorderRadius.circular(18.0),            side: BorderSide(color: Colors.red)          )        )      ),      onPressed: () => null    ),    SizedBox(width: 10),    ElevatedButton(      child: Text(        "Buy now".toUpperCase(),        style: TextStyle(fontSize: 14)      ),      style: ButtonStyle(        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),        shape: MaterialStateProperty.all<RoundedRectangleBorder>(          RoundedRectangleBorder(            borderRadius: BorderRadius.zero,            side: BorderSide(color: Colors.red)          )        )      ),      onPressed: () => null    )  ])

You can use the RaisedButton Widget. The raised button widget has a shape property which you can use as shown in the below snippet.

ElevatedButton(          style: ButtonStyle(              shape: MaterialStateProperty.all<RoundedRectangleBorder>(                  RoundedRectangleBorder(                      borderRadius: BorderRadius.circular(18.0),                      side: BorderSide(color: Colors.teal, width: 2.0)))),          child: Text('Submit'),          onPressed: () {},        ),

Update

Since, the left sides buttons are now deprecated, use the right sided ones.

Deprecated    -->   RecommendedRaisedButton  -->   ElevatedButtonOutlineButton -->   OutlinedButtonFlatButton    -->   TextButton

• ElevatedButton

1. Using StadiumBorder

   

   ElevatedButton(  onPressed: () {},  child: Text('Button'),  style: ElevatedButton.styleFrom(shape: StadiumBorder()),)

2. Using RoundedRectangleBorder

   

   ElevatedButton(  onPressed: () {},  child: Text('Button'),  style: ElevatedButton.styleFrom(    shape: RoundedRectangleBorder(      borderRadius: BorderRadius.circular(12), // <-- Radius    ),  ),)

3. Using CircleBorder

   

   ElevatedButton(  onPressed: () {},  child: Text('Button'),  style: ElevatedButton.styleFrom(    shape: CircleBorder(),    padding: EdgeInsets.all(24),  ),)

4. Using BeveledRectangleBorder

   

   ElevatedButton(  onPressed: () {},  child: Text('Button'),  style: ElevatedButton.styleFrom(    shape: BeveledRectangleBorder(      borderRadius: BorderRadius.circular(12)    ),  ),)

OutlinedButton

1. Using StadiumBorder

   

   OutlinedButton(  onPressed: () {},  child: Text('Button'),  style: OutlinedButton.styleFrom(    shape: StadiumBorder(),  ),)

2. Using RoundedRectangleBorder

   

   OutlinedButton(  onPressed: () {},  child: Text('Button'),  style: OutlinedButton.styleFrom(    shape: BeveledRectangleBorder(      borderRadius: BorderRadius.circular(12),    ),  ),)

3. Using CircleBorder:

   

   OutlinedButton(  onPressed: () {},  child: Text('Button'),  style: OutlinedButton.styleFrom(    shape: CircleBorder(),    padding: EdgeInsets.all(24),  ),)

4. Using BeveledRectangleBorder

   

   OutlinedButton(  onPressed: () {},  child: Text('Button'),  style: OutlinedButton.styleFrom(    shape: BeveledRectangleBorder(      borderRadius: BorderRadius.circular(12),    ),  ),)

TextButton

TextButton also works similar to ElevatedButton and OutlinedButton, however you can only see the shapes when the button is pressed.