Creating a rounded ElevatedButton in Flutter

In this post I'll show you how you can create a rounded ElevatedButton in Flutter, with a custom radius that you can specify.

ElevatedButton has a property called styleFrom that you can use to style the button, like for example the color of the button or its padding. It also has a property called shape that you can use to change the shape of the widget.

Use shape to round the corners

Here's an example of using shape to make the corners of the button rounded:

Copycopy code to clipboard
1ElevatedButton(
2  style: ElevatedButton.styleFrom(
3    shape: RoundedRectangleBorder(
4      borderRadius: BorderRadius.circular(16),
5    ),
6  ),
7  onPressed: () => print('Pressed!'),
8  child: Text('Press Me'),
9)

You can tweak the number inside circular to change the radius to your liking. I also created a snippet on DartPad if you want to try and play around with it a bit: