无法更改 flutter 中 ElevatedButton 的宽度

Question

I am unable to reduce the width of ElevatedButton eventhough I've put it inside a SizedBox. Given below is my code:

SizedBox(
             width: 70.0,
             child: ElevatedButton(
               onPressed: () {},
               style: ElevatedButton.styleFrom(
                   padding:
                       EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
                   shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(20.0)),
                   primary: Color(0xff78048e)),
               child: Text(
                 "CLICK ME",
                 style: TextStyle(color: Colors.white, fontSize: 18),
               ),
             ),
           ),

Answer 1

you can set maximumSize property of the style which will change the size of the button

style: ElevatedButton.styleFrom(
             maximumSize: Size(maximumWidth,maximumHeight),
               padding:
                   EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(20.0)),
               primary: Color(0xff78048e)),

Answer 2

By default the minimum size of the elevated button is => Size(64, 36), use Size.zero to make button with no minimum size

Also check out the parent widget, it may forces child to take up a lot of width

ElevatedButton(
               onPressed: () {},
               style: ElevatedButton.styleFrom(
                    minimumSize: Size.zero,
                   padding:
                       EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),
                   shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(20.0)),
                   primary: Color(0xff78048e)),
               child: Text(
                 "CLICK ME",
                 style: TextStyle(color: Colors.white, fontSize: 18),
               ),
             ),

Answer 3

You are using padding EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0), which is forcing the button to have a large width.

Change

padding:  EdgeInsets.symmetric(horizontal: 40.0, vertical: 15.0),

to

padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),

---

According to docs ElevatedButton has default minimum size of Size(64, 36) . You can change this by overriding the minimumSize property inside style .

Example:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.symmetric(
    horizontal: 10.0, vertical: 10.0),
    minimumSize: const Size(30, 20), // 👈 Change this according to your requirement
  ),
  onPressed: () {},
  child: const Text("Click Me"),
),

Output: