Flutter Container Layout behavior

Question

when i read the Container layout behavior of Container document:

If the widget has no child, no height, no width, no constraints, and the parent provides unbounded constraints, then Container tries to size as small as possible.

so i write some code like below ,i think the second container should be as small as possible,but it fill the application’s content area (the entire screen) ，why?

class ContainerWithScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
  title: 'Container with scaffold',
  home: Scaffold(
    body: Container(
      color: Colors.blue,
      height: double.infinity,// provides unbounded height constraints for the child container
      width: double.infinity,// provides unbounded width constraints for the child container
      child: new Container(
        color: Colors.white,
      ),
    ),
  ),
);
}
}

If one of the answers solves your problem then please don't forget to accept it as a solution. https://stackoverflow.com/help/someone-answers. Thanks! And as I already said - I think diegoveloper has earned the trophy. — Soundbytes, Oct 29 '18 at 11:03

score 2 · Answer 1 · answered Oct 26 '18 at 07:08

You set a height and width, try using UnconstrainedBox

      Container(
                color: Colors.blue,
                height: double
                    .infinity, // provides unbounded height constraints for the child container
                width: double
                    .infinity, // provides unbounded width constraints for the child container
                child: UnconstrainedBox(
                  child: new Container(
                    color: Colors.red,
                  ),
                ),
              ),

More info : https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html

may I ask you to take a look at a flutter related question here : https://stackoverflow.com/questions/60539378/flutter-cannot-use-flexible-inside-padding-for-text-wrapping-purpose ? — Istiaque Ahmed, Mar 05 '20 at 07:21

Soundbytes · Answer 2 · 2018-10-26T10:36:27.057

To show what is going on here I have extended your code example with a helper function that echoes the box constraints of the Container widgets:

class ContainerWithScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Container with scaffold',
      home: Scaffold(
        body: printConstraints(
          remark: 'outer',
          context: context,
          child: Container(
            color: Colors.blue,
            height: double.infinity, 
            width: double.infinity, 
            child: printConstraints(
              remark: 'inner',
              context: context,
              child: Container(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Widget printConstraints({String remark, Widget child, BuildContext context,}) {
  return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
    print('$remark - $constraints');
    return child;
  });
}

when running the app I get:

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(w=961.5, h=552.9)

With the height and width arguments removed from the outer container the result is:

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)

You obviously did not remove the constraints. Instead they are set to the max values which is the opposite of the intended result.

Lastly I wrapped the inner Container within an UnconstrainedBox and finally got the desired result:

I/flutter (13029): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (13029): inner - BoxConstraints(unconstrained)

The screen is now filled with the outer blue Container. (Please note: this answer is only meant to provide additional information. diegoveloper's answer already is the proper solution to the question.)

thanks for your reply, you provide a useful information to me! — lgw150, Oct 26 '18 at 12:16

score 0 · Answer 3 · answered Jun 22 '20 at 23:15

You are applying the wrong rule

If the widget has no child, no height, no width, no constraints, and the parent provides unbounded constraints, then Container tries to size as small as possible.

This rule does not apply since scaffold provides constraint for the outer container, and by setting the width and height to infinity in outer container, you are setting constraint for the inner container to be the same as the constraint scaffold sets for the outer container.Since there's parent constraint exist so the correct rule for rendering the size of inner container should be.

If the widget has no child, no height, no width, no constraints, and no alignment, but the parent provides bounded constraints, then Container expands to fit the constraints provided by the parent.

So the inner container will expand to fit its parent

Flutter Container Layout behavior

3 Answers3