Flutter: White space coming while using BoxConstraints

Question

White space coming in horizontal view, while giving max width to Container with BoxConstraints.

Versions

Flutter: 3.3.0

Dart: 2.18.0

My code

return Scaffold(
  body: Container(
    decoration: ...,
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Flexible(
          flex: 1,
          child: Container(
            padding: const EdgeInsets.all(10.0),
            child: Image.asset(
              'assets/logo/logo.png',
              width: 300,
            ),
          ),
        ),
        Flexible(
          flex: 2,
          child: Card(
            shape: ...,
            elevation: 8.0,
            child: Container(
              constraints: const BoxConstraints(
                maxWidth: 500,
              ),
              height: 400,
              child: ListView(
                padding: const EdgeInsets.all(40),
                children: [
                  Form(
                    key: _formKey,
                    child: Column(
                      children: [
                        ...
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

Screen short:

Horizontal view, white space coming on right side

Vertical view

score 1 · Accepted Answer · answered Sep 01 '22 at 09:28

1

Just set the outer Container width to the screen width wit MediaQuery.of(context).size.width or even easier to double.infinity. It's going to be like the following:

    return Scaffold(
      body: Container(
        decoration: ...,
        width: double.infinity,
        padding: const EdgeInsets.all(16.0),

answered Sep 01 '22 at 09:28

lepsch

8,927
5
24
44

I don’t want to set infinity width. Want to set maximum width. – parth Sep 01 '22 at 11:16
Infinity is going to be the maximum in Flutter. As you can see in the screenshot the `Container` is properly centered. If infinity wasn't the maximum you would not be able to see the centered `Container` as it is going to be out of sight. – lepsch Sep 01 '22 at 11:19
I want to set custom max width, not infinity. – parth Sep 01 '22 at 11:37
Are you talking about the outer `Container` or the inner one with `BoxConstraints` applied? The change is in the outer one, not the inner one. The constraint should still be there in the inner `Container`. – lepsch Sep 01 '22 at 13:39
The inner one, basically i dont want my card to stretch too much in big screen. – parth Sep 01 '22 at 15:52
Just change the outer one like I said. Don’t change the inner one. – lepsch Sep 01 '22 at 16:57

Flutter: White space coming while using BoxConstraints

1 Answers1