Flutter: SizedBox Vs Container, why use one instead of the other?

Question

When I start to think about those two components I find myself arguing about why should I use one instead of the other. Some questions that come to my mind:

What are the differences between a Container and SizedBox?
I understand that Container can have other parameters like padding or decoration, but if I will not use those, why should I use a SizedBox instead of a Container?
There are performance differences between them?

Herbert Poul · Accepted Answer · 2021-09-10T06:27:32.480

Small Update: When used for whitespace, there is now even a linter warning to prefer SizedBox instead of Container. The main advantage seems to be that SizedBox can be const and won't even create a new instance during runtime.

Thanks to the magic of open source, you don't have to guess too much.

Container is basically just a convenience widget which sometimes saves you to nest 4 other widgets. If you pass width/height into the Container:

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

Which will result in:

    if (constraints != null)
      current = ConstrainedBox(constraints: constraints, child: current);

And the ConstrainedBox in effect is pretty much the same as a SizedBox, just more flexible.

A SizedBox will do:

  @override
  RenderConstrainedBox createRenderObject(BuildContext context) {
    return RenderConstrainedBox(
      additionalConstraints: _additionalConstraints,
    );
  }

  BoxConstraints get _additionalConstraints {
    return BoxConstraints.tightFor(width: width, height: height);
  }

ie. It is effectively the same. If you only use Container for width/height there might be a very minor minor negligible performance overhead. but you most certainly will not be able to measure it.. But I would still recommend SizedBox because it's way clearer. imho.

so regarding to this question (link), I would like to know which one is preferable for an empty placeholder between the two that they won't need any parameter? https://stackoverflow.com/q/57703182/5060513 — Taufik Nur Rahmanda, Aug 29 '19 at 07:53
Imho, don't worry about, use whatever seems right for the situation. It is practically impossible that an empty Container will ever be a performance problem. So use whatever comes more natural. I personally use Container() when I just want to hide something e.g. for loading (which basically only occurs while prototyping when i'm to lazy for loading indicators, etc.). If I want to have a specific size, i use `SizedBox`. Lately i've even been using `SizedBox` in place of paddings to separate items in `Column` or `Row`.. ymmv — Herbert Poul, Aug 29 '19 at 11:17

Marcelo Glasberg · Answer 2 · 2020-09-15T00:24:47.650

46

I'd like to add that SizedBox is not only simpler, but it also can be made const, while Container cannot. This may or may not be something you need.

If you need a box with color you cannot use SizedBox. But https://pub.dev/packages/assorted_layout_widgets has the Box widget, which is something between a SizedBox and a Container: You can have color and it can be made const. Note I am the author of this package.

edited Sep 15 '20 at 00:24

answered Jan 04 '20 at 20:14

Marcelo Glasberg

29,013
23
109
133

1

Could you explain the benefit of `const` in your build function? Or point to any resources explaining the benefit of it? Thanks. – realappie Oct 18 '20 at 19:56
42

Sure: Const objects are final/immutable and created in compile time. So you don't waste time creating them. Also, all const objects of the same type with the same parameters are the same instance. So you don't waste memory creating more than one of them. In other words, const objects make your program faster and more memory efficient. – Marcelo Glasberg Oct 18 '20 at 20:49
2

Wow thanks for taking the time and explaining this! I will be using `const` in my widget trees more often now. – realappie Oct 19 '20 at 22:21
2

Also, I was reading only yesterday, that flutter knows if an element is const so can skip over that in a rebuild. – Ian Apr 22 '21 at 09:46
CONST absolutely does not give any kind of speed increase. I have done extensive testing on this. Not sure if it saves memory though. – EJ Thayer Dec 30 '21 at 14:49
1

@EJThayer You don't need to create a const object, because it's already created when the app starts. So yes, it increases speed, unless you think creating objects takes no time. However, creating an object is very fast, so the speed increase should be small and, depending on the context, difficult to measure, that's for sure. – Marcelo Glasberg Jan 04 '22 at 15:30

score 8 · Answer 3 · answered Mar 01 '22 at 08:22

SizedBox() is a widget for giving some constant height or width between two widgets. It does not contain any decorative properties just like color, borderRadius etc.

On the other hand Container() is a widget that any person can modify according to his/her needs.

Just go through properties of both widgets you will see a huge difference between them.

score 1 · Answer 4 · answered Feb 23 '22 at 13:07

SizedBox and Container creates a RenderObject. The RenderObject lives in the render tree and some computations are performed on it, even if it paints nothing on the screen.

We can do better, we can have a widget which does not create a RenderObject, while being still valid. The Nil widget is the minimal implementation for this use case. It only creates an Element and does nothing while it's building. Because the optimal way to use it, is to call const Nil(), it also comes with a nil constant that you can use everywhere (which is a const Nil()).

Not to sure if you answered the question. Maybe better as an comment to an answer above. But I did find your answer interesting and I learned something. — GW168, May 24 '22 at 14:07

Flutter: SizedBox Vs Container, why use one instead of the other?

4 Answers4

Linked