{"id":16329151,"url":"https://github.com/waseemdev/vscode-flutter.xml-layout","last_synced_at":"2025-08-21T00:12:33.098Z","repository":{"id":44554080,"uuid":"197221599","full_name":"waseemdev/vscode-flutter.xml-layout","owner":"waseemdev","description":"XML Layout for Flutter. Brings Angular's style to Flutter!","archived":false,"fork":false,"pushed_at":"2023-12-18T15:30:08.000Z","size":304,"stargazers_count":74,"open_issues_count":5,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T04:23:34.216Z","etag":null,"topics":["dart","flutter","vscode","xml-layout"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waseemdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2019-07-16T15:36:34.000Z","updated_at":"2024-12-03T20:13:50.000Z","dependencies_parsed_at":"2025-02-11T00:31:13.859Z","dependency_job_id":"71e52ad8-f1fa-4ef4-a10d-8a8705fe7098","html_url":"https://github.com/waseemdev/vscode-flutter.xml-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/waseemdev/vscode-flutter.xml-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fvscode-flutter.xml-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fvscode-flutter.xml-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fvscode-flutter.xml-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fvscode-flutter.xml-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waseemdev","download_url":"https://codeload.github.com/waseemdev/vscode-flutter.xml-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fvscode-flutter.xml-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271405892,"owners_count":24753875,"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","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dart","flutter","vscode","xml-layout"],"created_at":"2024-10-10T23:14:42.947Z","updated_at":"2025-08-21T00:12:33.068Z","avatar_url":"https://github.com/waseemdev.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\nImagine that you can do this :\n```XML\n\u003cContainer width=\"50 | widthPercent\"\n           height=\"50 | heightPercent\"\n           color=\"blue\"\n           :text=\"'Hello world!'\"\n           :opacity=\".9\"\n           :center\n           :if=\"ctrl.textVisible | behavior\" /\u003e\n```\nInstead of this:\n```dart\n    final size = MediaQuery.of(context).size;\n    final __widget = StreamBuilder(\n      initialData: ctrl.textVisible.value,\n      stream: ctrl.textVisible,\n      builder: (BuildContext context, snapshot) {\n        if (snapshot.data) {\n          return Opacity(\n            opacity: .9,\n            child: Center(\n              child: Container(\n                color: Colors.blue,\n                height: (size.height * 50) / 100.0,\n                width: (size.width * 50) / 100.0,\n                child: Text(\n                  'Hello world!'\n                )\n              )\n            )\n          );\n        }\n        else {\n          return Container(width: 0, height: 0);\n        }\n      }\n    );\n    return __widget;\n```\nWhich is about 20 lines of code, and if you just updated the `:text` property to use a stream variable `:text=\"ctrl.myTextStream | stream\"` that will add another 4 lines of code for the StreamBuilder.\n\n\nExtension features:\n--------\n* Separates UI code (widget and widget's state) from the business logic.\n* Brings some Angular's features like pipes, conditionals...\n* Provides built-in properties \u0026 pipes to make the coding much easier.\n* Generates localization code depending on json files.\n* Forms \u0026 animation made easy.\n* Customizable! so developers can add their own properties and modify some features.\n* Supports Code completion, hover information, Go to Definition, diagnostics and code actions.\n\n\n## Example\n[Here is a working example](https://github.com/waseemdev/flutter_xmllayout_example)\n\n\n# Get Started\n\n1. Install the extension from [vscode marketplace](https://marketplace.visualstudio.com/items?itemName=WaseemDev.flutter-xml-layout)\n2. Create a new flutter project\n3. Install prerequisites packages:\n    * [flutter_xmllayout_helpers](https://pub.dartlang.org/packages/flutter_xmllayout_helpers)\n    * [provider](https://pub.dartlang.org/packages/provider)\n    * flutter_localizations\n```yaml\ndependencies:\n  flutter:\n    sdk: flutter\n  flutter_localizations:\n    sdk: flutter\n  provider: ^3.0.0+1\n  flutter_xmllayout_helpers: ^0.0.9\n```\n4. Apply one of the following steps:\n    * Clear all `main.dart` content then use `fxml_app` snippet to create the app.\n    * Modify `main.dart` to use `MultiProvider` from `provider` package:\n        - Register `PipeProvider` (from `flutter_xmllayout_helpers` package) as a provider.\n        - Register `RouteObserver\u003cRoute\u003e` as a provider (only if you want to use RouteAware events in your widgets' controllers).\n\n## Localization:\n1. Create `i18n` folder inside `lib` folder and add JSON files named with locale codes e.g. `en.json`.\n2. Import `i18n/gen/delegate.dart` in the main file.\n3. Register `AppLocalizationsDelegate()` in `localizationsDelegates` parameter of the `MaterialApp`.\n4. To use localized text in the UI see [Pipes](./docs/pipes.md) docs.\n\n## XML layout:\n1. Create a new folder and name it as your page/widget name e.g. `home`.\n2. Then create home.xml file inside `home` folder.\n3. Use `fxml_widget` snippet to create the starter layout, modify it as you want then save it. the extension will generate a file named `home.xml.dart` which contains UI code, and `home.ctrl.dart` file (if not exists) that contains the controller class which is the place you should put your code in (will be generated only if you added `controller` property).\n\nExample:\n```XML\n\u003cHomePage controller=\"HomeController\" routeAware\n    xmlns:cupertino=\"package:flutter/cupertino.dart\"\u003e\n\n  \u003cScaffold\u003e\n\n    \u003cappBar\u003e\n      \u003cAppBar\u003e\n        \u003ctitle\u003e\n          \u003cText text=\"'Home'\" /\u003e\n        \u003c/title\u003e\n      \u003c/AppBar\u003e\n    \u003c/appBar\u003e\n\n    \u003cbody\u003e\n      \u003cColumn mainAxisAlignment=\"center\" crossAxisAlignment=\"center\"\u003e\n        \u003cImage :use=\"asset\" source=\"'assets/my_logo.png'\" /\u003e\n        \u003cText text=\"'Hello world!'\" /\u003e\n        \u003cIcon icon=\"CupertinoIcons.home\" /\u003e\n      \u003c/Column\u003e\n    \u003c/body\u003e\n  \u003c/Scaffold\u003e\n\u003c/HomePage\u003e\n```\n\n`HomePage` (root element) the name of your widget.\n`controller` an optional property, the controller name you want to generate.\n`routeAware` an optional property, which generates navigation events (`didPush()`, `didPop()`, `didPushNext()` and `didPopNext()`).\n`xmlns:*` an optional property(s) used to import packges and files to be used in HomePage class. (in this example we imported cupertino.dart to use CupertinoIcons).\n\n\n## Controller:\nIf you added a `controller` property to your widget then will be generated (if not exists), the file looks like this:\n```dart\nimport 'package:flutter/widgets.dart';\nimport 'home.xml.dart';\n\nclass HomeController extends HomeControllerBase {\n\n  //\n  // here you can add you own logic and call the variables and methods\n  // within the XML file. e.g. \u003cText text=\"ctrl.myText\" /\u003e\n  //\n\n  @override\n  void didLoad(BuildContext context) {\n  }\n\n  @override\n  void onBuild(BuildContext context) {\n  }\n\n  @override\n  void afterFirstBuild(BuildContext context) {\n  }\n\n  @override\n  void dispose() {\n    super.dispose();\n  }\n}\n```\n\n# Features documentation\n\n### 1. [Wrapper properties](./docs/wrapper-properties.md)\n### 2. [Pipes](./docs/pipes.md)\n### 3. [Custom properties](./docs/custom-properties.md)\n### 4. [Injecting providers](./docs/providers.md)\n### 5. [Parameters](./docs/parameters.md)\n### 6. [Adding controllers to widgets](./docs/controllers.md)\n### 7. [Adding mixin to widget's states](./docs/mixins.md)\n### 8. [Localization](./docs/localization.md)\n### 9. [Developer customization](./docs/customization.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaseemdev%2Fvscode-flutter.xml-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaseemdev%2Fvscode-flutter.xml-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaseemdev%2Fvscode-flutter.xml-layout/lists"}