Create a Rounded Button / Button with Border-Radius in Flutter

In this article, we will show you how to create buttons with various border-radius and styles in Flutter. With the recent changes in Flutter 2.0, some of the properties have been deprecated, so we’ll also cover what’s new.

Solution Summary

FlatButton and RaisedButton are no longer supported and should be replaced by ElevatedButton and OutlinedButton respectively.

style: the property type has changed to ButtonStyle
shape: the property type has changed to MaterialStateProperty

This means that when using TextButton or ElevatedButton, you can use shape which is placed in the style property. We’ll show examples of rounded buttons and square buttons.

Rounded Button

To create a rounded button, add the following code:

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

Square Button

To create a square button, you can use ElevatedButton or add the following code:

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

Complete Example

Here’s a complete example of how to create buttons with different styles:

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all(Colors.red),
        shape: MaterialStateProperty.all(
          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(Colors.white),
        backgroundColor: MaterialStateProperty.all(Colors.red),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)

Update

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

Deprecated    -->   Recommended

RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

ElevatedButton

Using StadiumBorder:

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

Using RoundedRectangleBorder:

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

Using CircleBorder:

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

Using BeveledRectangleBorder:

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

OutlinedButton

Using StadiumBorder:

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

Using RoundedRectangleBorder:

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

Using CircleBorder:

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

TextButton

You can use the same styles for TextButton as well:

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