Question 232039 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – In Column/Row, should we use Padding or SizedBox?

I was wondering what is the best choice regarding performances and code mainteanability when creating Column or Row widgets.

For example, what is the best option:

Column(
    children: [
        MyWidget(
            ...
        ),
        const SizedBox(height: 20),
        MyOtherWidget(
            ...
        ),
    ],
),

or

Column(
    children: [
        Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: MyWidget(
                ...
            ),
        ),
        MyOtherWidget(
            ...
        ),
    ],
),

It doesn’t look right to me to use padding as the first widget is not more responsible than the second one of the separator.

I prefer using SizedBox and it’s closer to what’s done with the "separatorBuilder" of list builders but I don’t know if there is any pitfall to this.

Or is it just a matter of preference?

Tags:

3

Answers


  1. 0

    In most cases, yes, a SizedBox. But padding is useful if the elements in your column are dynamic. That means e.g. you have the following structure:

    Container1(),
SizedBox1(),
Container2(),
SizedBox2(),
Container3(),

    When you press a button, you now want to remove Container2. But then you have the problem that the distance between Container1 and Container3 is twice as big. That means you would have to remove an additional SizedBox.

    With a padding you can simply remove Container2 without problems.

    Login or Signup to reply.
  2. 0

    In terms of performance, the impact of using SizedBox v/s Padding for spacing between widgets in a Column is generally negligible. you can choose the approach that best fits your design and maintainability preferences.

    When deciding between SizedBox and Padding for spacing between widgets in a Column layout, consider the following:

    Using SizedBox: Offers clear separation of widgets and spacing. Provides flexibility to adjust spacing. Introduces an extra widget in the tree.

    Using Padding: Localizes spacing control to specific widgets. Maintains a shallower widget tree. Has a closer coupling between widgets and spacing.

    Login or Signup to reply.
  3. 0

    Imagine you’re arranging some objects on a shelf. In Flutter, you’re arranging widgets on the screen. You have two options for adding some space (padding) between these widgets:

    Option 1 – Adding Space Directly:

    Think of this like putting a book on the shelf, then putting a small box next to it to create some space, and then adding another item. This is similar to your first code option:

      children: [
    MyWidget(),
    const SizedBox(height: 20),
    MyOtherWidget(),
  ],
)

    Option 2 – Wrapping with Padding:

    This is like taking the book, putting it on the shelf, and then sticking a little piece of padding behind it to push it away from the wall a bit. Then you put another item next to it without needing another separate piece of padding. This is similar to your second code option:

      children: [
    Padding(
      padding: const EdgeInsets.only(bottom: 20),
      child: MyWidget(),
    ),
    MyOtherWidget(),
  ],
)

    Which One is Better?

    If you want the same amount of space between multiple items, the first option is better. It’s like using the same-sized box to create the same space between all items.

    If you want different amounts of space for different items, the second option is better. It’s like putting a small piece of padding behind each item to create the space.

    So, the best choice depends on whether you want the same or different amounts of space between your widgets.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search