3

In the Container widget in flutter,

What is the difference between giving it a fixed height and width AND providing it BoxConstraints for the constraints property?.

Is it either providing a width + height or constraints? Can they be both provided at the same time? What is the difference?

I also looked at the official docs which refers to the Container widget and in there, right under the heading called Layout Behavior they mention what happens when different combinations of width and height and constraints do? (But I do not understand how they differ)

gfit21x
  • 141
  • 9

1 Answers1

4

TLDR: They do the same thing

Long Answer: If you take a look at the Container's code you could see that the width and height you've provided actually gets turned into a BoxConstraints. Container will use that BoxConstraints to set its constraints. Here's a October 2021 snippet of the Container's constructor:

  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,
  }) : // *Removed the asserts it made to make this snippet shorter
       // Important part is here
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);

Here is a portion of the Container's build method:

// Parts of the code removed to shorten snippet
if (constraints != null)
  current = ConstrainedBox(constraints: constraints!, child: current);
// Parts of the code removed to shorten snippet
return current!;
CoderUni
  • 5,474
  • 7
  • 26
  • 58
  • In `BoxConstrains`, there are properties called `minWidth` and `maxWidth` etc... right? But when giving a `width` to a `Container`, we only provide one single `width` right? If they both are the same how come we can only set one `width` and in `BoxConstraints` there exists two properties called `minWidth` and `maxWidth`? (This is not clear to me) – gfit21x Oct 19 '21 at 14:23
  • @gfit21x They added the width and height attributes for simplicity. Most of the time, there is no need to set any min and max width. Using a `BoxConstraint` will lengthen the amount of code we have to type just to set the width and height of the container. – CoderUni Oct 19 '21 at 14:28
  • 4
    @gfit21x When you set `height: 20` it gets converted to `minHeight: 20, maxHeight: 20` (tight constraint). – WSBT Oct 19 '21 at 16:04
  • I got a confused a bit more now cause I was on a call with someone I know who does flutter and when I asked the same question from him he said "`height` + `width` sets the dimensions of the parent widget whereas `constraints` tell child widgets how they should be positioned".... So they aren't exactly the same thing though the answer mentions that they are? – CodeR_Ax20 Oct 20 '21 at 02:44