Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aloisdeniel/spaces
Defining global spacing constants for building consistent and responsive apps.
https://github.com/aloisdeniel/spaces
flutter responsive spacing ui
Last synced: 2 months ago
JSON representation
Defining global spacing constants for building consistent and responsive apps.
- Host: GitHub
- URL: https://github.com/aloisdeniel/spaces
- Owner: aloisdeniel
- License: mit
- Created: 2020-08-19T16:26:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-11T08:31:02.000Z (over 3 years ago)
- Last Synced: 2024-10-12T22:43:20.083Z (3 months ago)
- Topics: flutter, responsive, spacing, ui
- Language: Dart
- Homepage:
- Size: 90.8 KB
- Stars: 41
- Watchers: 4
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Spaces
Defining global spacing constants for building consistent and responsive apps.
## Install
Add the dependency to your `pubspec.yaml` :
```yaml
dependencies:
spaces:
```
## Quick start
```dart
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: [
Text('hello'),
Space.big(),
Text('world'),
],
);
})
),
)
```
# Usage
## Configuring spacing
A `Spacing` widget should declare a global spacing configuration for your application.
```dart
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`
```dart
SpacingData.generate(10.0)
```
### From spaces
If you want to define the various spacing values, you can use the
```dart
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.
```dart
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.
```dart
final spacing = Spacing.of(context);
// spacing.spaces.semiBig
```
### Size variants
There are seven availables spacing constants : `extraSmall`, `small`, `semiSmall`, `normal`, `semiBig`, `big`, `extraBig`;
```dart
final spacing = Spacing.of(context);
return SizedBox(
width: spacing.spaces.semiSmall,
);
```
### Insets helpers
You have `EdgeInsets` presets available from `.insets..`.
The available selectors are : `all`, `horizontal`, `vertical`, `onlyLeft`, `onlyTop`, `onlyRight`, `onlyBottom`, `exceptLeft`, `exceptRight`, `exceptTop`, `exceptBottom`.
```dart
final spacing = Spacing.of(context);
return Padding(
padding: spacing.insets.exceptLeft.semiBig,
child: Text('Hello'),
);
```
## Widgets
### Space
The `Space` widget uses [gap](https://pub.dev/packages/gap) under the hood to define a space in a `Flex`, `Column`, `Row` or `Scrollable` (such as `ListView`).
```dart
return Column(
children: [
Text('hello'),
const Space.semiSmall(),
Text('world'),
],
);
```
### SpacedFlex / SpacedColumn / SpacedRow
Like `Flex` / `Column` / `Row`, but with additional `padding` and `spaceBetween` properties.
```dart
final spacing = Spacing.of(context);
return SpacedColumn.small(
padding: spacing.insets.all.normal,
children: [
Text('hello'),
Text('world'),
],
);
```