Using SizedBox — .height and .width Extensions Changed Everything

In Flutter, we all love the simplicity of adding space with SizedBox. But let’s be real — constantly writing:

SizedBox(height: 20),
SizedBox(width: 10),

over and over again can get tedious.

What if you could write just this?

20.height
10.width

🔧 The Magic: Extension on num

With Dart extensions, we can attach new behavior to existing types. Here’s the extension that changes how you write spacing forever:

extension EmptySpace on num {
  SizedBox get height => SizedBox(height: toDouble());
  SizedBox get width => SizedBox(width: toDouble());
}

Now, any number (int or double) can magically produce a SizedBox.

🌟 Why This Is Awesome

✅ Less boilerplate — no more typing SizedBox everywhere ✅ More readable — 20.height clearly communicates intent ✅ Reusable — works across your entire codebase once imported

💡 Example in Practice

Instead of:

Column(
  children: [
    Text('Hello'),
    SizedBox(height: 16),
    Text('World'),
  ],
)

You can now write:

Column(
  children: [
    Text('Hello'),
    16.height,
    Text('World'),
  ],
)

Isn’t that cleaner?

🏗 How to Use

1️⃣ Add the extension somewhere in your project, like extensions/empty_space.dart.

2️⃣ Import it where needed:

import 'package:your_app/extensions/empty_space.dart';

3️⃣ Enjoy cleaner Flutter layouts!

🚀 Final Thoughts

Sometimes it’s the smallest tweaks that have the biggest impact on developer happiness. With just a few lines of Dart code, you can transform how you write UIs every day.

If you liked this tip, follow me for more Flutter hacks and clean code practices!