FLUTTER

Create a rounded-button or a button with border-radius

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

  1. Shape property
  2. Clipping using ClipRRect

Using shape property

In this example, we give a small border-radius to the corners of the button using shape property.

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

Using ClipRRect

We can also give border-radius by clipping. For this, you need to wrap the RaisedButton with a ClipRRect as shown in the example below.