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