spaces2

Description:

spaces2

Spaces #






Defining global spacing constants for building consistent and responsive apps.
Install #
Add the dependency to your pubspec.yaml :
dependencies:
spaces: <version>
copied to clipboard
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'),
],
);
})
),
)
copied to clipboard
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,
),
/// ...
)
copied to clipboard
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)
copied to clipboard
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,
)
copied to clipboard
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,
)
copied to clipboard
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
copied to clipboard
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,
);
copied to clipboard
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'),
);
copied to clipboard
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'),
],
);
copied to clipboard
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'),
],
);
copied to clipboard