Question 79040 in Flutter Question posted in
The official Flutter documentation can be found here.

Unable to change the width of an ElevatedButton in flutter

I am unable to reduce the width of ElevatedButton even though 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),
      primary: Color(0xff78048e),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
    ),
    child: Text(
      "CLICK ME",
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
),
Tags:

3

Answers


  1. 0

    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)),
    Login or Signup to reply.
  2. 0

    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),
               ),
             ),
    Login or Signup to reply.
  3. 0

    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:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search