How to replace SizedBox with compile-time constants for better performance

One very common use case for SizedBox is when adding a gap between widgets inside a Row or Column.

In practice, this often leads to code that looks like this:

Column(
  children: const [
    Text('Spacing is a good idea in UX design.'),
    SizedBox(height: 12),
    Text('It makes your UI less cluttered.'),
  ]
)

or like this:

Row(
  children: [
    const Text('Image Preview:'),
    const SizedBox(width: 12),
    CachedNetworkImage(imageUrl: product.imageUrl),
  ]
)

There’s nothing wrong with the code above.

However, it’s very easy to forget the const modifier when needed.

And having to type SizedBox(height: someValue) many times over is a bit too verbose.

So here’s a little tip to improve things.

Defining gaps as const widgets

In a separate file, we can define all the SizedBoxes we need as compile time constants, using multiples of 4 pixels:

// gaps.dart 
const gapH4 = SizedBox(height: 4);
const gapH8 = SizedBox(height: 8);
const gapH12 = SizedBox(height: 12);
...
const gapH64 = SizedBox(height: 64);
 
const gapW4 = SizedBox(width: 4);
const gapW8 = SizedBox(width: 8);
const gapW12 = SizedBox(width: 12);
...
const gapW64 = SizedBox(width: 64);

Then, we can use them whenever we need:

// don't forget to import gaps.dart!
 
Column(
  children: const [
    Text('Spacing is a good idea in UX design.'),
    gapH12,
    Text('It makes your UI less cluttered.'),
  ]
)
 
Row(
  children: [
    const Text('Image Preview:'),
    gapW12,
    CachedNetworkImage(imageUrl: product.imageUrl),
  ]
)