How to create rounded buttons in Flutter

Share this post

There are many ways to create and use rounded buttons in Flutter, but I’m going to show you some ways that work great in my opinion.

Rounded button using RoundedRectangleBorder

This method is very easy, we just need to use a RaisedButton and give it a shape with RoundedRectangleBorder.

Widget _withRoundedRectangleBorder() {
    return RaisedButton(
      child: Text("RaisedButton with RoundedRectangleBorder"),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      onPressed: () {},
    );
  }

The button above already has all the characteristics of a Material button, thus not really customizable (except obvious things like color, etc.)

Rounded button using StadiumBorder

This method basically does the same thing to the button as a RoundedRectangleBorder with a circular radius of 20 but is much shorter. Obviously even less customizable than the above method.

Widget _withStadiumBorder() {
    return RaisedButton(
      shape: StadiumBorder(),
      onPressed: () {},
      child: Text("RaisedButton with StadiumBorder"),
    );
  }

Custom rounded button using InkWell

This method uses InkWell and is the most customizable one, but of course, is the most verbose and is only recommended for people who want things like double-tap support, custom splashColor and highlightColor, and many more customizable properties. You can read all about it in the link above and try it out yourself.

Widget _customButton() {
    return Material(
      child: InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {},
        splashColor: Colors.blue,
        highlightColor: Colors.blue,
        child: Container(
          height: 36,
          width: 240,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.grey),
          ),
          child: Center(
            child: Text("Custom Button with InkWell"),
          ),
        ),
      ),
    );
  }

I hope this post makes it easy for you to use rounded buttons in Flutter.