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.


This will only render the widget if the passed condition is true.

user-profile(flutter-view :user[User])
        .name ${user.name}
        .company(if='user.company != null') Works at ${user.company}

In the above example, the company will only be shown if the passed user has the company property set.


This will only render the widget if the passed condition is false, otherwise it returns null.

With type and null-safety in Dart, you sometimes need to either pass an argument or null. The normal if above will return a SizedBox() if the condition fails. For building widget trees, this is usually makes sense. However sometimes we need to pass an argument that can be null, depending on a condition. In these edge cases, use if-null.

    .title(as='title' null-if='user.name == null') ${user.name}

In the above example, the title of the AppBar widget will be set to null if the user.name is null.


A slot is a placeholder for a value. It will take the value of the first valid child. Alternatively, you can also directly pass a value into it:

wrapper(flutter-view :content[Widget])
    .footer A footer

Slot can function as an if/else. In the next example you see either the .status being shown, or the .empty.

tasks-page(flutter-view :tasks[List])
            .status(if='tasks.isNotEmpty') You have ${tasks.length} tasks
            .empty You have no tasks yet...

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 switch/case:

    .unknown // the fallback


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.

tasks-page(flutter-view :tasks[List])
            .task(for='task in tasks')
                .title ${task.title}
                .description ${task.description}

You can also get the index (starting at 0) of the current entry as such:

.task(for='task, index in tasks')

Last updated