How to Create a rounded button / button with border-radius in Flutter - fluttercorner.com

Hello Guys, How are you all ? hope you all are fine. In this tutorial we are going to learn How to Create a rounded button / button with border-radius in Flutter.

In Flutter there is Always more than 1 way to make any thing in flutter. So In todays Tutorial We will Learn All Possible way to make button with border-radius in Flutter.

How to Create a rounded button / button with border-radius in Flutter.

We have Many Method to for rounded button / button with border-radius in Flutter. I am Providing here most of method here with Source Code And Example.

Create a Rounded button using RaisedButton

Here We can use the RaisedButton Widget. Raised Button Widget has shape property which we can utilise as shown in below code.

                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.black,
                  child: Text("RaisedButton"),
                  onPressed: () {},
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                ),

Method To Create a Rounded button using FlatButton

Here We can use the FlatButton Widget. FlatButton Widget has Also shape property which we can utilise as shown in below code.

                FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.red),
                  ),
                  onPressed: () {},
                  child: Text("FlatButton"),
                ),

How To Create a Rounded button using GestureDetector

We can also use GestureDetector Widget. GestureDetector Widget has Decoration Property. which we can utilise as shown in below code.

                Container(
                  height: 50.0,
                  child: GestureDetector(
                    onTap: () {},
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.black,
                        ),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Center(
                            child: Text(
                              "GestureDetector",
                              style: TextStyle(
                                color: Colors.black,
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),

Method To Create a Rounded button using ClipRRect

We can also use ClipRRect Widget. ClipRRect Widget has borderRadius Property. which we can utilise as shown in below code.

                ClipRRect(
                  borderRadius: BorderRadius.circular(40),
                  child: RaisedButton(
                    color: Colors.black,
                    onPressed: () {},
                    child: Text(
                      "ClipRRect",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),

I am Providing Full Source Code here of this my main.dart file Here. Here Is My File How to Create a rounded button / button with border-radius in Flutter

DEV Community