flutter-view
  • Introduction
  • FAQ
  • Get Started
    • Install
    • Usage
    • Test drive
    • VS Code support
    • Examples
  • Guide
    • Configuring flutter-view
    • Creating a new view
    • Creating widget layouts
    • Flow control
    • Shortcuts
    • Styling with CSS
    • Writing Reactive code
    • Styling per platform
  • Shortcuts Reference
    • Special pug tags
    • CSS style properties
Powered by GitBook
On this page
  • slot
  • function
  • builder
  • lifecycle
  • reactive
  1. Shortcuts Reference

Special pug tags

A list of special tags you can use in your pug code that generate code in your Dart code.

PreviousStyling per platformNextCSS style properties

Last updated 3 years ago

slot

A slot is a placeholder for a value. It will always take the value of the first valid child.

It is explained in more detailed in the .

function

Creates a function, and uses the body as what is returned. This allows you to pass functions as parameters.

Parameters

  • params: @required String a list of comma separated parameters your function expects

Example, to pass a builder function to a :

layout-builder
    function(as='builder' params='context, constraints')
        container Layout constraints: $constraints
LayoutBuilder(
    builder: (context, constraints) {
        return Container(
            child: Text(
                'Layout constraints: $constraints'
            ),
        );
    }
)

builder

Wraps its child in a builder function that exposes the current .

Quite frequently you may need the current build context in your views:

  • passing it as a parameter into event handlers on your models

  • for Theme.of(context) and such common constructions

At any time you need the current context, you can add a builder shortcut. It will write a Builder widget with as its child a function that passes the current context, which you can then use in the child widgets.

Parameters

No parameters.

Example:

example(flutter-view)
	builder
		.welcome(color="theme(primary-color)") Hello!
Example() {
  return Builder(
    builder: (context) {
      return DefaultTextStyle.merge( 
        child: 
        Container(
          child: Text( 
            'Hello!',
          ),
        ),
        style: TextStyle( 
          color: Theme.of(context).primaryColor,
        ),
      );
    },
  );
}

In the above example, if you leave out the builder, you will get an error because theme requires a context. See the generated Dart how it is used.

lifecycle

Widget that lets you listen to the lifecycle of the BuildContext it is part of.

Useful in combination with Model and ReactiveModel, since your model can be informed when the BuildContext is being initialized, built, rendered and disposed of.

Parameters

  • onRender: Function Called when render is called on the widget

Example:

example(flutter-view :model[MyModel])
	lifecycle(:on-dispose='model.onDisposed')
		| ${model.message}!
class MyModel extends Model {
    
    String message = 'Hello world';
    
    onDisposed() {
        // we can do some cleanup here
    }
    
}
Lifecycle Example({ @required model }) {
  return Lifecycle( // project://lib/pages/homepage/homepage.pug#21,2
    onDispose: model.onDisposed,
    child: Text( 
      '${model.message}',
    ),
  );
}

reactive

Re-renders its children if the Listenable it watches updates.

Parameters

  • child: @required Object the rest of the widgets that get rerendered if the watched model updates

Implementation

user-entry(flutter-view :user)
	reactive(watch='user')
		.name ${user.name}
		.age ${user.age}
UserEntry({ @required user }) {
  return ReactiveWidget(
    watch: user as Listenable,
    builder: (context, $) {
      return Column( 
        children: [
          Container(
            child: Text( 
              '${user.name}',
            ),
          ),
          Container(
            child: Text( 
              '${user.age}',
            ),
          )
        ]),
      );
    },
  );
}

In the above example, a user model is passed into the view. If a user is an instance of a Model, and user.notifyListeners() gets called, part below the reactive tag (the .name and .user containers) will automatically be re-rendered.

Note: Requires the Dart library.

onInit: Function Called when is called on the widget state

onBuild: Function(BuildContext) Called when is called on the widget state

onDispose: Function Called when is called on the widget state

For more information, see .

Note: Requires the Dart library.

This widget was made to work well with the . However when using flutter-view, you no longer need to use the ScopedModel and ScopedModelDescendant widgets. Instead, you pass a model into a flutter-view, and use the reactive tag to watch for changes.

watch: @required Listenable Something to watch for updates. Usually a .

The shortcut tag processor writes a , and an associated builder function which gets called to build the widget layout.

For more information and a more elaborate example, see .

flow control section
LayoutBuilder
BuildContext
flutter-view-widgets
initState
build
dispose
flutter-view-widgets
ScopedModel library
Model
ReactiveWidget
Writing Reactive code
monitoring the state lifecycle