Flutter Elevated Button with Rounded Corners

Flutter is a cross-platform mobile app development framework that allows you to create beautiful, high-performance apps for both iOS and Android. One of the most commonly used widgets in Flutter is the ElevatedButton widget. This widget allows you to create buttons that have a raised appearance and can be used to perform actions in your app.

By default, the ElevatedButton widget has sharp corners. However, you can easily change this by using the shape property. The shape property takes a Shape object, which can be used to specify the shape of the button. One of the shapes that you can use is the RoundedRectangleBorder shape. This shape allows you to specify the radius of the corners of the button.

To create an elevated button with rounded radius in Flutter, you can use the following code:

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

In this code, we are using the RoundedRectangleBorder shape with a border radius of 20. This will create a button with rounded corners of radius 20.

You can also use the shape property to specify other shapes for your button. For example, you can use the CircleBorder shape to create a circular button.

Here is an example of how to create a circular button:

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    minimumSize: Size(100,100),
    shape: CircleBorder(),
  ),
),

I hope this article has helped you to learn how to make an elevated button with rounded radius in Flutter.