CSS style properties

A list of all the supported CSS style like shortcuts you can use as properties in your pug tags. These will then transform themselves into the appropriate Dart code.

PreviousSpecial pug tags

Last updated 3 years ago

CSS style properties

A list of all the supported CSS style like shortcuts you can use as properties in your pug tags. These will then transform themselves into the appropriate Dart code.

alignment

Describes where the content of a child should be positioned. Eg: text inside of a container.

Maps to Flutter values in camelcase.

Valid values:

bottom-center: The center point along the bottom edge
bottom-left: The bottom left corner
bottom-right: The bottom right corner
center: The center point, both horizontally and vertically
center-left: The center point along the left edge
center-right: The center point along the right edge
top-center: The center point along the top edge
top-left: The top left corner
top-right: The top right corner

Example:

container(width=500 height=400)
    .greeting(alignment='center-right')
        | Hello, I am positioned at the right!

Container(
  child: 
  Container(
    child: Text( 
      'Hello, I am positioned at the right!',
    ),
    alignment: Alignment.centerRight,
  ),
  width: 500,
  height: 400,
)

fit

Valid values:

contain: As large as possible while still containing the source entirely within the target box
cover: As small as possible while still covering the entire target box.
fill: Fill the target box by distorting the source's aspect ratio.
fill-height: Make sure the full height of the source is shown, regardless of whether this means the source overflows the target box horizontally.
fill-width: Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.
none: Align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box. The source image is not resized.
scale-down: Align the source within the target box (by default, centering) and, if necessary, scale the source down to ensure that the source fits within the box. This is the same as contain if that would shrink the image, otherwise it is the same as none.

Example:

.cover-image(
    background-image="asset('images/background.jpg')"
    fit='cover')

