Create a rounded button / button with border-radiu

Question

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

Answer 1

You can always use material button if you are using Material App as your main Widget.

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
    shadowColor: Colors.lightBlueAccent.shade100,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){//Actions here//},
      color: Colors.lightBlueAccent,
      child: Text('Log in', style: TextStyle(color: Colors.white),),
    ),
  ),
)

Answer 2

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). Read why? here.

Answer 3

If anybody is looking for complete circular button than I achieved it this way.

Center(
            child: SizedBox.fromSize(
              size: Size(80, 80), // button width and height
              child: ClipOval(
                child: Material(
                  color: Colors.pink[300], // button color
                  child: InkWell(
                    splashColor: Colors.yellow, // splash color
                    onTap: () {}, // button pressed
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.linked_camera), // icon
                        Text("Picture"), // text
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )

Answer 4

In Flutter Container() widget use for styling your widget.Using Container() widget you can set border or rounded corner of any widget

If you want to set any type of styling & set decoration put that widget into the Container() widget, that provide many property to decoration.

Container(
  width: 100,
  padding: EdgeInsets.all(10),
  alignment: Alignment.center,
  decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.circular(30)), // make rounded corner
  child: Text("Click"),
)

Answer 5

You can use shape for FlatButton and RaisedButton.

for rounded button:

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

for square button:

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

Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new 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: new RoundedRectangleBorder(
            borderRadius: new 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 6

You can use the RaisedButton Widget. Raised Button Widget has shape property which you can utilise as shown in below snippet.

 RaisedButton(
          child: Text("Press Me"),
          onPressed: null,
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
        )