Home > Software engineering >  Unable to change the width of an ElevatedButton in flutter
Unable to change the width of an ElevatedButton in flutter

Time:12-18

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

CodePudding user response:

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

CodePudding user response:

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),
               ),
             ),
  • Related