Shortcuts
Last updated
Last updated
Flutter-view supports special macro-like shortcut tags and properties, that are meant to let you easily lay out code and allow for CSS-like styling.
See the shortcuts reference for a list of all included shortcuts.
The shortcut tags are macros that help you code layouts more easily.
For example, the tag is a shortcut to a widget with a build function, so you do not need to write the function. You simply keep writing widgets as its children.
Other notable examples are:
: lets you write terse reactive code that responds to your model changes
See the for all tags.
The shortcut properties are macros that insert common layout behaviour that take more code in Flutter, such as easily setting a background color to a container or adding text styling. These properties are as much as CSS properties as possible. However when there is no direct CSS-like analogy, the Flutter names and values are used. They are in dash case, since camelcase is not officially supported.
You can also place these properties in a separate CSS or Sass file. This allows you to separate your styling from your structure, as you would in HTML and CSS.
Some commonly used examples are:
and to let you lay out code easily
, and to style containers
, and : to style text
any property name ending on accepts both color names and hex codes
If you have to pass a parameter which has the name of a shortcut, and you do not wish to apply the shortcut, you can escape it with the ^ character.
box-decoration(fit="cover")
However if you have a situation where you have a widget that happens to have the fit property as well, but do not want flutter-view to processes it as a BoxFit value, you can escape the property:
my-widget(:^fit="someValue")
See the for all supported properties.
For example, by default the takes a BoxFit name. For example: