Docs
/
Theme
/
Space tokens

Space Tokens

When using spacing in your Mix, you'll often use the padding and margin attributes. To add consistency into your app, it's good to have the same spacing around it. For that, you can use space tokens.

Overlay of 16 dp margins on 360 dp breakpoint app screen

Each card above has a margin of 16px horizontally, which can be achieved like the following:

final mix = Mix(
  marginHorizontal.large,
);

Acessing the tokens globally

The space tokens can be accessed by using one of the following tokens.

  • $xsmall
  • $small
  • $medium
  • $large
  • $xlarge
  • $xxlarge
final mix = Mix(
  padding($medium), 
);

Customizing spaces

You can define your space tokens in your MixThemeData, like the following:

MixTheme(
  data: MixThemeData(
    space: MixThemeSpace(
      large: 16.0, // 16px
    ),
  ),
  child: ..;,
);

Now, when you call, padding.large, for example, you'll have a padding of 16px on all sides of the box.