flutter

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. 1. Shape property
  2. 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),
        ),
    ),
)

Looking to start a project?

Get in touch with us and turn your dream into reality today.

Contact us

Interactive Example