Why is the column taking full width of it's parent (Container)

user_4915866 0
Viewed 2099
  1. I have a column inside a container
  2. The width of the container is set to 300
  3. The column has a text child
  4. Now generally, the column width will be the width of it's widest child. In this case, it has just one text child and so the width of column should be the width of text child
  5. However, the column expands to the full width of the parent being 300 i.e. container parent with width of 300
class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Container(
            width: 300,
            color: Colors.orangeAccent,
            child: Column(
              // mainAxisSize: MainAxisSize.min,
              children: [
                Text('Hi', style: TextStyle(fontSize: 50)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
  1. We can observe the fact that the column is expanding to full width of it's parent by seeing in the image that the child is center aligned which is the default cross axis alignment.

enter image description here

I went through the container docs but could not figure out why it is happening. Can someone please explain as to why the column is taking full width of it's parent?

flutter-layout dart flutter
2 Answers

Column is taking full width of Container because Container forces it to do so. If you specify width of Container then Container will basically use ConstrainedBox under the hood with tight constraints for its child. In order words minWidth = 300 in your case.

If you want Column to be as narrow as possible you should wrap it with UnconstrainedBox widget, which will take Container's tight constraints for himself and make Column to have its "natural" size. If you still want column to be as tall as possible, you need to specify constrainedAxis: Axis.vertical property of UnconstrainedBox

user_20333940

To better understand how Container works here is the implementation for the widget which you can find in the flutter sources:

Container({
  Key? key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,
  this.transform,
  this.transformAlignment,
  this.child,
  this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(clipBehavior != null),
       assert(decoration != null || clipBehavior == Clip.none),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'To provide both, use "decoration: BoxDecoration(color: color)".',
       ),
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);

The interesting part is with the constraints property:

constraints =
  (width != null || height != null)
    ? constraints?.tighten(width: width, height: height)
      ?? BoxConstraints.tightFor(width: width, height: height)
    : constraints

As you can see if you give a value to the width and/or height properties it will apply a BoxConstraints to its children forcing your child widget Column to comply to this constraints.

Update: How the alignment property works ?

If you look in the source code for the Container widget you will find this in its build method.

Widget build(BuildContext context) {
  Widget? current = child;

  // ...

  if (alignment != null)
    current = Align(alignment: alignment!, child: current);

  // ...
}

It means that by providing a non-null alignment property your child widget will be wrapped inside an Align widget. Now let's take a look at the Align widget implementation, more precisely at its createRenderObject() method:

@override
RenderPositionedBox createRenderObject(BuildContext context) {
  return RenderPositionedBox(
    alignment: alignment,
    widthFactor: widthFactor,
    heightFactor: heightFactor,
    textDirection: Directionality.maybeOf(context),
  );
}

So by providing an Align widget it will create a RenderPositionedBox let's take a look at its implementation too throught the method performLayout():

@override
void performLayout() {
  final BoxConstraints constraints = this.constraints;
  final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;
  final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;

  if (child != null) {
    child!.layout(constraints.loosen(), parentUsesSize: true);
    size = constraints.constrain(Size(
      shrinkWrapWidth ? child!.size.width * (_widthFactor ?? 1.0) : double.infinity,
      shrinkWrapHeight ? child!.size.height * (_heightFactor ?? 1.0) : double.infinity,
    ));
    alignChild();
  } else {
    size = constraints.constrain(Size(
      shrinkWrapWidth ? 0.0 : double.infinity,
      shrinkWrapHeight ? 0.0 : double.infinity,
    ));
  }
}

And there it is you have some BoxConstraints applied to your child based on the maxWidth and maxHeight of its parent.

user_99423460
Related