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.
By default, the following imports are added to generated Dart files:
import 'package:flutter/material.dart'import 'package:flutter/cupertino.dart';
You can add additional default imports using flutter-view.json.
To import additional packages in a Pug or HTML file, use the import tag with the package parameter:
import(package='flutter_view_widgets/flutter_view_widgets.dart')
<import package='flutter_view_widgets/flutter_view_widgets.dart'/>
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:
import(file='../directory/test.dart')
<import file='../directory/test.dart'/>
A flutter-view is transformed into a Dart function. As such, you are just writing Dart functions in an HTML-like format.
The format of a flutter view in HTML is as follows:
<method-name flutter-view [optional parameters]>...method body...</method-name>
method-name(flutter-view [optional parameters])...method body...
This will render into the following Dart:
MethodName([optional parameters]) {return ...method body...}
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.
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:
<task-list-item flutter-view :model[TaskList] :task[Task] :done?>...widgets that show the task...</method-name>
task-list-item(flutter-view :task-model[TaskList] :task[Task] :done?)...widgets that show the task...
This will render into the following Dart:
TaskListItem({ TaskList taskModel, Task task, done) {return ...widgets that show the task..}