how to change size and text color of the elevated buttons in flutter

Question

how to change the size and text colour of the button in this code. the left side image shows my implementation so far. I want it to be changed to the right side image buttons.

Widget lbsButton() => Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              //playSound(soundNumber);
            },
            child: Text('lbs'),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.deepPurple),
            ),
          ),
          SizedBox(
            width: 10,
          ),
          new ElevatedButton(
            onPressed: () {},
            child: Text('kg'),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.deepPurple),
            ),
          )
        ],
      ),
    );

Solution 1

If you want to enter the styles of the specific button that is ElevatedButton and its text, it could be as follows:

SizedBox( // Change the button size
   width: 100,
   height: 50,
   child: ElevatedButton(
      style: ElevatedButton.styleFrom( // ElevatedButton styles
          primary: Colors.deepPurple,
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10), // Some padding example
          shape: RoundedRectangleBorder( // Border
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red),
          ),
          [...]
       ),
       textStyle: TextStyle( // Text styles
          color: Colors.white,
          fontSize: 18,
          overflow: TextOverflow.ellipsis,
          [...]
       ),
       onPressed: () {},
       child: Text("lbs"),
   ),
),

Solution 2

Try like this

ElevatedButton(
            onPressed: () {},
            child: Text('kg',
                   style:TextStyle(color:Colors.black,fontSize:18),
                        ),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.deepPurple),
            ),
          );

Solution 3

You can try this also

 FlatButton(
            color: Colors.deepPurple[600],
            child: const Text('lbs'),
              textColor: Colors.white10,
            onPressed: () {},
          );

EDITED

Widget btn() => OutlinedButton(
      child: const Text(
        'lbs',
        style: TextStyle(color: Colors.white),
      ),
      style: OutlinedButton.styleFrom(
        backgroundColor: Colors.deepPurple[600],
      ),
      onPressed: () {},
    );

Solution 4

Use ElevatedButton.styleFrom

Like so:

ElevatedButton(
 style: ElevatedButton.styleFrom(
   textStyle: TextStyle(color: Colors.white),
   primary: Colors.purple,
   shape: RoundedRectangleBorder
     borderRadius: BorderRadius.circular(30),
   ),
 ),
);

Use primary to set the button color.

Use SizedBox to change the size.

Like so:

SizedBox(
 width: 30,
 height: 20,
 child: ElevatedButton(
  style: ElevatedButton.styleFrom(
   textStyle: TextStyle(color: Colors.white),
   primary: Colors.purple,
  ),
 ),
)

If you want the button to take the maximum width, use:

width: double.maxFinite

View more solutions

Comments

[Admin]

it works thank u. how to change sizes of the button

[Admin]

thank you how to change border-radius and size of the button

[Hardik Mehta]

You can wrap that button to SizedBox and add width and height. @DewmiMa

[Daniel Roldán]

@DewmiMa yep, i update my answer :)

[Admin]

also want to change border-radius

[Josteve]

I've added border to the first example, check it.