Add Fixed Spacing with 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 p16 = 16.0; static const p20 = 20.0; static const p24 = 24.0; static const p32 = 32.0; static const p40 = 40.0; static const p48 = 48.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 gapW16 = SizedBox(width: Sizes.p16); const gapW20 = SizedBox(width: Sizes.p20); const gapW24 = SizedBox(width: Sizes.p24); const gapW32 = SizedBox(width: Sizes.p32); const gapW40 = SizedBox(width: Sizes.p40); const gapW48 = SizedBox(width: Sizes.p48); 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 gapH16 = SizedBox(height: Sizes.p16); const gapH20 = SizedBox(height: Sizes.p20); const gapH24 = SizedBox(height: Sizes.p24); const gapH32 = SizedBox(height: Sizes.p32); const gapH40 = SizedBox(height: Sizes.p40); const gapH48 = SizedBox(height: Sizes.p48); 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.'); ], ); } }

Also covered here:

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.