The Width of the Elevated Button is not reducing, it is coming in taking all the width on the screen.The parent widget is ListView.I have even tried to reduce it through ButtomTheme but still it is not working. I have added the code below. Everywhere I have seen the way to reduce the width is this way.But don’t know why it is not reducing the width
ListView(
children: [
Row(
children: [
RotatedBox(
quarterTurns: 3,
child: Padding(
padding: const EdgeInsets.only(right: 30.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontFamily: 'Pacifico'),
),
),
),
SizedBox(
width: 20,
),
Text(
'BRUXTER',
style: TextStyle(
fontSize: 30,
fontFamily: 'RockSalt',
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
SizedBox(
height: 50,
),
Form(
child: Column(
children: [
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Name',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
width: MediaQuery.of(context).size.width *
0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
],
>Solution :
You need to replace your ListView with Column
Column(
children: [
Row(
children: [
RotatedBox(
quarterTurns: 3,
child: Padding(
padding: const EdgeInsets.only(right: 30.0),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontFamily: 'Pacifico'),
),
),
),
SizedBox(
width: 20,
),
Text(
'BRUXTER',
style: TextStyle(
fontSize: 30,
fontFamily: 'RockSalt',
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
SizedBox(
height: 50,
),
Form(
child: Column(
children: [
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Name',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your Email',
hintStyle: TextStyle(color: Colors.white60),
),
),
TextFormField(
style: TextStyle(color: Colors.black, fontSize: 30),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your PassWord',
hintStyle: TextStyle(color: Colors.white60),
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
width: MediaQuery.of(context).size.width *
0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
],
)
