index.md

The Gap Widget

Did you know?

You can easily add gaps inside Flex widgets such as Columns and Rows or scrolling views.

Just install the gap package, and replace all those pesky SizedBoxes!

---

When to Choose Gap vs SizedBox

Note that Gap(x) is a valid substitute for both SizedBox(width: x) and SizedBox(height: x), because it works along the main axis of the parent widget, and its syntax is shorter.

But of course, it's a 3rd-party package that adds an extra dependency to your project.

If you feel it's not justified, don't use it. Again, SizedBox is just fine.

Constant Gap Widgets with SizedBox

In my apps, I prefer to declare a bunch of constant sizes and widgets:

/// Constant sizes to be used in the app (paddings, gaps, rounded corners etc.)
class Sizes {
  static const p4 = 4.0;
  static const p8 = 8.0;
  static const p12 = 12.0;
  ...
  static const p64 = 64.0;
}

/// Constant gap widths
const gapW4 = SizedBox(width: Sizes.p4);
const gapW8 = SizedBox(width: Sizes.p8);
const gapW12 = SizedBox(width: Sizes.p12);
...
const gapW64 = SizedBox(width: Sizes.p64);

/// Constant gap heights
const gapH4 = SizedBox(height: Sizes.p4);
const gapH8 = SizedBox(height: Sizes.p8);
const gapH12 = SizedBox(height: Sizes.p12);
...
const gapH64 = SizedBox(height: Sizes.p64);

Then, in my widgets, I can use them like this:

class SomeWidget extends StatelessWidget {
  const SomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Text('Spacing is a good idea in UX design.'),
        gapH16,
        Text('It makes your UI less cluttered.'),
        gapH16,
        Text('So be generous with spacing in your apps.');
      ],
    );
  }
}

---

Found this useful? Show some love and share the original tweet 🙏

---

Previous	Next
App Development workflow in 6 steps	Simplified Flutter App Localization