How do i disable Container childs to expand? - flutter

Question

So i got a Container in a Scaffold (Material). But if i add a ElevatedButton as a child of this Container the ElevatedButton the Button Expands to the full size of the parent Container. How can i avoid it?
I don't know whether it's the fault of flutter installation or if it's on me.
Here's the code.
class Login extends StatefulWidget {
const Login({Key? key}) : super(key: key);
#override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
String status = "Status: OK";
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal,
appBar: AppBar(
backgroundColor: Colors.teal,
elevation: 0,
centerTitle: true,
automaticallyImplyLeading: false,
title: Text(status),
),
body: Center(
child: Column(
children: [
SubmitContainer(),
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
),
);
}
}
class InputContainer extends StatelessWidget {
const InputContainer({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: TextField(),
width: 200,
height: 200,
color: Colors.yellow,
);
}
}
class SubmitContainer extends StatelessWidget {
const SubmitContainer({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: SizedBox(
child: ElevatedButton(
child: Text("GO"),
onPressed: () {},
),
width: 300,
height: 50,
),
width: MediaQuery.of(context).size.width,
);
}
}
And the endresult looks like this:

Answer 1

When we use FittedBox it occupies the content width. Use FittedBox for Button.
Container(
child: SizedBox(
child: FittedBox(
child: ElevatedButton(
child: Text("GO"),
onPressed: () {},
),
),
width: 300,
height: 50,
),
width: MediaQuery.of(context).size.width,
);

Answer 2

Try wrapping your Container widget's child with a Center widget
This way even if the Container itself is wide, the content will have automatic width
Container(
child: Center(
child: //...
),
)
Check out this page from the documentation for more information
https://docs.flutter.dev/development/ui/layout/constraints#example-3

Answer 3

You did a mistake. Inside your container widget in SubmitContainer, you defined width: MediaQuery.of(context).size.width, that is why the elevated button stretched to match the full screen width. Just use do the following:
SizedBox(
child: ElevatedButton(
child: Text("GO"),
onPressed: () {},
),
width: 150,
height: 50,
);