Container(
  decoration: BoxDecoration( 
    image: DecorationImage( 
      image: AssetImage(
        'images/background.jpg',
      ),
      fit: BoxFit.cover,
    ),
)

shape

Describes how the container should be shaped.

Valid values:

Example:

.cover-image(
    background-image="asset('images/background.jpg')"
    shape='circle')

Container(
  decoration: BoxDecoration( 
    image: DecorationImage( 
      image: ExactAssetImage( 
        'images/background.jpg',
      ),
    ),
    shape: BoxShape.circle,
  ),
)

padding

There are several padding properties you can use:

padding-left: padding on the left side only
padding-right: padding on the right side only
padding-top: padding on the top side only
padding-bottom: padding on the bottom side only
padding: padding for all sides

only direct values (numbers) are accepted
no support for percentages

Examples of valid values:

padding-left: 10 // EdgeInsets.only(left: 10)
padding-top: 50 // EdgeInsets.only(top: 50)
padding: 10 // EdgeInsets.only(top: 10, left: 10, bottom: 10, right: 10)
padding: 5.5 7 // EdgeInsets.only(top: 5.5, left: 7, bottom: 5.5, right: 7)

Example:

.greeting(padding=10) Hello world!

Container(
  child: Text( 
    'Hello world!',
  ),
  padding: EdgeInsets.only(top: 10, right: 10, bottom: 10, left: 10),
)

margin

There are several margin properties you can use:

margin-left: margin on the left side only
margin-right: margin on the right side only
margin-top: margin on the top side only
margin-bottom: margin on the bottom side only
margin: margin for all sides

only direct values (numbers) are accepted
no support for percentages

Examples of valid values:

margin-left: 10 // EdgeInsets.only(left: 10)
margin-top: 50 // EdgeInsets.only(top: 50)
margin: 10 // EdgeInsets.only(top: 10, left: 10, bottom: 10, right: 10)
margin: 5.5 7 // EdgeInsets.only(top: 5.5, left: 7, bottom: 5.5, right: 7)

Example:

.greeting(margin=10) Hello world!

Container(
  child: Text( 
    'Hello world!',
  ),
  margin: EdgeInsets.only(top: 10, right: 10, bottom: 10, left: 10),
)

border-radius

Decorates a container with rounded borders.

only direct values (numbers) are accepted
no support for percentages

Examples of valid values:

border-radius: 5 // BorderRadius.only(topLeft: Radius.circular(5), topRight: Radius.circular(5), bottomRight: Radius.circular(5), bottomLeft: Radius.circular(5))
border-radius: 2 5 2.5 7 // BorderRadius.only(topLeft: Radius.circular(2), topRight: Radius.circular(5), bottomRight: Radius.circular(2.5), bottomLeft: Radius.circular(7))
border-radius: 5 4 // BorderRadius.only(topLeft: Radius.circular(5), topRight: Radius.circular(4), bottomRight: Radius.circular(5), bottomLeft: Radius.circular(4))

Example:

.greeting(border-radius=4 background-color='grey') Hello world!

Container( // project://lib/pages/homepage/homepage.pug#8,5
  child: Text( 
    'Hello world!',
  ),
  decoration: BoxDecoration( 
    color: Colors.grey,
    borderRadius: BorderRadius.only(topLeft: Radius.circular(5), topRight: Radius.circular(5), bottomRight: Radius.circular(5), bottomLeft: Radius.circular(5)),
  ),
)

border

There are several border properties you can use:

border-left: style of the left border
border-right: style of the right border
border-top: style of the top border
border-bottom: style of the bottom border
border: style for all border sides
border-style: line style for all border sides
border-width: width of all border sides
border-color: color of all border sides

for styles, only solid and none are accepted
width must be a number
color must be a name (this is a bug, will be fixed soon)
the border property only allows a single style for all, not a style per side

Examples of valid values:

border-left: 1 solid red
border-width: 3.3
border: none
border: 5.5 blue

Example:

.greeting(border-top='1.4 red' border-bottom='0.5 green') Hello world!

Container(
  child: Text( 
    'Hello world!',
  ),
  decoration: BoxDecoration( 
    border: Border( 
      top: BorderSide( 
        width: 1.4,
        color: Colors.red,
      ),
      bottom: BorderSide( 
        width: 0.5,
        color: Colors.green,
      ),
    ),
  ),
)

box-shadow

It suppors multiple passed box shadows, separated by a comma.

A single box shadow can have 2, 3 or 4 or 5 properties: offset-x, offset-y, and optionally blur-radius offset-radius and color.

values must be numbers
colors not yet supported (coming soon)
no support for the inset keyword

Examples of valid values:

box-shadow: 2 3 // single shadow with offset-x: 3, offset-y: 3
box-shadow: 2 2 5 // single shadow with offset-x: 2, offset-y: 2 and blur: 5
box-shadow: 4 3 6 7 // single grey shadow with blur: 6 and offset-radius: 7
box-shadow: 2 3, 3 4 9 4 // two box shadows example

Example:

.greeting(box-shadow='2 3 5 7, -5 -2') Hello world!

Container(
  child: Text( 
    'Hello world!',
  ),
  decoration: BoxDecoration( 
    boxShadow: [
      BoxShadow( 
        offset: Offset(2.00, 3.00),
        blurRadius: 5.00,
        spreadRadius: 7.00,
      ),
      BoxShadow( 
        offset: Offset(-5.00, -2.00),
      )
    ],
  ),
)

background-image

The background-image property can have one of two values:

url("<image-url>") : creates a NetworkImage for the given url
asset("<asset-name>"): uses an ExactAssetImage for the given name

Examples of valid values:

background-image: asset('images/background.jpg')
background-image: url('http://some/image/url.png')

Example:

.cover-image(background-image="asset('images/background.jpg')")

Container(
  decoration: BoxDecoration( 
    image: DecorationImage( 
      image: ExactAssetImage( 
        'images/background.jpg',
      ),
    ),
  ),
)

background-color

Example:

.redbox(width=200 height=200 background-color="red")

Container(
  decoration: BoxDecoration( 
    color: Colors.red,
  ),
  width: 200,
  height: 200,
)

background-repeat

Valid values:

no-repeat: Leave uncovered portions of the box transparent
repeat: Repeat the image in both the x and y directions until the box is filled.
repeat-x: Repeat the image in the x direction until the box is filled horizontally.
repeat-y: Repeat the image in the y direction until the box is filled vertically.

Example:

.cover-image(
    background-image="asset('images/background.jpg')" 
    background-repeat='no-repeat')

Container( // project://lib/pages/homepage/homepage.pug#8,5
  decoration: BoxDecoration( 
    image: DecorationImage( 
      image: ExactAssetImage( 
        'images/background.jpg',
      ),
      repeat: ImageRepeat.noRepeat,
    ),
  ),
)

background-size

Example:

.cover-image(
    background-image="asset('images/background.jpg')" 
    background-fit='cover')

Container(
  decoration: BoxDecoration( 
    image: DecorationImage( 
      image: ExactAssetImage( 
        'images/background.jpg',
      ),
      fit: BoxFit.cover,
    ),
  ),
)

main-axis-alignment

Valid values:

start: Place the children as close to the start of the main axis as possible
end: Place the children as close to the end of the main axis as possible
center: Place the children as close to the middle of the main axis as possible
space-around: Place the free space evenly between the children as well as half of that space before and after the first and last child
space-between: Place the free space evenly between the children
space-evenly: Place the free space evenly between the children as well as before and after the first and last child

Example:

row(main-axis-alignment="space-evenly")
    .entry We
    .entry Are
    .entry Spaced
    .entry Evenly

Row(
  children: [
    Container(
      child: Text( 
        'We',
      ),
    ),
    Container(
      child: Text( 
        'Are',
      ),
    ),
    Container(
      child: Text( 
        'Spaced',
      ),
    ),
    Container(
      child: Text( 
        'Evenly',
      ),
    )
  ],
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
)

cross-axis-alignment

Valid values:

start: Place the children with their start edge aligned with the start side of the cross axis
end: Place the children as close to the end of the cross axis as possible
center: Place the children so that their centers align with the middle of the cross axis
baseline: Place the children along the cross axis such that their baselines match
stretch: Require the children to fill the cross axis

Example:

column(cross-axis-alignment="center")
    .entry We
    .entry Are
    .entry Centered

Column(
  children: [
    Container(
      child: Text( 
        'We',
      ),
    ),
    Container(
      child: Text( 
        'Are',
      ),
    ),
    Container(
      child: Text( 
        'Centered',
      ),
    )
  ],
  crossAxisAlignment: CrossAxisAlignment.center,
),

main-axis-size

Valid values:

min: Minimize the amount of free space along the main axis, subject to the incoming layout constraints
max: Maximize the amount of free space along the main axis, subject to the incoming layout constraints

Example:

column(main-axis-size="max")
    .entry Some entry, left over space is maximized

Column(
  children: [

    //-- ENTRY ----------------------------------------------------------
    Container( // project://lib/pages/homepage/homepage.pug#14,6
      child: Text( 
        'Some entry, left over space is maximized',
      ),
    )
  ],
  mainAxisSize: MainAxisSize.max,
)

color, ...-color

Valid values:

A dash-cased color name from Colors. color='deep-orange'
A dash-cased color name from Colors with a weight. color='deep-orange[400]'
A hex color ala CSS. color='#FF3499'
A hex color ala CSS with preceding transparency. color='#80FF3499'

Examples:

.red-text-container(color='red') This text is red
.red-container(:background-color='Colors.red')
.orange-container(background-color='deep-orange')
.green-container(background-color='green[300]')
.blue-container(background-color='#00F')
.blue-container2(background-color='#0000FF')

.red-text-container
    color: red
.red-container
    background-color: ':Colors.red'
.orange-container
    background-color: deep-orange
.green-container
    background-color: green[300]
.blue-container
    background-color: #00F
.blue-container2
    background-color: #0000FF

Column( 
  children: [
    DefaultTextStyle.merge( 
      child: 
      //-- RED-TEXT-CONTAINER ----------------------------------------------------------
      Container(
        child: Text( 
          'This text is red',
        ),
      ),
      style: TextStyle( 
        color: Colors.red,
      ),
    ),

    //-- RED-CONTAINER ----------------------------------------------------------
    Container(
      decoration: BoxDecoration( 
        color: Colors.red,
      ),
    ),

    //-- ORANGE-CONTAINER ----------------------------------------------------------
    Container(
      decoration: BoxDecoration( 
        color: Colors.deepOrange,
      ),
    ),

    //-- GREEN-CONTAINER ----------------------------------------------------------
    Container(
      decoration: BoxDecoration( 
        color: Colors.green.shade300,
      ),
    ),

    //-- BLUE-CONTAINER ----------------------------------------------------------
    Container(
      decoration: BoxDecoration( 
        color: Color(0xFF0000FF),
      ),
    ),

    //-- BLUE-CONTAINER2 ----------------------------------------------------------
    Container(
      decoration: BoxDecoration( 
        color: Color(0xFF0000FF),
      ),
    )
  ],
)

font-size

Sets the font size of text in the container and all its children. Only works on Containers.

Allowed values are ints, doubles and theme font sizes.

Example:

.test(font-size=12.5) Welcome!

DefaultTextStyle.merge( 
  child: Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    fontSize: 12.5,
  ),
)

