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

Question

I'm currently developing an Android app in Flutter. How can I add a rounded button?

Answer 1

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     )   ] )  

Answer 2

You can use the ElevatedButton Widget. The elevated 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: () {}, ),