CODEWITHSUNDEEP
flutter
user17970363
user17970363

Reputation:

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

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

Upvotes: 3

Views: 2726

Answers (4)

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12673

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

Upvotes: 2

Daniel Rold&#225;n
Daniel Rold&#225;n

Reputation: 1556

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

Upvotes: 2

Hardik Mehta
Hardik Mehta

Reputation: 2425

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

Upvotes: 1

Masum Billah Sanjid
Masum Billah Sanjid

Reputation: 1189

Try like this

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

Upvotes: 1

Related Questions