{"id":23244508,"url":"https://github.com/ghostwalker562/flutterbook","last_synced_at":"2025-08-20T04:31:31.791Z","repository":{"id":43003182,"uuid":"384322867","full_name":"GhostWalker562/flutterbook","owner":"GhostWalker562","description":"📓 Storyboard your components with Flutterbook. Develop, document, \u0026 test any kind of Flutter component.","archived":false,"fork":false,"pushed_at":"2023-12-08T22:15:40.000Z","size":357,"stargazers_count":33,"open_issues_count":3,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-15T15:29:39.106Z","etag":null,"topics":["flutter"],"latest_commit_sha":null,"homepage":"","language":"Dart","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/GhostWalker562.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}},"created_at":"2021-07-09T04:41:27.000Z","updated_at":"2024-05-06T15:33:55.000Z","dependencies_parsed_at":"2022-08-15T23:30:32.711Z","dependency_job_id":"b48cc40f-6f9f-48c8-8d2e-1de7d3602695","html_url":"https://github.com/GhostWalker562/flutterbook","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/GhostWalker562%2Fflutterbook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GhostWalker562%2Fflutterbook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GhostWalker562%2Fflutterbook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GhostWalker562%2Fflutterbook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GhostWalker562","download_url":"https://codeload.github.com/GhostWalker562/flutterbook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230394214,"owners_count":18218705,"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":["flutter"],"created_at":"2024-12-19T06:44:48.741Z","updated_at":"2024-12-19T06:44:49.318Z","avatar_url":"https://github.com/GhostWalker562.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://i.imgur.com/MiGH9tW.png\" alt=\"Flutterbook\" /\u003e\n\n# Flutterbook\n\nA storyboarding tool to accelerate the development of Flutter widgets. Inspired by Storybook.js.\n\n**The package is built to support Windows and Web layouts. There is no support for mobile support at the moment. This is new and still under heavy development, expect many changes to occur with usage.**\n\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-purple.svg\" alt=\"License: MIT\"\u003e\u003c/a\u003e\n\n---\n\nGo subscribe to my YouTube channel to support development.\n\n# [![MOONSDONTBURN Header](https://i.imgur.com/1QHjcUZ.png)](https://www.youtube.com/channel/UCurQRmT17EyOIrdPseiastg)\n\n### Demo\n\n\u003ca href=\"https://flutterbook.vercel.app/#/\" target=\"_blank\"\u003eDemo Link Here\u003c/a\u003e\n\n## Overview ✨\n\n#### Creating the Main\n\nStart by creating the storyboard widget. This will wrap the Flutterbook widget\nso that when it is edited, it will hot reload.\n\n```dart\nclass Storyboard extends StatelessWidget {\n  const Storyboard({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return FlutterBook(\n      categories: [\n          // organizers ...\n      ],\n    );\n  }\n}\n```\n\nAfter creating the Storyboard widget, you can run it by using the main. I recommend making another\nfile named `main_storyboard.dart` to maintain your storyboard.\n\n```dart\nvoid main() {\n  runApp(const Storyboard());\n}\n// Or run it directly, but this will cost the hot reload.\n// void main() {\n//   runApp(const Flutterbook(categories:[...]));\n// }\n```\n\n#### How to add Widgets\n\nTo add widgets, you simply put `Organizers`, aka `Category`, `Folder`, `Component`, and `ComponentState`.\n\nThe hierarchy goes\n\n`Category` \u003e `Folder` \u003e `Component` \u003e `ComponentState`\n\nbut you may also do\n\n`Category` \u003e `Component` \u003e `ComponentState`\n\nor\n\n`Category` \u003e `Folder` \u003e `Folder` \u003e `Component` \u003e `ComponentState`\n\nHere is a complex example of a single `Category`. In the example, we use the builder\nwhere we are able to access different controls.\n\n```dart\nCategory(\n    categoryName: 'LIBRARY',\n    organizers: [\n    Folder(\n        folderName: 'Charts',\n        organizers: [\n        Component(\n            componentName: 'LineGraph',\n            states: [\n            ComponentState.child(\n                stateName: 'Default Container',\n                child: Container(),\n            ),\n            ],\n        ),\n        ],\n    ),\n    Component(\n        componentName: 'Button',\n        compenentMarkdoown: \"\"\"##A global button component\"\"\",\n        states: [\n        ComponentState(\n            stateName: 'Primary',\n            markdown: \"\"\"Used for the main action to be performed\"\"\"\n            codeSample:  r'''\nButton.primary(\n  child: Text('Primary Button'),\n  onPressed: () {},\n);\n'''\n            builder: (context, c) {\n            return Center(\n                child: SizedBox(\n                width: c.number(\n                    label: 'Number',\n                    initial: 50,\n                    min: 50,\n                    max: 250,\n                ),\n                height: c.number(\n                    label: 'height',\n                    initial: 50,\n                    min: 50,\n                    max: 250,\n                    description: 'random stuff',\n                ),\n                child: CupertinoButton.filled(\n                    onPressed: c.boolean(\n                    label: 'boolean',\n                    initial: true,\n                    )\n                        ? () {}\n                        : null,\n                    child: Text(\n                    c.text(label: 'Text', initial: 'Hello World'),\n                    ),\n                ),\n                ),\n            );\n            },\n        ),\n        ],\n    ),\n    ],\n),\n```\n\n#### That's it!\n\n## Roadmap 🚧\n\n- [ ] Mobile Support\n- [ ] 100% Code Coverage Testing\n- [X ] Documentation Support in ComponentState's\n- [ ] Better Docs\n- [X ] Device Previews\n- [ ] Shareable Handoffs\n- [ ] Optimization\n\n## Contributors 🔥\n\n_Your name could be here_ 😉\n\n\u003ca href=\"https://github.com/GhostWalker562/flutterbook/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=GhostWalker562/flutterbook\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostwalker562%2Fflutterbook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghostwalker562%2Fflutterbook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostwalker562%2Fflutterbook/lists"}