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),
              ),
            ),
          )
        ],
      ),
    );

CodePudding user response：

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: () {},
),

CodePudding user response：

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

CodePudding user response：

You can use