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.

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.