sleek_spacing 0.1.1

Uniformize your margins, paddings and gaps.

Uniformize your margins, paddings and gaps.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    sleek_spacing: <version>

Quick start

 SleekColumn(
    padding: SleekInsets.medium(),
    spaceBetween: SleekSpace.normal,
    children: <Widget>[
        Widget(),
        SleekGap.small(),
        Widget(),
        SleekGap.big(),
        Widget(),
    ],
)

Usage

Defining global spacing

SleekSpacing(
    data: SleekSpacingData(normal: 12),
    child: <your app>,
)

SleekSpacing(
    data: SleekSpacingData(
      extraSmall: 2.0,
      small: 6.0,
      normal: 12.0,
      medium: 24.0,
      big: 48.0,
      extraBig: 96.0,
    ),
    child: <your app>,
)

Updating global spacing

Spacing values can be updated from wherever in the tree. This may be usefull to be responsive : adapting margins and gaps when MediaQuery.size changes for example.

SleekSpacing.update(context, SleekSpacingData(normal: 24));

Accessing spaces

final spacing = SleekSpacing.of(context);
return SizedBox(width: spacing.small);

Widgets

Gap

You can add an horizontal or vertical gap between other widgets.

Column(
  children: <Widget>[
    Text('Hello'),
    SleekGap.vertical(SleekSpace.small);
    Text('World'),
  ],
),

Row(
  children: <Widget>[
    Text('Hello'),
    SleekGap.horizontal(SleekSpace.small);
    Text('World'),
  ],
),

If your gap is in a SleekColumn, SleekRow or SleekWrap, it can deduce the current axis and makes its needed declaration more concise.

SleekColumn(
  children: <Widget>[
    Text('Hello'),
    SleekGap.small();
    Text('World'),
  ],
),

SleekRow(
  children: <Widget>[
    Text('Hello'),
    SleekGap.small();
    Text('World'),
  ],
),

Padding

SleekPadding(
  vertical: SleekSpace.small,
  left: SleekSpace.medium,
  child: <child>
)

SleekPadding.small(
  child: <child>
)

SleekPadding.small(
  sides: SleekSides.notRight, // All but right
  child: <child>
)

SleekPadding.small(
  sides: SleekSides.vertical + SleekSides.left, // All but right
  child: <child>
)

SleekPadding.small(
  sides: SleekSides.all - SleekSides.bottom, // All but bottom
  child: <child>
)

Column

A SleekColumn is like a Column with padding and spaceBetween additional properties.

 SleekColumn(
    padding: SleekInsets.medium(),
    spaceBetween: SleekSpace.normal,
    children: <children>,
)

Row

A SleekRow is like a Row with padding and spaceBetween additional properties.

 SleekRow(
    padding: SleekInsets.medium(),
    spaceBetween: SleekSpace.normal,
    children: <children>,
)

Wrap

A SleekWrap is like a Wrap with a padding additional property.

 SleekWrap(
    padding: SleekInsets.medium(),
    spacing: SleekSpace.normal,
    runSpacing: SleekSpace.normal,
    children: <children>,
)