spaces 0.5.0 copy "spaces: ^0.5.0" to clipboard
spaces: ^0.5.0 copied to clipboard

Defining global spacing constants for building consistent and responsive apps.

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'),
    ],
);
18
likes
130
points
74
downloads

Publisher

verified publisheraloisdeniel.com

Weekly Downloads

Defining global spacing constants for building consistent and responsive apps.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter, freezed_annotation, gap

More

Packages that depend on spaces