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!
​
Guide - Previous
Creating widget layouts
Next - Guide
Shortcuts
Last modified 3yr ago
Copy link
Contents
slot
for