CODEWITHSUNDEEP
flutter
Tree
Tree

Reputation: 31391

Sized box vs padding for distances in columns and rows

Is there a performance difference between SizedBox and Padding when applying distance inside Column and Row.

Here is an example:

        child: Column(
          children: <Widget>[
            SizedBox(
              height: 30.0,
            ),
            ProfileAvatar(
              photoUrl: vo.photoUrl,
              height: 90.0,
            ),

or this

        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 30.0),
            ),
            ProfileAvatar(
              photoUrl: vo.photoUrl,
              height: 90.0,
            ),

Which one should be preferred, or recommended by the flutter team?

Upvotes: 20

Views: 11882

Answers (3)

CircleOnCircles
CircleOnCircles

Reputation: 4414

I think SizedBox make code easier to read by flatten nested lines of code.

Upvotes: 16

Pitos
Pitos

Reputation: 867

As Remi said, it does not really matter in your case, but if you decide to adjust only single or combination of left, right, top or bottom offsets, then wrapping a widget with Padding makes more sense.

Padding insets its child (adds an empty space to edges of its child without extending the child).

SizedBox creates a fixed size box, and its child will extend to the specified width and height.

Upvotes: 4

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277527

SizedBox win. As it only applies constraints to it's child.

But considering they both don't have a child, they do the same thing litteraly. At most you'll have a nanosecond worth of difference/ That is especially true considering both syntaxes in your example will be instantiated as "const". Which abort the following rebuild.

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

Upvotes: 31

Related Questions