The Styles class can be used to write type-safe css styles in Dart.
It contains typed parameters for most css properties, like width, padding, color and more. Here is the full list of available properties:
const Styles({
// Box Styles
All? all,
String? content,
Display? display,
Position? position,
ZIndex? zIndex,
Unit? width,
Unit? height,
Unit? minWidth,
Unit? minHeight,
Unit? maxWidth,
Unit? maxHeight,
AspectRatio? aspectRatio,
Padding? padding,
Margin? margin,
BoxSizing? boxSizing,
Border? border,
BorderRadius? radius,
Outline? outline,
double? opacity,
Visibility? visibility,
Overflow? overflow,
Appearance? appearance,
BoxShadow? shadow,
Filter? filter,
Filter? backdropFilter,
Cursor? cursor,
UserSelect? userSelect,
PointerEvents? pointerEvents,
Animation? animation,
Transition? transition,
Transform? transform,
// Flexbox Styles
FlexDirection? flexDirection,
FlexWrap? flexWrap,
JustifyContent? justifyContent,
AlignItems? alignItems,
AlignContent? alignContent,
// Grid Styles
GridTemplate? gridTemplate,
List<TrackSize>? autoRows,
List<TrackSize>? autoColumns,
Gap? gap,
JustifyItems? justifyItems,
// Item Styles
Flex? flex,
int? order,
AlignSelf? alignSelf,
JustifySelf? justifySelf,
GridPlacement? gridPlacement,
// List Styles
ListStyle? listStyle,
ImageStyle? listImage,
ListStylePosition? listPosition,
// Text Styles
Color? color,
TextAlign? textAlign,
FontFamily? fontFamily,
Unit? fontSize,
FontWeight? fontWeight,
FontStyle? fontStyle,
TextDecoration? textDecoration,
TextTransform? textTransform,
Unit? textIndent,
Unit? letterSpacing,
Unit? wordSpacing,
Unit? lineHeight,
TextShadow? textShadow,
TextOverflow? textOverflow,
WhiteSpace? whiteSpace,
Quotes? quotes,
// Background Styles
Color? backgroundColor,
ImageStyle? backgroundImage,
BackgroundOrigin? backgroundOrigin,
BackgroundPosition? backgroundPosition,
BackgroundAttachment? backgroundAttachment,
BackgroundRepeat? backgroundRepeat,
BackgroundSize? backgroundSize,
BackgroundClip? backgroundClip,
// Raw Styles
Map<String, String>? raw,
})Tip: The jaspr_lints package provides a convenient lint rule to keep your styles properties organized. Learn more about it here.
If you want to work with raw CSS properties or need to use a property that is not available in the current properties, use the raw parameter and provide a map of properties and values:
const myStyle = Styles(
color: Colors.red,
raw: {
'some_advanced_css_property': 'special_value',
},
);You can chain and combine multiple styles like this:
final myStyle = Styles(color: Colors.red)
.combine(Styles(textAlign: TextAlign.center));Note that this does not produce a constant value. Alternatively you can use the Styles.combine() constructor to get the same value as a constant:
const myStyle = Styles.combine([
Styles(color: Colors.red),
Styles(backgroundColor: Colors.blue),
Styles(textAlign: TextAlign.center),
]);Finally, you can store styles in variables and mix'n'match:
const redText = Styles(color: Colors.red);
const redOnBlueText = Styles.combine([
redText,
Styles(backgroundColor: Colors.blue),
]);
const redOnGreenText = Styles.combine([
redText,
Styles(backgroundColor: Colors.green),
]);