Which is efficient among `Padding` vs `SizedBox`?

Question

Background:

SizedBox class can be used to insert empty space between widgets, like SizedBox(height: 8), and also with Padding class using EdgeInsets class,

SizedBox cannot be used everywhere.

I know this, and also where ever it can be, its use is different than Padding,

But

Im interested in:

Using ListView.builder with each child wrapped in Padding(padding: EdgeInsets.symmetric(vertical: 4)),

vs

Using ListView.separated with SizedBox(height: 8) as separator,

Reason behind curiosity:

Padding has to create two(top and bottom) empty spaces, instead of one, as in the case of SizedBox,

The Real question:

If we ignore the cases where Padding can be used, but not SizedBox, then which one would be more efficient and recommended way to achieving empty space,

thanking you,

Answer 1

The thing you should take in consider is SizedBox Allow you applies constraints to it's child.

About empty spaces, they do the same thing literally. At most you'll have a nanosecond worth of difference, especially if both in your code was a const,

About the ListView.builder or ListView.separated, both have a use cases depend on what you want to do, Like separated Builder allow you to customize widget for each item, etc.

in case in your question, Use whatever fits you the best. The gain is so minimal you'll never ever notice a difference. So take what is clearer.

***EDIT: (In case someone come in the future)

after some experiences, there is one more thing we should take into consideration, padding creates a space that is included with its child, so in cases of buttons, IconButton, in common cases it would be better to use padding since this space will be clickable, and this will improve user experience.

Example:
instead of:

const Row(
        children: [
          /// some of widgets
          SizedBox(width: 8,),
          InkWell(
            child: Icon(Icons.arrow_drop_down),
          ),
          SizedBox(width: 8,),
        ],
      )

Use:

 const Row(
        children: [
          /// some of widgets
          InkWell(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 8),
              child: Icon(Icons.arrow_drop_down),
            ),
          ),
        ],
      )

Answer 2

I think it depends on your use case, but from experience. Sized Box is better and more performant than Padding for just an empty space.

Also depending on the use case, you might find it appropriate to make use of other widgets like Spacer. Spacer is best for creating an empty space in a Row. This is because you do not need to constrain its size but just optionally provide a flex value. This way, it becomes more useful than both Padding and SizedBox.