Introduction

is an open source tool that makes writing reactive layouts a breeze. It lets you use and to generate the Flutter Dart code that renders the views in your app.

You use it by running the flutter-view command in your terminal to let it monitor your project. When it detects changes in a Pug or Sass file, it automatically generates or updates a matching Dart file.

Flutter-view 2.0.0 and up fully support writing null-safe code in Dart 2.13 and up.

Why views in Flutter

In standard Flutter Dart code, the "state" of your application is mixed in with the presentation. This can make it hard to structure and scale your code.

Flutter-view is about creating views, which are functions that return a widget tree for presenting something. These functions act a bit like components. Flutter-view uses Pug to make layouts more terse and Sass to let you style faster and more easily.

The state part comes into play when you make your view reactive. You can pass models (or streams) into your views. When these models change, the views automatically adapt.

Creating a view

A single flutter-view in pug generates a Dart function that usually returns a widget tree.

hello.pug

hello(flutter-view)
    .greeting Hello world!

hello.html

<hello flutter-view>
    <div class="greeting">
        Hello world!
    </div>
</hello>

hello.dart

Container Hello() {
    return Container(
        child: Text("Hello world!")
    );
}

Click the tabs to see the Pug code, the HTML representation of the Pug, and the Dart code that flutter-view generates for you.

This generated function can be used like any other Dart code, and will return the code that gives the greeting.

Adding Styling

You can add Sass to style your view. These styles get mixed with your pug to generate styled Dart code. Flutter-view supports that convert into code. For our example, you can easily add a text , , some , and add :

hello.pug

hello(flutter-view)
    .greeting Hello world!

hello.sass

.greeting
    color: red
    background-color: grey[200]
    text-transform: uppercase
    padding: 10 20

hello.dart

Hello() {
    return DefaultTextStyle.merge(
        style: TextStyle(
            color: Colors.red
        ),
        child: Container(
            decoration: BoxDecoration(
                color: Colors.grey[200]
            ),
            padding: EdgeInsets.only(
                top: 10,
                right: 20,
                bottom: 10,
                left: 20
            ),
            child: Text("Hello world!".toUpperCase),
        )
    );
}

Click the tabs to see the Pug code, the Sass styles we apply, and the code that flutter-view generates for you.

Making it Reactive

user.dart

class User extends Model {
    User({this.name, this.age});

    String name;
    int age;
}

hello.pug

hello(flutter-view :user)
    reactive(watch='user')
        .greeting Hello ${user.name}!

hello.dart

Widget Hello({user}) {
    return ReactiveWidget(
        watch: user as Listenable,
        builder: (context, $) {
            return Container(
                child: Text("Hello ${user.name}!")
            )
        },
    );
}

The view (hello.pug) takes a User (user.dart) as a parameter and watches it for changes. Now when we change the the user name and call user.notifyListeners(), the view will automatically update.

NextFAQ

Last updated 3 years ago