Create a rounded corner button in Flutter

December 22, 2019

620

There are multiples ways to implement round corner button in the Flutter

RaisedButton with border radius

The easiest way to add round button in flutter is use raised button with shape property to set radius.

    
        RaisedButton(
                onPressed: () {},
                color: Colors.amber,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                child: Text("Click This"),
              )

Flat button with border radius

Like the raisedbutton you can set shape property to flat button also

    
        FlatButton(
                onPressed: () {},
                color: Colors.amber,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                child: Text("Click This"),
              )

Convert container to button

In Flutter you can wrap widget inside the GestureDetector widget and it contain different property to handle tap, double tap etc.

    
        GestureDetector(
                onTap: () {},
                child: Container(
                  width: 100,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.blue),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Click",textAlign: TextAlign.center,),
                  ),
                ),
              )

Change border color and width of button

In the RoundedRectangleBorder class containt property called side and you can set width and color using that

    
        RaisedButton(
                onPressed: () {},
                color: Colors.amber,
                shape: RoundedRectangleBorder(
                    side: BorderSide(color: Colors.red,width: 2),
                    borderRadius: BorderRadius.circular(10)),
                child: Text("Click This"),
              )