Create an Elevated Button with rounded edges or a border radius

There are three major types of Buttons available in Flutter. They are the ElevatedButton, TextButton, and IconButton. In this tutorial, we will learn how to add a border-radius to a button using ElevatedButton as an
example. The border-radius can be given using

1. Shape property
2. Clipping using ClipRRect

Using shape property

To change various features like color, shape, padding of an ElevatedButton, we use the style property. To change the shape, we use shape property inside the ElevatedButton.styleFrom class. Here we have given the
value of the shape as RoundedRectangleBorder with a border radius of 10.0. You can also use BeveledRectangleBorder for a bevel shaped corner for the button.


ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)
        ),
        primary: Colors.purple
    ),
    child: Text(
        "CLICK ME",
        style: TextStyle(color: Colors.white, fontSize: 18),
    ),
)

Pill shaped button in Flutter

If you need a pill-shaped button, you can either use RoundedRectangularBorder or StadiumBorder for the shape property.


ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
        primary: Colors.deepPurpleAccent,
        shape: StadiumBorder(),
    ),
    child: Text(
        "CLICK ME",
        style: TextStyle(color: Colors.white, fontSize: 18),
    ),
)

Using ClipRRect

We can also give border-radius by clipping. For this, you need to wrap the ElevatedButton with a ClipRRect as shown in the example below. Clipping technique can also be used to create buttons with custom shapes. Complex
shapes can be created using clippy_flutter or a polygon_clipper package


ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
            padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
            primary: Colors.green,
        ),
        child: Text(
            "CLICK ME",
            style: TextStyle(color: Colors.white, fontSize: 18),
        ),
    ),
)

Post Views: 15

Need Help with Your Next Project??

Looking for expert support or custom development in Flutter, HTML5, Vue.js, or any other web technologies? Our team is here to help you build and optimize your digital presence.

Contact us today to discuss your project and see how we can take it to the next level!