font-weight

Sets the font weight of text in the container and all its children. Only works on Containers.

Valid values:

normal: The default font weight
bold: A commonly used font weight that is heavier than normal
w100: Thin, the least thick
w200: Extra light
w300: Light
w400: Normal / regular / plain
w500: Medium
w600: Semi bold
w700: Bold
w800: Extra bold
w900: Black, the most thick

Note: Instead of passing w100, you may also pass 100, etc.

Example:

.test(font-weight='bold') Welcome!

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    fontWeight: FontWeight.bold,
  ),
)

font-family

Sets the font family of text in the container and all its children. Only works on Containers.

Value must be a string.

Example:

.test(font-size='Arial') Welcome!

DefaultTextStyle.merge( 
  child: Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    fontFamily: 'Arial',
  ),
)

font-style

Sets the font style of text in the container and all its children. Only works on Containers.

Valid values:

normal: The default font style
italic: Use glyphs designed for slanting

Example:

.test(font-style='italic') Welcome!

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    fontStyle: FontStyle.italic,
  ),
)

letter-spacing

The amount of space (in logical pixels) to add between each letter. A negative value can be used to bring the letters closer. Only works on Containers.

Valid values are ints and doubles.

Example:

.test(letter-spacing=3) This text gets spaced out

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'This text gets spaced out',
    ),
  ),
  style: TextStyle( 
    letterSpacing: 3,
  ),
)

