{"id":13551290,"url":"https://github.com/bluefireteam/dashbook","last_synced_at":"2025-05-15T10:00:52.176Z","repository":{"id":39971758,"uuid":"227484136","full_name":"bluefireteam/dashbook","owner":"bluefireteam","description":"Development tools to help you building UI on Flutter","archived":false,"fork":false,"pushed_at":"2025-01-07T20:41:10.000Z","size":7757,"stargazers_count":403,"open_issues_count":9,"forks_count":44,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-12T19:23:30.217Z","etag":null,"topics":["dart","flutter","hacktoberfest","storybook","widgets"],"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/bluefireteam.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,"zenodo":null}},"created_at":"2019-12-12T00:07:09.000Z","updated_at":"2025-05-03T07:01:23.000Z","dependencies_parsed_at":"2023-09-23T10:44:51.348Z","dependency_job_id":"c0a6aa3e-79c9-4103-a110-aa876b0a95f2","html_url":"https://github.com/bluefireteam/dashbook","commit_stats":{"total_commits":197,"total_committers":22,"mean_commits":8.954545454545455,"dds":"0.31472081218274117","last_synced_commit":"ee81bd693215dc5dd42e4cf66493248b44cbcf6b"},"previous_names":["erickzanardo/dashbook"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fdashbook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fdashbook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fdashbook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fdashbook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluefireteam","download_url":"https://codeload.github.com/bluefireteam/dashbook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319715,"owners_count":22051072,"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":["dart","flutter","hacktoberfest","storybook","widgets"],"created_at":"2024-08-01T12:01:45.670Z","updated_at":"2025-05-15T10:00:51.651Z","avatar_url":"https://github.com/bluefireteam.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Dashbook\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"dashbook\" width=\"600px\" src=\"https://github.com/erickzanardo/dashbook/raw/main/media/dashbook-logo-typo.png\"\u003e\n\u003c/p\u003e\n\nDashbook is a UI development tool for Flutter, it works as a development enviroment for the project widgets and also a showcase for common widgets on the app, it is heavly inspired by [Storybook](https://storybook.js.org/) library, so it should be very easy for people who has already used Storybook, to use Dashbook.\n\nIt currently supports both mobile and web, having a friendly layout built to work nice on web and large resolutions.\n\nHave any questions or ideas? Join our [Discord](https://discord.gg/FCHGNZ4yxF).\n\n## How to use\n\nAdd the dependency to your `pubspec.yaml`\n\n```\nflutter pub add dashbook\n```\n\n\u003e Tip ℹ️: If you use [mason](https://pub.dev/packages/mason_cli), a basic Dashbook brick called\n`dashbook_gallery` is available in brickhub.dev, which creates a basic gallery in seconds.\n\n\nA `Dashbook` instance has a collection of the app widgets (Stories) and its variants (Chapters). Here you can see a very simple example of how to use it.\n\n```dart\nimport 'package:flutter/material.dart';\n\nimport 'package:dashbook/dashbook.dart';\n\nvoid main() {\n  final dashbook = Dashbook();\n\n  // Adds the Text widget stories\n  dashbook\n      .storiesOf('Text')\n      // Decorators are easy ways to apply a common layout to all of the story chapters, here are using onde of Dashbook's decorators,\n      // which will center all the widgets on the center of the screen\n      .decorator(CenterDecorator())\n      // The Widget story can have as many chapters as needed\n      .add('default', (ctx) {\n        return Container(width: 300, child: Text(\n          ctx.textProperty(\"text\", \"Text Example\"),\n          textAlign: ctx.listProperty(\n              \"text align\",\n              TextAlign.center,\n              TextAlign.values,\n          ),\n          textDirection: ctx.listProperty(\n              \"text direction\",\n              TextDirection.rtl,\n              TextDirection.values,\n          ),\n          style: TextStyle(\n              fontWeight: ctx.listProperty(\n                  \"font weight\",\n                  FontWeight.normal,\n                  FontWeight.values,\n              ),\n              fontStyle: ctx.listProperty(\n                  \"font style\",\n                  FontStyle.normal,\n                  FontStyle.values,\n              ),\n              fontSize: ctx.numberProperty(\"font size\", 20)),\n        ));\n      });\n\n  dashbook\n      .storiesOf('RaisedButton')\n      .decorator(CenterDecorator())\n      .add('default', (ctx) =\u003e RaisedButton(child: Text('Ok'), onPressed: () {}));\n\n  // Since dashbook is a widget itself, you can just call runApp passing it as a parameter\n  runApp(dashbook);\n}\n```\n\n## Actions\n\nDashbook also provides a way for easily calling methods from its UI, these callbacks can be used for more complex examples which demands user interaction.\n\nFor example, a `Dialog` is something that isn't directly rendered on a page, but rather shows upon an action, an example for a `CustomDialog` widget could be achieved on Dashbook by using the following code:\n\n```dart\nfinal dashbook = Dashbook();\n\ndashbook\n  .storiesOf('CustomDialog')\n  .add('default', (ctx) {\n    ctx.action('Open dialog', (context) {\n      showDialog(\n        context: context,\n        builder: (_) =\u003e CustomDialog(),\n      );\n    });\n\n    return SizedBox();\n  });\n```\n\n## Example information\n\nOften an example may not be intuitive enough and the user may be lost without some instruction on how to interact with it. To mitigate that, text information can be linked to an example to serve as a guide, or to show any other relevant information.\n\nTo do so, simply use the `info` parameter on the `add` method of a story:\n\n```dart\nfinal dashbook = Dashbook();\n\ndashbook\n  .storiesOf('CustomDialog')\n  .add('default',\n    (ctx) {\n      ctx.action('Open dialog', (context) {\n        showDialog(\n          context: context,\n          builder: (_) =\u003e CustomDialog(),\n        );\n      });\n\n      return SizedBox();\n    },\n    info: 'Use the actions button on the side to show the dialog.',\n  );\n```\n\nThis will present a small `i` icon on the side toolbar that once clicked will present the information to the user.\n\nDashbook also offers the possibility to directly show the information on the preview area, removing the necessity for the user to click on the icon. To do so, pass `true` to the `pinInfo` parameter.\n\n```dart\nfinal dashbook = Dashbook();\n\ndashbook\n  .storiesOf('CustomDialog')\n  .add('default',\n    (ctx) {\n      // omitted ...\n    },\n    info: 'Use the actions button on the side to show the dialog.',\n    pinInfo: true,\n  );\n```\n\n## Preview area\n\nBy default Dashbook will provide the whole screen area for the preview, which means that its controll icons will appear floating above the example.\n\nThat behavior can be changed with the use of the `usePreviewSafeArea` parameter on `Dashbook` constructors, when setting this parameter to `true`, Dashbook will make sure that its icons will not appear floating above the example creating a safe area for the example preview.\n\n## Managing themes\n\nDashbook offers three of ways to let you change themes when viewing your stories. Dashbook iteself is built to use the provided theme to stylize its own UI, so whatever theme is provided, the Dashbook UI show works nice.\n\n### Single theme\n\nUsing the default constructor of the Dashbook, use the optional `theme` parameter to set the theme.\n\n```dart\nfinal dashbook = Dashbook(theme: ThemeData());\n```\n\n### Dual theme\n\nWhen your app has two theme, the `dualTheme` constructor can be used. Two parameters `light` and `dark` can be informed to set which `ThemeData` represents a light theme, and which represents the dark theme, an additional parameter `initWithLight` can be used to tell Dashbook which theme should be used initially (defaults to `true`).\n\nWhen using this, Dashbook will present an icon for the user to toggle between light and dark themes\n\n```dart\nfinal dashbook = Dashbook.dualTheme(\n  light: YourLightTheme(),\n  dark: YourDarkTheme(),\n);\n```\n\n### Multiple themes\n\nWhen an app have more than two themes, the `multiTheme` contructor can be used. It receives a `themes` parameter, which is a `Map\u003cString, ThemeData\u003e`, and an optional parameter `initialTheme` to inform which theme should be used initially (defaults to the first entry of the map).\n\nWhen using this, Dashbook will present an icon, which shows a modal with a dropdown menu to enable the user to choose between the informed themes\n\n```dart\nfinal dashbook = Dashbook.multiTheme(\n  themes: {\n    'theme1': Theme1(),\n    'theme2': Theme2(),\n    'theme3': Theme3(),\n  }\n);\n```\n\n### Visibility control properties\n\nSome more complex Widgets may feature several fields, which can lead to a very long list of properties which will in turn can create a confusing example.\n\nThis can be improved by the use of visibility control properties. This API allows a property to be shown or hidden according to the value of another property.\n\nFor example, let's imagine a Widget which can show both an information and an error message, controlled by a property called type, this widget also allows the user to customize both the error and information color, with visibility control properties the error color property can be shown only when the type is error.\n\nExample:\n\n```dart\ndashbook.storiesOf('MessageCard').decorator(CenterDecorator()).add(\n    'default',\n    (ctx) =\u003e MessageCard(\n        message: ctx.textProperty('message', 'Some cool message'),\n        type: ctx.listProperty('type', MessageCardType.info, MessageCardType.values),\n        errorColor: ctx.colorProperty(\n            'errorColor',\n            const Color(0xFFCC6941),\n            // this property will only be shown when type is error\n            visibilityControlProperty: ControlProperty('type', MessageCardType.error),\n        ),\n        infoColor: ctx.colorProperty(\n            'infoColor',\n            const Color(0xFF5E89FF),\n            // this property will only be shown when type is info\n            visibilityControlProperty: ControlProperty('type', MessageCardType.info),\n        ),\n    ),\n);\n```\n\n### Example\n![dashbook_13](https://user-images.githubusercontent.com/835641/109422625-1ac69800-79bb-11eb-8a08-62e9771a15e8.gif)\n\n## Structure\n\nDashbook is just a widget, so it can be ran in any way wanted, as there is no required structure that must be followed, although, we do recommend the following approach:\n\n - Create a file named `main_dashbook.dart` on the root source of your project (e.g. `lib/main_dashbook.dart`)\n - Create the Dashbook instance inside that file, calling the `runApp` method in the end (look on the example above)\n - Run it with the command `flutter run -t lib/main_dashbook.dart`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluefireteam%2Fdashbook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluefireteam%2Fdashbook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluefireteam%2Fdashbook/lists"}