Width of my ElevatedButton is not reducing - flutter

Question

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: () {},
),
)
],

Answer 1

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: () {},
),
)
],
)

Answer 2

Please refer to below code
Replace width with margin in Container widget
Container(
// Replace width with margin
margin: EdgeInsets.symmetric(horizontal: 80.0,),
// width: MediaQuery.of(context).size.width *
// 0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
Complete code
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return 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(
// Replace width with margin
margin: EdgeInsets.symmetric(
horizontal: 80.0,
),
// width: MediaQuery.of(context).size.width *
// 0.5, // Will take 50% of screen space
child: ElevatedButton(
child: Text('Go to screen two'),
onPressed: () {},
),
)
]);
}
}

Answer 3

Instead of using Column, I would actually recommend staying with ListView for performance reasons in most cases.
You could also fix this issue by wrapping the Container in a Center widget (or an Align if you want a different alignment than centered).
These widgets provide loose constraints to their children so they can be any size they want, but no larger than the parent, which is exactly what you want in this case.
It wasn't working in your case, because the ListView forces children to take up the entire width, so what size the direct children want to take up is ignored.