Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do i disable Container childs to expand?

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: Google Pixel 3a XL API 23

like image 628
M2DT Avatar asked Nov 02 '25 01:11

M2DT


1 Answers

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,
      );
like image 89
nagendra nag Avatar answered Nov 03 '25 16:11

nagendra nag



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!