Create a rounded corner button in Flutter

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"),
              )
    
Create a rounded button in Flutter

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"),
              )
    
Create a rounded button in Flutter

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,),
                  ),
                ),
              )
    
Create a rounded button in Flutter

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"),
              )
    
Create a rounded button with border color in Flutter

Conclusion

I hope you get an idea about how to Create a rounded button with border-radius in Flutter and If you have any question please add a comment below. 

You Will Like Also
Comments

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    x