Spacing design 8 rule

Generate Pleasant Visual Coherence

Creating a design that looks good and feels consistent is important. One simple way to achieve this is by following the 8pt spacing rule.

What is the 8 rule?

The idea behind the 8pt rule is straightforward. It suggests that all the measurements in your design – things like the width and height of elements, and the space between them – should be a multiple of 8. This means using values like 8, 16, 24, 32, and so on.

Why Use the 8 Rule?

Following this rule helps create a consistent rhythm and flow in your design. It makes spacing choices easier and leads to layouts that are unconsciously pleasant and harmonious for users.

Applying the 8 Rule in Flutter

In Flutter, you can easily use the 8pt rule for sizing and spacing. Widgets like SizedBox are perfect for adding specific amounts of space. You can even create custom helper widgets to make using multiples of 8 even simpler.

Example: A Simple AppSpacer Widget

Here's a basic example of a custom widget you could use:

class AppSpacer extends StatelessWidget {
  final double? width;
  final double? height;

  const AppSpacer._({Key? key, this.width, this.height}) : super(key: key);

  factory AppSpacer.p32() => const AppSpacer._(height: 32, width: 32);
  factory AppSpacer.p24() => const AppSpacer._(height: 24, width: 24);
  factory AppSpacer.p16() => const AppSpacer._(height: 16, width: 16);
  factory AppSpacer.p8() => const AppSpacer._(height: 8, width: 8);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
    );
  }
}

How to use the AppSpacer

Instead of SizedBox(width: 16), you can now use AppSpacer.p16(). This makes your code cleaner and reinforces the 8pt system throughout your project.

By sticking to multiples of 8 for dimensions and spacing, you can build apps with a strong visual structure that looks polished and professional.