Styling with CSS
Overview
One of the most powerful features in flutter-view is that it allows you to use CSS styles to flutter widgets, and to set any property of any flutter widget.
For example, you can start with a simple Container:
This will generate a function that returns a Container with the class name "example", that in turns contains a Text widget with the text "Hello world".
Then you can style this Container by assigning Sass styles to the class:
Flutter-view will process your styles, attaching them to the classes. Properties such as width and height are directly assigned. Some properties are recognized as CSS properties, and generate more code, such as color and font-size. The result is a normal Dart function you can call in your normal Dart code to render the styled view. In this case, a grey box with red bold text saying "Hello world!".
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:
Applying styles as properties
You can apply extra properties to html elements by adding them through style rules.
To style anything in a flutter-view you:
add classes to the elements in your pug file,
add style rules to these classes in the related sass file
For example, given the following Pug:
This will translate into the following HTML:
You can then use the .message
class to assign properties using Sass or CSS:
The resulting Dart will be a combination of your layout and style:
Using shortcut properties in styles
Flutter-view provides many shortcut properties, that let you style in a CSS-style manner.
We have a layout, and now we can style it.
Here is the end result:
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.
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 CSS value, for example if flutter-view does not have special support for it.
Say you want to achieve the following Dart:
Which you can achieve with the following (a bit contrived) Pug code:
Now let's move the defaultVerticleAlignment
property into a Sass file:
Note the colon before TableCellVerticleAlignment.middle
in the Sass file.
Using Flutter Themes in styles
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:
In flutter-view CSS, you might write this the same way:
Instead, you may write it like this:
Pro tip: You can define CSS classes that set multiple theme style properties at once and reuse them across your app.
Last updated