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.semiBigSize 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'),
],
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent