CODEWITHSUNDEEP
flutterdartflutter-layout
Adam Smaka
Adam Smaka

Reputation: 6393

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

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.

Upvotes: 37

Views: 25383

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267664

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'),
)

Upvotes: 7

Matthias
Matthias

Reputation: 4163

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

Upvotes: 87

Related Questions