How to create Rounded Button in Flutter

A tutorial for creating rounded, circular, outline and beveled buttons in Flutter

Flutter app development illustration

If you don’t know already, Flutter deprecated RaisedButton, FlatButton and some other buttons. So in this little tutorial I’ll show you which buttons to use, and how to make rounded and circular buttons in Flutter 2.0.

What’s deprecated?

Deprecated    -->   Recommended

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

Rounded Elevated Button — Flutter 2.0

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…