Special pug tags

function
Creates a function, and uses the body as what is returned. This allows you to pass functions as parameters.
Parameters
params: @required String a list of comma separated parameters your function expects
Example, to pass a builder function to a LayoutBuilder:
Pug
generated Dart
1
layout-builder
2
    function(as='builder' params='context, constraints')
3
        container Layout constraints: $constraints
Copied!
1
LayoutBuilder(
2
    builder: (context, constraints) {
3
        return Container(
4
            child: Text(
5
                'Layout constraints: $constraints'
6
            ),
7
        );
8
    }
9
)
Copied!
builder
Wraps its child in a builder function that exposes the current BuildContext.
Quite frequently you may need the current build context in your views:
passing it as a parameter into event handlers on your models
for Theme.of(context) and such common constructions
At any time you need the current context, you can add a builder shortcut. It will write a Builder widget with as its child a function that passes the current context, which you can then use in the child widgets.
Parameters
No parameters.
Example:
Pug
generated Dart
1
example(flutter-view)
2
	builder
3
		.welcome(color="theme(primary-color)") Hello!
Copied!
1
Example() {
2
  return Builder(
3
    builder: (context) {
4
      return DefaultTextStyle.merge( 
5
        child: 
6
        Container(
7
          child: Text( 
8
            'Hello!',
9
          ),
10
        ),
11
        style: TextStyle( 
12
          color: Theme.of(context).primaryColor,
13
        ),
14
      );
15
    },
16
  );
17
}
Copied!
In the above example, if you leave out the builder, you will get an error because theme requires a context. See the generated Dart how it is used.
assign
Note: Requires the flutter-view-widgets Dart library.
Assigns a the value of an expression to a new variable.
In flutter-view layouts, you cannot directly use code, since it is meant for presentation. This means that for computed properties and other calculations, you normally defer to functions in a model that you pass. However sometimes it is practical to make simple assignments.
Parameters
name: @required String the name of the new variable to assign to (required
value: @required String a string or expression to assign to the new variable
child: @required object the rest of the widgets that get access to the new variable
Implementation
The shortcut tag processor writes an Assign widget, and an associated builder function which gets the new variable. This function returns what you pass as the child.
Pug
generated Dart
1
user-entry(flutter-view :user)
2
	assign(name='username' :^value="user.firstName+' '+user.lastName")
3
		.name $username
4
		.age ${user.age}
Copied!
1
UserEntry({ @required user }) {
2
  return Assign(
3
    name: 'username',
4
    value: user.firstName+' '+user.lastName,
5
    builder: (context, username) {
6
      return Column( 
7
        children: [
8
          Container(
9
            child: Text(
10
              '$username',
11
            ),
12
          ),
13
          Container(
14
            child: Text( 
15
              '${user.age}',
16
            ),
17
          )
18
        ]),
19
      );
20
    },
21
  );
22
}
Copied!
lifecycle
Note: Requires the flutter-view-widgets Dart library.
Widget that lets you listen to the lifecycle of the BuildContext it is part of.
Useful in combination with Model and ReactiveModel, since your model can be informed when the BuildContext is being initialized, built, rendered and disposed of.
Parameters
onInit: Function Called when initState is called on the widget state
onBuild: Function(BuildContext) Called when build is called on the widget state
onRender: Function Called when render is called on the widget
onDispose: Function Called when dispose is called on the widget state
Example:
Pug
MyModel.dart
generated Dart
1
example(flutter-view :model[MyModel])
2
	lifecycle(:on-dispose='model.onDisposed')
3
		| ${model.message}!
Copied!
1
class MyModel extends Model {
2
    
3
    String message = 'Hello world';
4
    
5
    onDisposed() {
6
        // we can do some cleanup here
7
    }
8
    
9
}
Copied!
1
Lifecycle Example({ @required model }) {
2
  return Lifecycle( // project://lib/pages/homepage/homepage.pug#21,2
3
    onDispose: model.onDisposed,
4
    child: Text( 
5
      '${model.message}',
6
    ),
7
  );
8
}
Copied!
For more information, see monitoring the state lifecycle. 
reactive
Note: Requires the flutter-view-widgets Dart library.
Rerenders its children if the Listenable it watches updates.
This widget was made to work well with the ScopedModel library. However when using flutter-view, you no longer need to use the ScopedModel and ScopedModelDescendant widgets. Instead, you pass a model into a flutter-view, and use the reactive tag to watch for changes.
Parameters
watch: @required Listenable Something to watch for updates. Usually a Model.
child: @required Object the rest of the widgets that get rerendered if the watched model updates
Implementation
The shortcut tag processor writes a ReactiveWidget, and an associated builder function which gets called to build the widget layout.
Pug
generated Dart
1
user-entry(flutter-view :user)
2
	reactive(watch='user')
3
		.name ${user.name}
4
		.age ${user.age}
Copied!
1
UserEntry({ @required user }) {
2
  return ReactiveWidget(
3
    watch: user as Listenable,
4
    builder: (context, $) {
5
      return Column( 
6
        children: [
7
          Container(
8
            child: Text( 
9
              '${user.name}',
10
            ),
11
          ),
12
          Container(
13
            child: Text( 
14
              '${user.age}',
15
            ),
16
          )
17
        ]),
18
      );
19
    },
20
  );
21
}
22
​
Copied!
In the above example, a user model is passed into the view. If a user is an instance of a Model, and user.notifyListeners() gets called, part below the reactive tag (the .name and .user containers) will automatically be re-rendered.
For more information and a more elaborate example, see Writing Reactive code.
Guide - Previous
Styling per platform
Next - Shortcuts Reference
CSS style properties
Last modified 2yr ago
Copy link
Contents