Styles
Type-safe Dart bindings of CSS properties.
The Styles utility can be used to write type-safe css styles in Dart.
You can construct a Styles object using one of its constructors, which semantically group related
css properties. For example, the .background group gives you the set of css properties related to the background style, like color, position or size.
You have access to the following groups and properties:
Groups various css properties related to styling the background of an element.
const Styles.background({
Color? color,
BackgroundAttachment attachment,
BackgroundClip? clip,
ImageStyle? image,
BackgroundOrigin? origin,
BackgroundPosition? position,
BackgroundRepeat? repeat,
BackgroundSize? size,
})
Raw Styles
If you want to work with raw CSS properties or need to use a property that is not supported by the
current style groups, use the Styles.raw() method and provide a map of
properties and values:
const myStyle = Styles.raw({
'color': 'blue',
'some_advanced_css_property': 'special_value',
});
Chaining Styles
You can chain multiple style group calls like this:
final myStyle = Styles()
.text(color: Colors.red)
.background(color: Colors.blue);
Note that this does not produce a constant value. Alternatively you can use the Styles.combine() method to get the same
value as a constant:
const myStyle = Styles.combine([
Styles.text(color: Colors.red),
Styles.background(color: Colors.blue),
]);
Reusing Styles
Finally, you can store styles in variables and mix'n'match:
const redText = Styles.text(color: Colors.red);
const redBlueTest = Styles.combine([
redText,
Styles.background(color: Colors.blue),
]);
const redGreenTest = Styles.combine([
redText,
Styles.background(color: Colors.green),
]);