{"id":19185591,"url":"https://github.com/flutter-view/documentation","last_synced_at":"2026-06-21T23:30:16.646Z","repository":{"id":100058945,"uuid":"159512533","full_name":"flutter-view/documentation","owner":"flutter-view","description":"Gitbook documentation for flutter-view","archived":false,"fork":false,"pushed_at":"2022-03-30T13:21:47.000Z","size":3439,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-04T04:47:02.314Z","etag":null,"topics":["documentation","flutter-view","gitbook"],"latest_commit_sha":null,"homepage":"https://flutter-view.gitbook.io/project/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flutter-view.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-28T14:13:09.000Z","updated_at":"2024-01-10T04:38:05.000Z","dependencies_parsed_at":"2023-06-27T03:24:15.134Z","dependency_job_id":null,"html_url":"https://github.com/flutter-view/documentation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fdocumentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fdocumentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fdocumentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fdocumentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flutter-view","download_url":"https://codeload.github.com/flutter-view/documentation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240261500,"owners_count":19773474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","flutter-view","gitbook"],"created_at":"2024-11-09T11:11:06.319Z","updated_at":"2026-06-21T23:30:16.601Z","avatar_url":"https://github.com/flutter-view.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\n\n****[**Flutter-view**](https://flutter-view.io) is an open source tool that makes writing reactive [Flutter](http://flutter.io) layouts a breeze. It lets you use [Pug](http://pugjs.org) and [Sass](http://sass-lang.com) to generate the Flutter Dart code that renders the views in your app.\n\nYou 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.\n\nFlutter-view 2.0.0 and up fully support writing null-safe code in Dart 2.13 and up.\n\n## Why views in Flutter\n\nIn 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.\n\nFlutter-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.\n\nThe 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.\n\n## Creating a view\n\nA single flutter-view in pug generates a Dart function that usually returns a widget tree.\n\n{% tabs %}\n{% tab title=\"Pug\" %}\n{% code title=\"hello.pug\" %}\n```c\nhello(flutter-view)\n    .greeting Hello world!\n```\n{% endcode %}\n{% endtab %}\n\n{% tab title=\"HTML\" %}\n{% code title=\"hello.html\" %}\n```markup\n\u003chello flutter-view\u003e\n    \u003cdiv class=\"greeting\"\u003e\n        Hello world!\n    \u003c/div\u003e\n\u003c/hello\u003e\n```\n{% endcode %}\n{% endtab %}\n\n{% tab title=\"Generated Dart\" %}\n{% code title=\"hello.dart\" %}\n```dart\nContainer Hello() {\n    return Container(\n        child: Text(\"Hello world!\")\n    );\n}\n```\n{% endcode %}\n{% endtab %}\n{% endtabs %}\n\n_Click the tabs to see the Pug code, the HTML representation of the Pug, and the Dart code that flutter-view generates for you._\n\nThis generated function can be used like any other Dart code, and will return the code that gives the greeting.\n\n## Adding Styling\n\nYou can add Sass to style your view. These styles get mixed with your pug to generate styled Dart code. Flutter-view supports [CSS style properties](reference/css-properties.md) that convert into code. For our example, you can easily add a text [**color**](reference/css-properties.md#color-color), [**background color**](reference/css-properties.md#box-shadow-2), some [**font properties**](reference/css-properties.md#box-shadow-8), and add [**padding**](reference/css-properties.md#padding):\n\n{% tabs %}\n{% tab title=\"Pug\" %}\n{% code title=\"hello.pug\" %}\n```c\nhello(flutter-view)\n    .greeting Hello world!\n```\n{% endcode %}\n{% endtab %}\n\n{% tab title=\"Sass\" %}\n{% code title=\"hello.sass\" %}\n```css\n.greeting\n    color: red\n    background-color: grey[200]\n    text-transform: uppercase\n    padding: 10 20\n```\n{% endcode %}\n{% endtab %}\n\n{% tab title=\"Generated Dart\" %}\n{% code title=\"hello.dart\" %}\n```dart\nHello() {\n    return DefaultTextStyle.merge(\n        style: TextStyle(\n            color: Colors.red\n        ),\n        child: Container(\n            decoration: BoxDecoration(\n                color: Colors.grey[200]\n            ),\n            padding: EdgeInsets.only(\n                top: 10,\n                right: 20,\n                bottom: 10,\n                left: 20\n            ),\n            child: Text(\"Hello world!\".toUpperCase),\n        )\n    );\n}\n```\n{% endcode %}\n{% endtab %}\n{% endtabs %}\n\n_Click the tabs to see the Pug code, the Sass styles we apply, and the code that flutter-view generates for you._\n\nFlutter-view supports [many CSS properties](reference/css-properties.md), and makes it easy to change styles and immediately see the effect. Since single CSS rules can apply to many elements, small CSS changes may have big code effects.\n\nYou can also fully leverage both Pug and Sass mixin and function support, allowing for some powerful patters, such as [different styling based on running Android or iOS](guide/untitled.md).\n\n## Making it Reactive\n\nFlutter-view does not force you into any particular Reactive model. For example it works well with streams. However, it comes with native [ScopedModel ](https://pub.dartlang.org/packages/scoped\\_model)support and a [small Dart support library](https://pub.dartlang.org/packages/flutter\\_view\\_tools) for terse reactive coding:\n\n{% tabs %}\n{% tab title=\"user.dart\" %}\n{% code title=\"user.dart\" %}\n```dart\nclass User extends Model {\n    User({this.name, this.age});\n\n    String name;\n    int age;\n}\n```\n{% endcode %}\n{% endtab %}\n\n{% tab title=\"hello.pug\" %}\n{% code title=\"hello.pug\" %}\n```c\nhello(flutter-view :user)\n    reactive(watch='user')\n        .greeting Hello ${user.name}!\n```\n{% endcode %}\n{% endtab %}\n\n{% tab title=\"generated hello.dart\" %}\n{% code title=\"hello.dart\" %}\n```dart\nWidget Hello({user}) {\n    return ReactiveWidget(\n        watch: user as Listenable,\n        builder: (context, $) {\n            return Container(\n                child: Text(\"Hello ${user.name}!\")\n            )\n        },\n    );\n}\n```\n{% endcode %}\n{% endtab %}\n{% endtabs %}\n\nThe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter-view%2Fdocumentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflutter-view%2Fdocumentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter-view%2Fdocumentation/lists"}