flutter-view
Search…
Flow control
In your views you often want to only conditionally show something, or loop through a list of items. For this flutter-view has some intentionally simple flow control keywords.

if

This will only render the widget if the passed condition is true.
Pug
generated Dart
1
user-profile(flutter-view :user[User])
2
.user
3
.name ${user.name}
4
.company(if='user.company != null') Works at ${user.company}
Copied!
1
UserProfile({@required User user}) {
2
return Container(
3
child: Column(
4
children: [
5
Container(
6
child: Text('${user.name}'),
7
),
8
user.company != null ?
9
Container(
10
child: Text('Works at ${user.company}'),
11
)
12
: Container(),
13
],
14
),
15
);
16
}
17
// left out some flatten operations for simplicity
Copied!
In the above example, the company will only be shown if the passed user has the company property set.

slot

A slot is a placeholder for a value. It will always take the value of the first valid child.
Slot can function as an if/else. In the next example you see either the .status being shown, or the .empty.
Pug
generated Dart
1
tasks-page(flutter-view :tasks[List])
2
scaffold
3
slot(as='body')
4
.status(if='tasks.isNotEmpty') You have ${tasks.length} tasks
5
.empty You have no tasks yet...
6
Copied!
1
Scaffold TasksPage({ @required List tasks }) {
2
return Scaffold(
3
body: (tasks.isNotEmpty) ?
4
//-- STATUS ----------------------------------------------------------
5
Container(
6
child: Text(
7
'You have ${tasks.length} tasks',
8
),
9
):
10
true ?
11
//-- EMPTY ----------------------------------------------------------
12
Container(
13
child: Text(
14
'You have no tasks yet...',
15
),
16
)
17
: Container(),
18
);
19
}
20
Copied!
As you can see in the above example, you can use the as property to assign the slot value to a parameter as well. In this case, the content of the slot is placed in the body parameter of the Scaffold.
By adding multiple children with if to a slot, you can also create a swich/case:
Pug
1
slot
2
.apple(if='fruit=="Apple"')
3
.pear(if='fruit=="Pear"')
4
.peach(if='fruit=="Peach"')
5
.unknown // the fallback
6
Copied!

for

Use for to repeat a widget for every value in a list. For every repetition, the value gets assigned to a variable, which you can use to render the widget and its children.
Pug
generated Dart
1
tasks-page(flutter-view :tasks[List])
2
scaffold
3
slot(as='body')
4
.task(for='task in tasks')
5
.title ${task.title}
6
.description ${task.description}
Copied!
1
Scaffold TasksPage({ @required List tasks }) {
2
return Scaffold(
3
body:
4
//-- BODY ----------------------------------------------------------
5
Container(
6
child: (tasks as List).map((task) {
7
return
8
//-- TASK ----------------------------------------------------------
9
Container(
10
child: Column(
11
children: [
12
//-- TITLE ----------------------------------------------------------
13
Container(
14
child: Text(
15
'${task.title}',
16
),
17
),
18
//-- DESCRIPTION ----------------------------------------------------------
19
Container(
20
child: Text(
21
'${task.description}',
22
),
23
)
24
]),
25
),
26
);
27
}).toList(),
28
),
29
);
30
}
Copied!
You can also get the index (starting at 0) of the current entry as such:
1
.task(for='task, index in tasks')
Copied!
Last modified 2yr ago
Copy link
Contents
if
slot
for