/spaces

Defining global spacing constants for building consistent and responsive apps.

Primary LanguageDartMIT LicenseMIT

logo

Spaces

Defining global spacing constants for building consistent and responsive apps.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    spaces: <version>

Quick start

return MaterialApp(
    // Defining
    builder: (context, child) => Spacing(
        dataBuilder: (context) {
          final mediaQuery = MediaQuery.of(context);
          if (mediaQuery.size.width > 500) {
            return SpacingData.generate(30);
          }
          return SpacingData.generate(10);
        },
        child: child,
    ),
    home:Builder(builder: (context) {
        // Using
        final spacing = Spacing.of(context);
        return SpacedColumn.normal(
            padding: spacing.insets.all.semiBig,
            children: <Widget>[
                Text('hello'),
                Space.big(),
                Text('world'),
            ],
        );
      })
    ),
)

Usage

Configuring spacing

A Spacing widget should declare a global spacing configuration for your application.

return MaterialApp(
    builder: (context, child) => Spacing.fixed(
        data: SpacingData.generate(10.0), // This generates a set of spacing constants for your apps, from a base space of `10.0`.
        child: child,
    ),
    /// ...
)

Generate

By calling the Spacing.generate constructor, a set of constants are automatically generated from a single base value.

The generated values are :

  • extraSmall : value * 0.2
  • small : value * 0.4
  • semiSmall : value * 0.6
  • normal : value
  • semiBig : value * 1.5
  • big : value * 2.5
  • extraBig : value * 5.0
SpacingData.generate(10.0)

From spaces

If you want to define the various spacing values, you can use the

SpacingData.fromSpaces(
    extraSmall: 1.0,
    small: 2.0,
    semiSmall: 4.0,
    normal: 8.0,
    semiBig: 12.0,
    big: 20.0,
    extraBig: 100.0,
)

Responsive spacing

You can define the dataBuilder property of the Spacing constructor to generate a configuration from the given context.

Spacing(
    dataBuilder: (context) {
        final mediaQuery = MediaQuery.of(context);
        return SpacingData.generate(mediaQuery.size.width > 300.0 ? 20.0 : 10.0),
    },
    child: child,
)

Using constants

To access various spacing constants, simply use the Spacing.of(context) getter, or the context.spacing() extension method.

final spacing = Spacing.of(context);
// spacing.spaces.semiBig

Size variants

There are seven availables spacing constants : extraSmall, small, semiSmall, normal, semiBig, big, extraBig;

final spacing = Spacing.of(context);
return SizedBox(
    width: spacing.spaces.semiSmall,
);

Insets helpers

You have EdgeInsets presets available from <spacing>.insets.<selector>.<size>.

The available selectors are : all, horizontal, vertical, onlyLeft, onlyTop, onlyRight, onlyBottom, exceptLeft, exceptRight, exceptTop, exceptBottom.

final spacing = Spacing.of(context);
return Padding(
    padding: spacing.insets.exceptLeft.semiBig,
    child: Text('Hello'),
);

Widgets

Space

The Space widget uses gap under the hood to define a space in a Flex, Column, Row or Scrollable (such as ListView).

return Column(
    children: [
        Text('hello'),
        const Space.semiSmall(),
        Text('world'),
    ],
);

SpacedFlex / SpacedColumn / SpacedRow

Like Flex / Column / Row, but with additional padding and spaceBetween properties.

final spacing = Spacing.of(context);
return SpacedColumn.small(
    padding: spacing.insets.all.normal,
    children: [
        Text('hello'),
        Text('world'),
    ],
);