{"id":15484484,"url":"https://github.com/crazelu/flutterfromyaml","last_synced_at":"2025-04-22T17:08:27.753Z","repository":{"id":218300356,"uuid":"745955386","full_name":"Crazelu/FlutterFromYaml","owner":"Crazelu","description":"An experiment born out of a simple curious question: What if you could build a screen in Flutter code using yaml?","archived":false,"fork":false,"pushed_at":"2024-01-21T03:07:48.000Z","size":52,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-19T06:27:43.874Z","etag":null,"topics":["code-generation","flutter","yaml","yaml-parser"],"latest_commit_sha":null,"homepage":"","language":"Dart","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/Crazelu.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}},"created_at":"2024-01-20T16:51:11.000Z","updated_at":"2024-04-12T22:34:54.000Z","dependencies_parsed_at":"2024-01-21T04:28:59.741Z","dependency_job_id":null,"html_url":"https://github.com/Crazelu/FlutterFromYaml","commit_stats":null,"previous_names":["crazelu/flutterfromyaml"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazelu%2FFlutterFromYaml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazelu%2FFlutterFromYaml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazelu%2FFlutterFromYaml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazelu%2FFlutterFromYaml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Crazelu","download_url":"https://codeload.github.com/Crazelu/FlutterFromYaml/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250285695,"owners_count":21405297,"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":["code-generation","flutter","yaml","yaml-parser"],"created_at":"2024-10-02T05:41:02.465Z","updated_at":"2025-04-22T17:08:27.704Z","avatar_url":"https://github.com/Crazelu.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlutterFromYaml\n\nAn experiment born out of a simple curious question: *What if you could build a screen in Flutter code using yaml?*\n\nThe answer? Well yes you can!\n\nThis project demonstrates how the default Flutter counter app can be generated from a YAML configuration file.\nState variables and functions can be injected into widgets using bindings to make them reactive and have them execute functions (e.g onTap of GestureDetector).\n\n## How To Use 🏗️\n- Clone the project\n- Open the project directory in your terminal\n- Run the following command to generate the `main.dart` file\n\n```dart\ndart run lib/build.dart\n```\n- Run the app on your device\n\n## Supported Widgets ✅\n- [x] Center\n- [x] Column\n- [x] FloatingActionButton\n- [x] GestureDetector\n- [x] Icon\n- [x] ListeableBuilder\n- [x] Row\n- [x] Scaffold\n- [x] AppBar\n- [x] SizedBox\n- [x] Text\n- [x] StatelessWidget\n- [x] StatefulWidget\n- [ ] TextButton\n- [ ] Container\n- [ ] Image\n\n## Supported injectable bindings 💉\n- [x] State variables (implemented as ValueNotifiers) of a StatefulWidget which are also auto disposed.\n- [x] Functions defined for the State of a StatefulWidget\n\n### Bindings in YAML\n```yaml\nStatefulWidget:\n  name: GeneratedYamlHomePage\n  state:\n    - counter:\n        type: int\n        defaultValue: 0\n    - multiplier:\n        type: String\n        defaultValue: \"''\"\n  functions:\n    increment: \"counter.value += 1;\"\n    decrement: \"counter.value -= 1;\"\n```\n\nThen use in widgets like so:\n\n```yaml\n    Column:\n        mainAxisAlignment: center\n        children:\n        - Text:\n            value: \"Hello from Yaml\\\\nYou've pressed this button\"\n            textAlign: center\n            style:\n                fontSize: 24\n                fontWeight: 500\n        - SizedBox:\n            height: 12\n        - ListenableBuilder:\n            listenable: \"@@state.counter\" #This will be injected\n            child:\n                Text:\n                value: \"${counter.value} times\"\n                style:\n                    fontSize: 20\n        - SizedBox:\n            height: 12\n        - ListenableBuilder:\n            listenable: [\"@@state.multiplier\", \"@@state.counter\"] #This will be injected\n            child:\n                Text:\n                value: \"${counter.value} x ${counter.value} is ${multiplier.value}\"\n                style:\n                    fontSize: 20\n        - SizedBox:\n            height: 32\n        - GestureDetector:\n            bind: true\n            onTap: \"@@function.increment\" #This will be injected since 'bind' is true\n            child:\n            Icon:\n                iconData:\n                codePoint: 0xe047\n```\n\nGenerated Dart code:\n```dart\n ...\n  //collapsed some code\n ...\n  final ValueNotifier\u003cint\u003e counter = ValueNotifier(0);\n\n  final ValueNotifier\u003cString\u003e multiplier = ValueNotifier('');\n\n  increment() {\n    counter.value += 1;\n  }\n\n  decrement() {\n    counter.value -= 1;\n  }\n  ...\n  //collapsed some code\n  ...\n  Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        children: [\n          Text(\n            \"Hello from Yaml\\nYou've pressed this button\",\n            textAlign: TextAlign.center,\n            style: const TextStyle(\n              fontSize: 24,\n              fontWeight: FontWeight.w500,\n            ),\n          ),\n          const SizedBox(\n            height: 12,\n          ),\n          ListenableBuilder(\n            listenable: counter,\n            builder: (context, _) {\n              return Text(\n                \"${counter.value} times\",\n                style: const TextStyle(fontSize: 20),\n              );\n            },\n          ),\n          const SizedBox(\n            height: 12,\n          ),\n          ListenableBuilder(\n            listenable: Listenable.merge([\n              multiplier,\n              counter,\n            ]),\n            builder: (context, _) {\n              return Text(\n                \"${counter.value} x ${counter.value} is ${multiplier.value}\",\n                style: const TextStyle(fontSize: 20),\n              );\n            },\n          ),\n          const SizedBox(\n            height: 32,\n          ),\n          GestureDetector(\n            onTap: () {\n            increment();\n            },\n            child: const Icon(IconData(57415, fontFamily: 'MaterialIcons')),\n           ),\n        ],\n      )\n```\n\n## Contributions 🫱🏾‍🫲🏼\n\nFeel free to contribute to this project.\n\nIf you find a bug or want a feature, but don't know how to fix/implement it, please fill an [issue](https://github.com/Crazelu/flutterfromyaml/issues).  \nIf you fixed a bug or implemented a feature, please send a [pull request](https://github.com/Crazelu/flutterfromyaml/pulls).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazelu%2Fflutterfromyaml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrazelu%2Fflutterfromyaml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazelu%2Fflutterfromyaml/lists"}