Creating a new view

To create a new view, create either an HTML or Pug page. It is common to put this page in its own directory with the same name, to group the page, styling and optional models together. A single page can contain many flutter-views.
Importing Dart dependencies
Default imports
By default, the following imports are added to  generated Dart files:
1
import 'package:flutter/material.dart'
2
import 'package:flutter/cupertino.dart';
Copied!
You can add additional default imports using flutter-view.json.
Adding imports
To import additional packages in a Pug or HTML file, use the import tag with the package parameter:
Pug
HTML
1
import(package='flutter_view_widgets/flutter_view_widgets.dart')
Copied!
1
<import package='flutter_view_widgets/flutter_view_widgets.dart'/>
Copied!
To import files in a Pug or HTML file, use the import tag with the file parameter. The files are relative to the current file directory:
Pug
HTML
1
import(file='../directory/test.dart')
Copied!
1
<import file='../directory/test.dart'/>
Copied!
Creating Flutter-views
A flutter-view is transformed into a Dart function. As such, you are just writing Dart functions in an HTML-like format.
Method body
The format of a flutter view in HTML is as follows:
HTML
Pug
1
<method-name flutter-view [optional parameters]>
2
    ...method body...
3
</method-name>
Copied!
1
method-name(flutter-view [optional parameters])
2
    ...method body...
Copied!
This will render into the following Dart:
1
MethodName([optional parameters]) {
2
    return ...method body...
3
}
Copied!
The method name in HTML or Pug is dash-cased, and gets transformed into camel-case. The same is true for the parameters.
Note: The generated Dart functions start in uppercase. This is so they can be called from other flutter-views, as will become clear in a moment.
Adding Parameters
Parameters are defined as follows:
:parameter-name[type]?
The [type] and ? are optional:
The type becomes the type of the parameter in the Dart function. If omitted, it it is considered dynamic
By default, parameters you specify are required. Adding a ? at the end indicates that they are optional.
Example:
HTML
Pug
1
<task-list-item flutter-view :model[TaskList] :task[Task] :done?>
2
    ...widgets that show the task...
3
</method-name>
Copied!
1
task-list-item(flutter-view :task-model[TaskList] :task[Task] :done?)
2
    ...widgets that show the task...
Copied!
This will render into the following Dart:
1
TaskListItem({ @required TaskList taskModel, @required Task task, done) {
2
    return ...widgets that show the task..
3
}
Copied!
​

Guide - Previous

Configuring flutter-view

Next - Guide

Creating widget layouts

Last modified 2yr ago

Copy link

Contents

Importing Dart dependencies

Default imports

Adding imports

Creating Flutter-views

Method body

Adding Parameters