Online Spacing Generator for Flutter

Using consistent spacing is a simple yet powerful way to improve the quality of your app as explained in this blogpost.

If you don’t want to add another dependency do your project, you can generate EdgeInset and SizedBox instances online.

Usage

Define your spaces.
Copy the generated content to your project
Use consistent spacing in your app.

Padding(
  padding: Paddings.allMedium,
  child: Column(
    children: [
      Text('Title'),
      Boxes.verticalLarge,
      Text('Body'),
      Boxes.verticalSmall,
      ElevatedButton(onPressed: () {}, child: Text('CTA'))
    ],
  ),
);

Generator

import 'package:flutter/material.dart';

abstract interface class Spaces {
  static const double xxSmall = 1.0;
  static const double xSmall = 2.0;
  static const double small = 4.0;
  static const double medium = 8.0;
  static const double large = 16.0;
  static const double xLarge = 32.0;
  static const double xxLarge = 64.0;
}

abstract interface class Paddings {

  // all paddings
  static const EdgeInsets allXxSmall = EdgeInsets.all(Spaces.xxSmall);
  static const EdgeInsets allXSmall = EdgeInsets.all(Spaces.xSmall);
  static const EdgeInsets allSmall = EdgeInsets.all(Spaces.small);
  static const EdgeInsets allMedium = EdgeInsets.all(Spaces.medium);
  static const EdgeInsets allLarge = EdgeInsets.all(Spaces.large);
  static const EdgeInsets allXLarge = EdgeInsets.all(Spaces.xLarge);
  static const EdgeInsets allXxLarge = EdgeInsets.all(Spaces.xxLarge);

  // horizontal paddings
  static const EdgeInsets horizontalXxSmall = EdgeInsets.symmetric(horizontal: Spaces.xxSmall);
  static const EdgeInsets horizontalXSmall = EdgeInsets.symmetric(horizontal: Spaces.xSmall);
  static const EdgeInsets horizontalSmall = EdgeInsets.symmetric(horizontal: Spaces.small);
  static const EdgeInsets horizontalMedium = EdgeInsets.symmetric(horizontal: Spaces.medium);
  static const EdgeInsets horizontalLarge = EdgeInsets.symmetric(horizontal: Spaces.large);
  static const EdgeInsets horizontalXLarge = EdgeInsets.symmetric(horizontal: Spaces.xLarge);
  static const EdgeInsets horizontalXxLarge = EdgeInsets.symmetric(horizontal: Spaces.xxLarge);

  // vertical paddings
  static const EdgeInsets verticalXxSmall = EdgeInsets.symmetric(vertical: Spaces.xxSmall);
  static const EdgeInsets verticalXSmall = EdgeInsets.symmetric(vertical: Spaces.xSmall);
  static const EdgeInsets verticalSmall = EdgeInsets.symmetric(vertical: Spaces.small);
  static const EdgeInsets verticalMedium = EdgeInsets.symmetric(vertical: Spaces.medium);
  static const EdgeInsets verticalLarge = EdgeInsets.symmetric(vertical: Spaces.large);
  static const EdgeInsets verticalXLarge = EdgeInsets.symmetric(vertical: Spaces.xLarge);
  static const EdgeInsets verticalXxLarge = EdgeInsets.symmetric(vertical: Spaces.xxLarge);

  // left paddings
  static const EdgeInsets leftXxSmall = EdgeInsets.only(left: Spaces.xxSmall);
  static const EdgeInsets leftXSmall = EdgeInsets.only(left: Spaces.xSmall);
  static const EdgeInsets leftSmall = EdgeInsets.only(left: Spaces.small);
  static const EdgeInsets leftMedium = EdgeInsets.only(left: Spaces.medium);
  static const EdgeInsets leftLarge = EdgeInsets.only(left: Spaces.large);
  static const EdgeInsets leftXLarge = EdgeInsets.only(left: Spaces.xLarge);
  static const EdgeInsets leftXxLarge = EdgeInsets.only(left: Spaces.xxLarge);

  // right paddings
  static const EdgeInsets rightXxSmall = EdgeInsets.only(right: Spaces.xxSmall);
  static const EdgeInsets rightXSmall = EdgeInsets.only(right: Spaces.xSmall);
  static const EdgeInsets rightSmall = EdgeInsets.only(right: Spaces.small);
  static const EdgeInsets rightMedium = EdgeInsets.only(right: Spaces.medium);
  static const EdgeInsets rightLarge = EdgeInsets.only(right: Spaces.large);
  static const EdgeInsets rightXLarge = EdgeInsets.only(right: Spaces.xLarge);
  static const EdgeInsets rightXxLarge = EdgeInsets.only(right: Spaces.xxLarge);

  // top paddings
  static const EdgeInsets topXxSmall = EdgeInsets.only(top: Spaces.xxSmall);
  static const EdgeInsets topXSmall = EdgeInsets.only(top: Spaces.xSmall);
  static const EdgeInsets topSmall = EdgeInsets.only(top: Spaces.small);
  static const EdgeInsets topMedium = EdgeInsets.only(top: Spaces.medium);
  static const EdgeInsets topLarge = EdgeInsets.only(top: Spaces.large);
  static const EdgeInsets topXLarge = EdgeInsets.only(top: Spaces.xLarge);
  static const EdgeInsets topXxLarge = EdgeInsets.only(top: Spaces.xxLarge);

  // bottom paddings
  static const EdgeInsets bottomXxSmall = EdgeInsets.only(bottom:Spaces.xxSmall);
  static const EdgeInsets bottomXSmall = EdgeInsets.only(bottom:Spaces.xSmall);
  static const EdgeInsets bottomSmall = EdgeInsets.only(bottom:Spaces.small);
  static const EdgeInsets bottomMedium = EdgeInsets.only(bottom:Spaces.medium);
  static const EdgeInsets bottomLarge = EdgeInsets.only(bottom:Spaces.large);
  static const EdgeInsets bottomXLarge = EdgeInsets.only(bottom:Spaces.xLarge);
  static const EdgeInsets bottomXxLarge = EdgeInsets.only(bottom:Spaces.xxLarge);

}

abstract interface class Boxes {

  // vertical boxes
  static const SizedBox verticalXxSmall = SizedBox(height: Spaces.xxSmall);
  static const SizedBox verticalXSmall = SizedBox(height: Spaces.xSmall);
  static const SizedBox verticalSmall = SizedBox(height: Spaces.small);
  static const SizedBox verticalMedium = SizedBox(height: Spaces.medium);
  static const SizedBox verticalLarge = SizedBox(height: Spaces.large);
  static const SizedBox verticalXLarge = SizedBox(height: Spaces.xLarge);
  static const SizedBox verticalXxLarge = SizedBox(height: Spaces.xxLarge);

  // horizontal boxes
  static const SizedBox horizontalXxSmall = SizedBox(width: Spaces.xxSmall);
  static const SizedBox horizontalXSmall = SizedBox(width: Spaces.xSmall);
  static const SizedBox horizontalSmall = SizedBox(width: Spaces.small);
  static const SizedBox horizontalMedium = SizedBox(width: Spaces.medium);
  static const SizedBox horizontalLarge = SizedBox(width: Spaces.large);
  static const SizedBox horizontalXLarge = SizedBox(width: Spaces.xLarge);
  static const SizedBox horizontalXxLarge = SizedBox(width: Spaces.xxLarge);

}