How to achieve rounded corners on new OutlinedButton widget in Flutter?

Question

With Flutter 1.22 we received a new widget OutlinedButton which is made to replace OutlineButton but how we can actually make its border rounded? borderSide and shape properties are not available anymore.

Answer 1

You can use OutlinedButton.styleFrom property:

OutlinedButton(    style: OutlinedButton.styleFrom(       shape: RoundedRectangleBorder(          borderRadius: BorderRadius.circular(18.0),       ),       side: BorderSide(width: 2, color: Colors.green),    ),    onPressed: () {},    child: Text('Button'), ) 

From the source code

 /// All parameters default to null, by default this method returns  /// a [ButtonStyle] that doesn't override anything.  ///  /// For example, to override the default shape and outline for an  /// [OutlinedButton], one could write:  ///  /// ```dart  /// OutlinedButton(  ///   style: OutlinedButton.styleFrom(  ///      shape: StadiumBorder(),  ///      side: BorderSide(width: 2, color: Colors.green),  ///   ),  /// )  /// ```