---
title: Styles
description: 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:

<Tabs defaultValue="background" values={[
{label: 'Background', value: 'background'},
{label: 'Text', value: 'text'},
{label: 'Box', value: 'box'},
{label: 'FlexBox', value: 'flexbox'},
{label: 'FlexItem', value: 'flexItem'},
{label: 'Grid', value: 'grid'},
{label: 'GridItem', value: 'gridItem'},
{label: 'List', value: 'list'}
]}
>
<TabItem value="background">

Groups various css properties related to styling the background of an element.

```dart
const Styles.background({
  Color? color,
  BackgroundAttachment attachment,
  BackgroundClip? clip,
  ImageStyle? image,
  BackgroundOrigin? origin,
  BackgroundPosition? position,
  BackgroundRepeat? repeat,
  BackgroundSize? size,
})
```

</TabItem>
<TabItem value="text">

Groups various css properties related to styling text.

```dart
const Styles.text({
  Color? color,
  TextAlign? align,
  FontFamily? fontFamily,
  FontStyle? fontStyle,
  Unit? fontSize,
  FontWeight? fontWeight,
  TextDecoration? decoration,
  TextTransform? transform,
  Unit? indent,
  Unit? letterSpacing,
  Unit? wordSpacing,
  Unit? lineHeight,
  TextShadow? shadow,
  TextOverflow? overflow,
  WhiteSpace? whiteSpace,
})
```

</TabItem>
<TabItem value="box">

Groups various css properties related to the css box model.

```dart
const Styles.box({
  EdgeInsets? padding,
  EdgeInsets? margin,
  Display? display,
  BoxSizing? boxSizing,
  Unit? width,
  Unit? height,
  Unit? maxWidth,
  Unit? maxHeight,
  Unit? minWidth,
  Unit? minHeight,
  Border? border,
  BorderRadius? radius,
  Outline? outline,
  Overflow? overflow,
  Visibility? visibility,
  Position? position,
  double? opacity,
  Transform? transform,
  BoxShadow? shadow,
  Cursor? cursor,
  Transition? transition,
})
```

</TabItem>
<TabItem value="flexbox">

Groups various css properties related to the flexbox layout system.

```dart
const Styles.flexbox({
  FlexDirection? direction,
  FlexWrap? wrap,
  JustifyContent? justifyContent,
  AlignItems? alignItems,
})
```

</TabItem>
<TabItem value="flexItem">

Groups various css properties that can be applied to a direct child of a flexbox parent.

```dart
const Styles.flexItem({
  Flex? flex,
  int? order,
  AlignSelf? alignSelf,
})
```

</TabItem>
<TabItem value="grid">

Groups various css properties related to the grid layout system.

```dart
const Styles.grid({
  GridTemplate? template,
  GridGap? gap,
  List<TrackSize>? autoRows,
  List<TrackSize>? autoColumns,
})
```

</TabItem>
<TabItem value="gridItem">

Groups various css properties that can be applied to a direct child of a grid parent.

```dart
const Styles.gridItem({
  GridPlacement? placement,
})
```

</TabItem>
<TabItem value="list">

Groups various css properties to style a list.

```dart
const Styles.list({
  ListStyle? style,
  ImageStyle? image,
  ListStylePosition? position,
})
    ```
</TabItem>
</Tabs>

---

### 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:

```dart
const myStyle = Styles.raw({
  'color': 'blue',
  'some_advanced_css_property': 'special_value',
});
```

---

### Chaining Styles

You can chain multiple style group calls like this:

```dart
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:

```dart
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:

```dart
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),
]);
```