line-height

Sets the line height text in the container and all its children. Only works on Containers.

Valid values are ints and doubles.

Example:

.test(line-height=20) Welcome!

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    height: 20,
  ),
)

text-decoration

A linear decoration to draw near the text.

Valid values:

none: Do not draw a decoration
underline: Draw a line underneath each line of text
overline: Draw a line above each line of text
line-through: Draw a line through each line of text

Example:

.test(text-decoration='underline') Welcome!

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    textDecoration: TextDecoration.underline,
  ),
)

text-decoration-color

The color of the text decoration you have set.

Example:

.test(
    text-decoration='underline'
    text-decoration-color='red') 
    | Hello world!

DefaultTextStyle.merge( 
  child: Container(
    child: Text( 
      'Hello world!',
    ),
  ),
  style: TextStyle( 
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
  ),
)

text-decoration-style

The style in which to draw a text decoration.

Valid values:

solid: Draw a solid line
double: Draw two lines
dotted: Draw a dotted line
dashed: Draw a dashed line
wavy: Draw a sinusoidal line

Example:

.test(
	text-decoration='underline'
	text-decoration-style='wavy') 
	| Hello world!

DefaultTextStyle.merge( 
  child: Container( // project://lib/pages/homepage/homepage.pug#8,5
    child: Text( 
      'Hello world!',
    ),
  ),
  style: TextStyle( 
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.wavy,
  ),
)

word-spacing

Sets the space between words in a text.

Valid values are ints and doubles.

Example:

.test(word-spacing=5.3) Welcome!

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    wordSpacing: 5.3,
  ),
)

text-align

Whether and how to align text horizontally.

Valid values:

start: Align the text on the leading edge of the container.
end: Align the text on the trailing edge of the container.
left: Align the text on the left edge of the container.
right: Align the text on the right edge of the container.
center: Align the text in the center of the container.
justify: Stretch lines of text that end with a soft line break to fill the width of the container.

Example:

.test(text-align='center') Welcome!

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Welcome!',
    ),
  ),
  style: TextStyle( 
    textAlign: TextAlign.center,
  ),
)

text-overflow

A linear decoration to draw near the text.

Valid values:

clip: Clip the overflowing text to fix its container.
ellipsis: Use an ellipsis to indicate that the text has overflowed.
fade: Fade the overflowing text to transparent.

Example:

.test(text-overflow='ellipsis' width=200) 
    | This will be cut off nicely with ellipsis

DefaultTextStyle.merge( 
  child: Container(
    child: Text( 
      'This will be cut off nicely with ellipsis',
    ),
    width: 200,
  ),
  overflow: TextOverflow.ellipsis,
)

text-transform

Changes the case of the text. It follows the CSS standards.

Valid values:

uppercase: changes the text to uppercase
lowercase: changes the text to lowercase

Example:

.test(text-transform='uppercase') 
    | This text will be shown in uppercase

Container(
  child: Text( 
    'This text will be shown in uppercase'.toUpperCase(),
  ),
)

max-lines

Values must be positive integers.

Example:

.test(
    width=100
    max-lines=1
    text-overflow='ellipsis')
    | Only one line gets shown, truncated

DefaultTextStyle.merge( 
  child: 
  Container(
    child: Text( 
      'Only one line gets shown, truncated',
    ),
    width: 100,
  ),
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

line-clamp

display

CSS-like setting of how you want a widget to be displayed. This can be useful for removing layout elements through CSS.

Valid values:

none: this will remove the widget

Example:

.test
    .message(display="none") I never even become code

//-- TEST ----------------------------------------------------------
Container(
)

PreviousSpecial pug tags

Last updated 3 years ago

alignment

fit

shape

padding

margin

border-radius

border

box-shadow

background-image

​background-color

background-repeat

background-size

main-axis-alignment

cross-axis-alignment

main-axis-size

color, ...-color

font-size

font-weight

font-family

font-style

letter-spacing

line-height

text-decoration

text-decoration-color

text-decoration-style

word-spacing

text-align

text-overflow

text-transform

max-lines

line-clamp

display

alignment

fit

shape

padding

margin

border-radius

border

box-shadow

background-image

​background-color

background-repeat

background-size

main-axis-alignment

cross-axis-alignment

main-axis-size

color, ...-color

font-size

font-weight

font-family

font-style

letter-spacing

line-height

text-decoration

text-decoration-color

text-decoration-style

word-spacing

text-align

text-overflow

text-transform

max-lines

line-clamp

display

background-color

background-color