Styling with CSS

Structuring your files for styling

You can use CSS or Sass to set any property to any class or id in your Pug or HTML file.

To style a Pug file, create a Sass style file with the same name (but different extension) as your Pug file, in the same directory. For example, if you have a startpage.pug, to style it simply add a startpage.sass in the same directory.

Recommendation: create a directory per layout, with the name of your layout. Then inside, create a pug file, sass file and your model and other supporting files.

Example structure:

See the example projects for more ideas for structuring your application.

Applying styles as properties

You can apply extra properties to html elements by adding them through style rules.

For example, given the following Pug:

.message hello!

This will translate into the following HTML:

<div class="message">hello!</div>

You can then use the .message class to assign properties using Sass or CSS:

.message
width: 200
height: 200

The resulting Dart will be a combination of your layout and style:

Container(
child: Text(
'hello!',
),
width: 200,
height: 200,
);

Setting expressions

You can set an expression in CSS by wrapping the expression in quotes and starting it with a colon.

It is recommended to keep Dart expressions in your Pug files. However, in some cases it can be practical to be able to set an expression as a value, for example if flutter-view does not have special support for it.

Say you want to achieve the following Dart:

Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: [ ... ]
)

Which you can achieve with the following Pug code:

table(:default-verticle-alignment='TableCellVerticalAlignment.middle')
...children...

Now let's move the defaultVerticleAlignment property into a Sass file:

Sass
Pug
table
default-verticle-alignment: ':TableCellVerticalAlignment.middle'
table
...children...

Note the colon before TableCellVerticleAlignment.middlein the Sass file.

Using shortcut properties in styles

Flutter-view provides many shortcut properties, that let you style in a CSS-style manner.

Some examples are color, padding, margin and background-image. See the shortcut properties reference for the full list.

As an example, consider the following Pug layout we want to style (taken and converted into flutter-view Pug from the Flutter Card sample):

card
column
list-tile
icon(as='leading' :value='Icons.album')
.title(as='title') The Enchanted Nightingale
.subtitle(as='subtitle') Music by Julie Gable. Lyrics by Sidney Stein.
button-theme:bar
button-bar
flat-button.tickets(@on-pressed='...')
.label Buy tickets
flat-button.listen(@on-pressed='...')
.label Listen

We have a layout, and now we can style it.

The "buy tickets" and "listen" FlatButtons we want to have uppercase text. We can use the text-transform shortcut:

flat-button
.label
text-transform: uppercase

We want the card to be blue and the column of the card to have mainAxisSize: MainAxisSize.min:. Here we can use the color shortcut, so we can use CSS colors, and the main-axis-size shortcut, which lets us simply use 'min':

card
color: blue
column
main-axis-size: min

We want to give some padding to the title and subtitle, and give each slightly different colors. Padding and margin are shortcuts that adhere to CSS standards:

card
list-tile
.title
color: white
padding: 4 6
.subtitle
color: grey[100]
padding: 2 6

Here is the end result:

artist-card.pug
artist-card.sass
generated artist-card.dart
artist-card(flutter-view :on-buy-pressed :on-listen-pressed)
card
column
list-tile
icon(as='leading' :value='Icons.album')
.title(as='title') The Enchanted Nightingale
.subtitle(as='subtitle') Music by Julie Gable. Lyrics by Sidney Stein.
button-theme:bar
button-bar
flat-button.tickets(@on-pressed='onBuyPressed()')
.label Buy tickets
flat-button.listen(@on-pressed='onListenPressed()')
.label Listen
card
color: blue
column
main-axis-size: min
list-tile
.title
color: white
padding: 4 6
.subtitle
color: grey[100]
padding: 2 6
flat-button
.label
text-transform: uppercase
Card ArtistCard({ onBuyPressed, onListenPressed }) {
return Card(
child: Column(
children: [
ListTile(
leading: Icon(
Icons.album,
color: Colors.white,
),
title: DefaultTextStyle.merge(
child:
//-- TITLE ----------------------------------------------------------
Container(
child: Text(
'The Enchanted Nightingale',
),
padding: EdgeInsets.only(top: 4, right: 6, bottom: 4, left: 6),
),
style: TextStyle(
color: Colors.white,
),
),
subtitle: DefaultTextStyle.merge(
child:
//-- SUBTITLE ----------------------------------------------------------
Container(
child: Text(
'Music by Julie Gable. Lyrics by Sidney Stein.',
),
padding: EdgeInsets.only(top: 2, right: 6, bottom: 2, left: 6),
),
style: TextStyle(
color: Colors.grey.shade300,
),
),
),
ButtonTheme.bar(
child: ButtonBar(
children: [
//-- TICKETS ----------------------------------------------------------
FlatButton(
onPressed: () { onBuyPressed(); },
child: DefaultTextStyle.merge(
child:
//-- LABEL ----------------------------------------------------------
Container(
child: Text(
'Buy tickets'.toUpperCase(),
),
),
style: TextStyle(
color: Colors.white,
),
),
),
//-- LISTEN ----------------------------------------------------------
FlatButton(
onPressed: () { onListenPressed(); },
child: DefaultTextStyle.merge(
child:
//-- LABEL ----------------------------------------------------------
Container(
child: Text(
'Listen'.toUpperCase(),
),
),
style: TextStyle(
color: Colors.white,
),
),
)
],
),
)
]),
mainAxisSize: MainAxisSize.min,
),
color: Colors.blue,
);
}

As you can see here, Sass is a nice match with Pug, since you can retain the same structure. This makes it easy to find the matching styles to your pug elements.

Using Flutter Themes in styles

Flutter's Material library has theming support. You may want to assign the values of the theme of the current BuildContext. Flutter-view has support for easily assigning ThemeData values to your properties.

To understand how it works, let's first look at how you would use it in pure Dart code. To assign a font size to a style, you may write something like this:

style: TextStyle(
fontSize: Theme.of(context).textTheme.title.fontSize,
)

First we find the Theme of the current BuildContext, then we get a path of properties.

In flutter-view CSS, you might write this the same way:

.foo
font-size: ':Theme.of(context).textTheme.title.fontSize'

Instead, you may write it like this:

.foo
font-size: theme(text-theme/title/font-size)

This still requires the context to be available. If you have no current context, you can use the builder shortcut. The theme properties path has been replaced by dash-cased steps, separated by forward slashes/.

Pro tip: You can define CSS classes that set multiple theme style properties at once and reuse them across your app.