how to change border radius of elevated button flutter

Question

I have created two buttons in a row using flutter. now I want to change border-radius o=f buttons. how can I do this properly? the picture shows the buttons I was created.

Widget lbsButton() => Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 80,
            height:50,
            child: ElevatedButton(
              onPressed: () {},
              child: Text('lbs'),
              style: ButtonStyle(
                
                backgroundColor: MaterialStateProperty.all<Color>(mainPurpleText),

              ),
              
            ),
          ),
          SizedBox(
            width: 10,
          ),
          SizedBox(
            width: 80,
            height:50,
            child: new ElevatedButton(
              onPressed: () {},
              child: Text('kg' , style:TextStyle(color:Colors.grey,fontSize:13),
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>( Colors.white),
              ),
            ),
          )
        ],
      ),
    );

I should note that using style on the widget is somewhat like using style in html tags. Similarly to the html recommendation of using CSS classes instead of style, in flutter you should prefer to use Themes and custom Widgets instead of styling individual widgets. — LFLFM, Apr 22 '22 at 07:16

score 6 · Answer 1 · answered Jan 26 '22 at 13:16

6

return ElevatedButton(
      onPressed: onPressed,
      child: Text('test'),
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            // Change your radius here
            borderRadius: BorderRadius.circular(16),
          ),
        ),
      ),
    );

answered Jan 26 '22 at 13:16

Stijn2210

812
6
14

thanks but when I add all these changes to my first button, as per the code my second button code became red. what should I do? buttons are in same row one after the other – Jan 26 '22 at 13:31

reza · Answer 2 · 2022-01-26T13:25:10.940

4

The elevated button widget has a shape property which you can use as shown in the below snippet.

ElevatedButton(
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all<Color>(mainPurpleText),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),

edited Jan 26 '22 at 13:25

answered Jan 26 '22 at 13:15

reza

1,354
1
7
25

how to add background color to same code – Jan 26 '22 at 13:24
ok. just added :) – reza Jan 26 '22 at 13:26
thanks but when I add all those changes to my first button, as per the code my second button code became red. what should I do? i need both to be one after the other – Jan 26 '22 at 13:29
what do you mean by code becomes red? – reza Jan 26 '22 at 13:31
I mean the code after size box. it showing errors – Jan 26 '22 at 13:33
just add `shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0), ), ),` to your `ButtonStyle` – reza Jan 26 '22 at 13:34

score 1 · Answer 3 · answered Oct 26 '22 at 10:31

You can apply ElevatedButton.stylefrom() on the "style" property of ElevatedButton.

ElevatedButton(       
      style: ElevatedButton.styleFrom(
         shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(40),
             ),
           ),
      onPressed: () {},
      child: Text('kg'),
    )

Md. Yeasin Sheikh · Answer 4 · 2022-01-26T13:37:06.113

0

You can use ButtonStyle and I think it is kind of similar Create a rounded button / button with border-radius in Flutter.

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
    borderRadius:
        BorderRadius.circular(18.0), // radius you want
    side: BorderSide(
      color: Colors.transparent, //color
    ),
  )),

edited Jan 26 '22 at 13:37

answered Jan 26 '22 at 13:14

Md. Yeasin Sheikh

54,221
7
29
56

thanks but when I add all this changes to my first button, as per the code , my second button code became red. what should I do? its on same row – Jan 26 '22 at 13:30
try `flutter clean` and rebuild the app, – Md. Yeasin Sheikh Jan 26 '22 at 13:36

how to change border radius of elevated button flutter

4 Answers4