{"id":14967550,"url":"https://github.com/flutter-view/flutter-view","last_synced_at":"2025-05-02T22:31:19.376Z","repository":{"id":45075684,"uuid":"141303929","full_name":"flutter-view/flutter-view","owner":"flutter-view","description":"Create flutter view widgets using pug and sass","archived":false,"fork":false,"pushed_at":"2023-02-04T04:59:15.000Z","size":631,"stargazers_count":151,"open_issues_count":8,"forks_count":5,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-25T14:01:31.241Z","etag":null,"topics":["css","dart","flutter","html","mvc","npm","pug","sass","typescript"],"latest_commit_sha":null,"homepage":"https://flutter-view.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","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":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-17T14:49:17.000Z","updated_at":"2025-02-08T10:57:19.000Z","dependencies_parsed_at":"2023-02-18T14:00:49.951Z","dependency_job_id":null,"html_url":"https://github.com/flutter-view/flutter-view","commit_stats":null,"previous_names":["blueneogeo/flutter-view"],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fflutter-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fflutter-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fflutter-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter-view%2Fflutter-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flutter-view","download_url":"https://codeload.github.com/flutter-view/flutter-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252116223,"owners_count":21697338,"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":["css","dart","flutter","html","mvc","npm","pug","sass","typescript"],"created_at":"2024-09-24T13:38:14.805Z","updated_at":"2025-05-02T22:31:14.366Z","avatar_url":"https://github.com/flutter-view.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FLUTTER-VIEW\n\nhttps://flutter-view.io\n\nFlutter-view is a 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) \\(or HTML and CSS if you prefer\\) 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, HTML, Sass or CSS file, it automatically generates or updates a matching Dart file.\n\n`NOTE: From 2.0 on, Flutter-view generates null-safe code (Dart 2.12 and forward). Use an older version if you use an older version of Dart.`\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 your code well.\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. 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.\n\n## Creating a view\n\nA single flutter-view generates a Dart function that usually returns a widget tree. You use Pug to create a view, which gets transformed into HTML and then Dart code automatically:\n\nPug:\n\n```pug\nhello(flutter-view)\n    .greeting Hello world!\n```\n\nGenerated (internal) HTML:\n\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\nGenerated Dart:\n\n```dart\nContainer Hello() {\n    return Container(\n        child: Text(\"Hello world!\")\n    );\n}\n```\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 with CSS rules to style your view. Flutter-view contains plugins that take your CSS properties and convert them into code. For our example, you can easily add a text color, background color, some font properties, and add padding:\n\nPug:\n\n```pug\nhello(flutter-view)\n    .greeting Hello world!\n```\n\nSass:\n\n```sass\n.greeting\n    color: red\n    background-color: grey[200]\n    text-transform: uppercase\n    padding: 10 20\n```\n\nGenerated Dart:\n\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\nFlutter-view supports many CSS properties, 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.\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\nuser.dart:\n\n```dart\nclass User extends Model {\n    User({this.name, this.age});\n\n    String name;\n    int age;\n}\n```\n\nhello.pug:\n\n```pug\nhello(flutter-view :user)\n    reactive(watch='user')\n        .greeting Hello ${user.name}!\n```\n\ngenerated hello.dart:\n\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\nThe view now takes a User 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\n## Requirements\n\n- Flutter\n- A working Typescipt installation (install using _npm install -g typescript_)\n\n## Getting Started\n\nIn your terminal of choice type:\n\n    npm install -g flutter-view\n\n## Building Locally\n\nOnly necessary if you want to modify flutter-view yourself.\n\nSteps to build the project locally:\n\n1. clone this repository\n2. change to the project directory\n3. _npm install_\n4. _tsc_\n5. _npm link_\n\nTyping _flutter-view_ in any directory should now work.\n\n## Usage\n\nIn a terminal, go into the directory of your Flutter project, and type _flutter-view -w lib_. This should start the tool watching on your lib directory.\n\nIn general, use is as follows:\n\n    \u003e flutter-view [-w] \u003cdirectory\u003e\n\nYou can use the following flags:\n\n    -V, --version        output the version number\n    -w, --watch          Watch for changes\n    -c, --config \u003cfile\u003e  Optional config file to use (default: flutter-view.json)\n    -h, --help           output usage information\n\n# Full documentation\n\nFor a guide and reference to the pug and sass styles, check the [online documentation](https://docs.flutter-view.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter-view%2Fflutter-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflutter-view%2Fflutter-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter-view%2Fflutter-view/lists"}