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.
Describes where the content of a child should be positioned. Eg: text inside of a container.
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:
Pug
Dart
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,
)
​
Describes how a box should be inscribed into another box. Used for the FittedBox Flutter container. Use the background-size style property instead if you want to apply a sizing to a background-image.
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
containif that would shrink the image, otherwise it is the same asnone.
Example:
Pug
Dart
.cover-image(
background-image="asset('images/background.jpg')"
fit='cover')
​
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'images/background.jpg',
),
fit: BoxFit.cover,
),
)
Describes how the container should be shaped.
Maps to Flutter BoxShape values in camelcase. Creates a Flutter BoxDecoration with the shape property set to to the value you pass.
Valid values:
- circle: A circle centered in the middle of the box into which the Border or BoxDecoration is painted. The diameter of the circle is the shortest dimension of the box, either the width or the height, such that the circle touches the edges of the box.
- rectangle: An axis-aligned, 2D rectangle. May have rounded corners (described by a BorderRadius). The edges of the rectangle will match the edges of the box into which the Border or BoxDecoration is painted.
Example:
Pug
Dart
.cover-image(
background-image="asset('images/background.jpg')"
shape='circle')
​
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage(
'images/background.jpg',
),
),
shape: BoxShape.circle,
),
)
​
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:
Pug
Dart
.greeting(padding=10) Hello world!
Container(
child: Text(
'Hello world!',
),
padding: EdgeInsets.only(top: 10, right: 10, bottom: 10, left: 10),
)
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:
Pug
Dart
.greeting(margin=10) Hello world!
Container(
child: Text(
'Hello world!',
),
margin: EdgeInsets.only(top: 10, right: 10, bottom: 10, left: 10),
)
Decorates a container with rounded borders.
Creates a Flutter BoxDecoration with borderRadius set using BorderRadius.only(). The values passed to BorderRadius.only for each corner are values of Radius.circular().
- 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:
Pug
Dart
.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)),
),
)
Creates a Flutter BoxDecoration with border set using Border(). The values passed to Border() for each side are values of BorderSide, with an optional width, style and color.
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:
Pug
Dart
.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,
),
),
),
)
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:
Pug
Dart
.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),
)
],
),
)
Creates a Flutter BoxDecoration with the image property set using either NetworkImage or ExactAssetImage.
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:
Pug
Dart
.cover-image(background-image="asset('images/background.jpg')")
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage(
'images/background.jpg',
),
),
),
)
Example:
Pug
Dart
.redbox(width=200 height=200 background-color="red")
Container(
decoration: BoxDecoration(
color: Colors.red,
),
width: 200,
height: 200,
)
Sets how background images of a container should be repeated. Usually used together with background-image.
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:
Pug
Dart
.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,
),
),
)
Sets how background images of a container should be fitted in the container. Usually used together with background-image.
It does so by setting the fit property of the ImageDecoration that was created for the background-image.
Example:
Pug
Dart
.cover-image(
background-image="asset('images/background.jpg')"
background-fit='cover')
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage(
'images/background.jpg',
),
fit: BoxFit.cover,
),
),
)
Controls how a row or column aligns its children on the main axis. See the Flutter layout documentation for more information.
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:
Pug
Dart
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,
)
Controls how a row or column aligns its children on the cross axis. See the Flutter layout documentation for more information.
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:
Pug
Dart
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,
),
Controls how a row or column to deals with left-over free space in the main axis. See the Flutter layout documentation for more information.
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:
Pug
Dart
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,
)
When a color is set on a Container, it will set the text color, much like you would set a color CSS property on a DIV in HTML. It does so by wrapping the container with DefaultTextStyle.merge and setting the text color in the TextStyle that is passed.
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:
Using Pug
Using CSS
generated Dart
.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),
),
)
],
)
Sets the font size of text in the container and all its children. Only works on Containers.
It does so by wrapping the container with DefaultTextStyle.merge and setting the font size in the TextStyle that is passed.
Allowed values are ints, doubles and theme font sizes.
Example:
Pug
Dart
.test(font-size=12.5) Welcome!
DefaultTextStyle.merge(
child: Container(
child: Text(
'Welcome!',
),
),
style: TextStyle(
fontSize: 12.5,
),
)
Sets the font weight of text in the container and all its children. Only works on Containers.
It does so by wrapping the container with DefaultTextStyle.merge and setting the font weight in the TextStyle that is passed.
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:
Pug
Dart
.test(font-weight='bold') Welcome!
DefaultTextStyle.merge(
child:
Container(
child: Text(
'Welcome!',
),
),
style: TextStyle(
fontWeight: FontWeight.bold,
),
)
Sets the font family of text in the container and all its children. Only works on Containers.
It does so by wrapping the container with DefaultTextStyle.merge and setting the font family in the TextStyle that is passed.
Value must be a string.
Example:
Pug
Dart
.test(font-size='Arial') Welcome!
DefaultTextStyle.merge(
child: Container(
child: Text(
'Welcome!',
),
),
style: TextStyle(
fontFamily: 'Arial',
),
)
Sets the font style of text in the container and all its children. Only works on Containers.
It does so by wrapping the container with DefaultTextStyle.merge and setting the font style in the TextStyle that is passed.
Valid values:
- normal: The default font style
- italic: Use glyphs designed for slanting
Example:
Pug
Dart
.test(font-style='italic') Welcome!
DefaultTextStyle.merge(
child:
Container(
child: Text(
'Welcome!',
),
),
style: TextStyle(
fontStyle: FontStyle.italic,
),
)
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.
It does so by wrapping the container with DefaultTextStyle.merge and setting the letter spacing in the TextStyle that is passed.
Valid values are ints and doubles.
Example:
Pug
Dart
.test(letter-spacing=3) This text gets spaced out
DefaultTextStyle.merge(
child:
Container(
child: Text(
'This text gets spaced out',
),
),
style: TextStyle(
letterSpacing: 3,
),
)