flutter-view
Search…
Creating a new view
To create a new view, create a Pug file. It is common to put this file 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!
Adding imports
To import additional packages in a Pug or HTML file, use the import tag with the package parameter:
Pug
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
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 Pug is as follows:
Pug
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:
Pug
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!
​
Last modified 2mo ago