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

user_2235274 0
Viewed 13583

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.

flutter-layout dart flutter
2 Answers

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),
 ///   ),
 /// )
 /// ```
user_114853260

Screenshot:

enter image description here

If you need some extra control over the style like border should be ABC when the button is pressed, DEF when its hovered... XYZ when not interacted, you can use ButtonStyle.

OutlinedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: MaterialStateProperty.resolveWith<OutlinedBorder?>((states) {
      // Rounded button (when the button is pressed)
      if (states.contains(MaterialState.pressed)) {
        return RoundedRectangleBorder(borderRadius: BorderRadius.circular(20));
      }
    }),
  ),
  child: Text('OutlinedButton'),
)
user_66186220
Related