Special pug tags
A list of special tags you can use in your pug code that generate code in your Dart code.
A slot is a placeholder for a value. It will always take the value of the first valid child.
Creates a function, and uses the body as what is returned. This allows you to pass functions as parameters.
- params:
@required String
a list of comma separated parameters your function expects
Pug
generated Dart
layout-builder
function(as='builder' params='context, constraints')
container Layout constraints: $constraints
LayoutBuilder(
builder: (context, constraints) {
return Container(
child: Text(
'Layout constraints: $constraints'
),
);
}
)
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.
No parameters.
Example:
Pug
generated Dart
example(flutter-view)
builder
.welcome(color="theme(primary-color)") Hello!
Example() {
return Builder(
builder: (context) {
return DefaultTextStyle.merge(
child:
Container(
child: Text(
'Hello!',
),
),
style: TextStyle(
color: Theme.of(context).primaryColor,
),
);
},
);
}
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.
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.Example:
Pug
MyModel.dart
generated Dart
example(flutter-view :model[MyModel])
lifecycle(:on-dispose='model.onDisposed')
| ${model.message}!
class MyModel extends Model {
String message = 'Hello world';
onDisposed() {
// we can do some cleanup here
}
}
Lifecycle Example({ @required model }) {
return Lifecycle( // project://lib/pages/homepage/homepage.pug#21,2
onDispose: model.onDisposed,
child: Text(
'${model.message}',
),
);
}
Re-renders 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.
- child:
@required Object
the rest of the widgets that get rerendered if the watched model updates
The shortcut tag processor writes a ReactiveWidget, and an associated builder function which gets called to build the widget layout.
Pug
generated Dart
user-entry(flutter-view :user)
reactive(watch='user')
.name ${user.name}
.age ${user.age}
UserEntry({ @required user }) {
return ReactiveWidget(
watch: user as Listenable,
builder: (context, $) {
return Column(
children: [
Container(
child: Text(
'${user.name}',
),
),
Container(
child: Text(
'${user.age}',
),
)
]),
);
},
);
}
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.
Last modified 1yr ago