How to Create a Rounded/Circular Button (Border-radius) In Flutter

So, someone asked how they can create a rounded button in Flutter, It should have circular edges, Here are different ways on how you can easily create a rounded button in flutter.

RELATED FLUTTER RESOURCES

No Content Available

Question:

I’m currently developing an Android app in Flutter. How can I add a rounded button?

Answer 1 (Best Answer):

322

1. Solution Summary

You can use shape for FlatButton and RaisedButton.

2. Rounded Button

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(18.0),
  side: BorderSide(color: Colors.red)
),

Square Button

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(0.0),
  side: BorderSide(color: Colors.red)
),

Complete Example

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FlatButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)),
      color: Colors.white,
      textColor: Colors.red,
      padding: EdgeInsets.all(8.0),
      onPressed: () {},
      child: Text(
        "Add to Cart".toUpperCase(),
        style: TextStyle(
          fontSize: 14.0,
        ),
      ),
    ),
    SizedBox(width: 10),
    RaisedButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)),
      onPressed: () {},
      color: Colors.red,
      textColor: Colors.white,
      child: Text("Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)),
    ),
  ],   
)

Answer 2:

There are many ways of doing it. I am listing few here.

(1) Using RoundedRectangleBorder

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () {},
  child: Text("Button"),
)

(2) Using ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(3) Using ClipOval

ClipOval(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(4) Using ButtonTheme

ButtonTheme(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(5) Using StadiumBorder

RaisedButton(
  shape: StadiumBorder(),
  onPressed: () {},
  child: Text("Button"),
)

Answer 3:

You can simply use RaisedButton or you can use InkWell to get custom button and also properties like onDoubleTap, onLongPress and etc.:

new InkWell(
  onTap: () => print('hello'),
  child: new Container(
    //width: 100.0,
    height: 50.0,
    decoration: new BoxDecoration(
      color: Colors.blueAccent,
      border: new Border.all(color: Colors.white, width: 2.0),
      borderRadius: new BorderRadius.circular(10.0),
    ),
    child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
  ),
),

If you want to use splashColor, highlightColor properties in InkWell widget, use Material widget as the parent of InkWell widget instead of decorating the container(deleting decoration property).

Answer 4:

You can create a custom view and put it inside a GestureDetector for it to behave like a button. The benefit is that you can provide endless types of custom decoration (including making it round with specified radius) to the container.