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

Admin 1
Viewed 165

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.

enter image description here

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

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

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
user_114525110

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"),
   ),
),
user_170237440

Try like this

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