aloisdeniel/spaces

logo

Spaces

https://img.shields.io/pub/v/spaces.svg https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat

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'),
    ],
);