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.
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.