CODEWITHSUNDEEP
flutter
E-Madd
E-Madd

Reputation: 4582

How to set or remove a button (RaisedButton) corner radius?

None of the Flutter buttons seem to provide a way to change the corner radius of the button rectangle. There's a shape property but I have no idea how to use it.

Upvotes: 8

Views: 6885

Answers (2)

Anandh Krishnan
Anandh Krishnan

Reputation: 6022

Since the left-sided buttons are deprecated use the recommended ones.

Deprecated     vs   Recommended

RaisedButton   -   ElevatedButton
OutlineButton  -   OutlinedButton
FlatButton     -   TextButton

ElevatedButton

 ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.white,
                shadowColor: Colors.black,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(0.0),
                    topLeft: Radius.circular(0.0),
                  ),
                ),
              ),
            ),

OutlinedButton

OutlinedButton(
   style: OutlinedButton.styleFrom(
      shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(18.0),
      ),
      side: BorderSide(width: 2, color: Colors.green),
   ),
   onPressed: () {},
   child: Text('Button'),
)

TextButton

 TextButton(
        child: Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          child: Text('Text here',
              style: TextStyle(
                  color: Colors.teal,
                  fontSize: 14,
                  fontWeight: FontWeight.w500)),
        ),
        style: TextButton.styleFrom(
          primary: Colors.teal,
          onSurface: Colors.yellow,
          side: BorderSide(color: Colors.teal, width: 2),
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(25))),
        ),
        onPressed: () {
          print('Pressed');
        },
      ),

Upvotes: 1

Raouf Rahiche
Raouf Rahiche

Reputation: 31386

You can change the radius from the shape property, and give it a RoundedRectangleBorder, here you can play with the border radius.

You will get the rounded corner only in topRight,topLeft and bottomRight in the below example:

       RaisedButton(
                  onPressed: () {},
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(25.0),
                      topLeft: Radius.circular(25.0),
                      bottomRight: Radius.circular(25.0),
                    ),
                  ),
                ),

Upvotes: 12

Related Questions