{"id":19502797,"url":"https://github.com/ml-opensource/ui_dynamo","last_synced_at":"2025-04-26T00:32:45.678Z","repository":{"id":106622811,"uuid":"260959060","full_name":"ml-opensource/ui_dynamo","owner":"ml-opensource","description":"A Flutter library to assist in rapid development for scalable mobile applications visually using component-driven design.","archived":false,"fork":false,"pushed_at":"2020-07-03T13:32:01.000Z","size":1483,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T05:22:55.702Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ml-opensource.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":"2020-05-03T15:25:51.000Z","updated_at":"2024-05-13T15:52:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"4c859ae8-7fa9-4e57-9288-b2d07e824c7d","html_url":"https://github.com/ml-opensource/ui_dynamo","commit_stats":null,"previous_names":["ml-opensource/ui_dynamo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-opensource%2Fui_dynamo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-opensource%2Fui_dynamo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-opensource%2Fui_dynamo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-opensource%2Fui_dynamo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ml-opensource","download_url":"https://codeload.github.com/ml-opensource/ui_dynamo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250917284,"owners_count":21507561,"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":[],"created_at":"2024-11-10T22:18:27.432Z","updated_at":"2025-04-26T00:32:45.334Z","avatar_url":"https://github.com/ml-opensource.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UIDynamo\n\nUIDynamo is a development companion for developing UI components in isolation, \nincreasing developer productivity exponentially. \n\n__Documentation__: Create beautiful documentation for your components all in Flutter. The app is just a platform application \nthat you can distribute anywhere for your team to interact with.\n\n__Storyboarding__: Storyboard all of your app screens at once in a pan and zoom environment, or create custom routing flows \nto enable easy iteration.\n\n__Device Toolbar__: Preview anything in this tool in light mode / dark mode, different languages, screen rotation, \ndifferent display sizes, and more.\n\n__Flexibility__: use this tool on your smartphone, tablet, desktop (mac), web browser (chrome), or wherever Flutter can run. \nMore platforms will be on the way. Dynamo themes automatically to your application, but feel free \nto use Material theming to adjust the look and feel.\n\n__Props__: use the props editor to see changes to your components live within the documentation. \n\n__Actions__: use actions to display logs of component actions.\n\n__Localizations__: display translations for your application and see them in different languages. \n\n__Plugins__: Add plugins to appear in the plugins bar, or behind the scenes, to provide greater flexibility in your workflow.\n\n![Preview](/assets/preview.png)\n\n![Preview2](/assets/preview_2.png)\n\n## Getting Started\n\nThere are two ways to add the library to your project.\n\n### Project Dependency \n\nAdding the library as a project dependency will place it within your code as a library.\n\nAdd this line to your pubspec.yaml to add the library:\n\n```yaml\ndependencies:\n    ui_dynamo: \"xx.xx.xx\"\n```\n\nReplace with current version.\n\nAdd a folder in your project called `dynamo`. Place a `main.dart` file \nthat you will run UIDynamo from. In your IDE add the file as a run configuration, separating Dynamo from your \nmain application.\n\n### Separate Project\n\nYou can, alternatively, create a new flutter module that depends on your main application. This way \nyou can isolate Dynamo completely from your application code. \n\nAdd a module called `dynamo`.\n\nAdd this line to your pubspec.yaml  in the `dynamo` module:\n\n```yaml\ndependencies:\n    ui_dynamo: \"xx.xx.xx\"\n    app:\n      path: ../ # or application path\n```\n\n### Setting up UIDynamo\n\nIn your main `lib/main.dart` of your application, adjust your App component to export its `MaterialApp` as \na function:\n\n```dart\nMaterialApp buildApp() =\u003e MaterialApp(\n      title: 'Flutter Demo',\n      theme: ThemeData(\n```\n\nThis is needed to use the main app in `dynamo`.\n\nIn your `dynamo/main.dart`, first add the run configuration and `AppDynamo`:\n\n```dart\nvoid main() =\u003e runApp(AppDynamo());\n\nclass AppDynamo extends StatelessWidget {\n  const AppDynamo({\n    Key key,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Dynamo.withApp(\n      buildApp(),\n      data: DynamoData(\n        defaultDevice: DeviceSizes.iphoneX,\n      ),\n    );\n  }\n}\n```\n\n### Add your Dynamo data\n\nBy default, UIDynamo will traverse your application routes, creating a \n`Storyboard` and `Routes/` folder in the nav bar. `Home` is just a placeholder (and configureable).\n\n![Default Setup](/assets/default_setup.png)\n\nYou can add 3 kinds of items in the sidebar:\n\n1. __Storyboard__: A pinch-zoom and pannable experience that allows you to easily add custom flows within your application all \non one screen.\n\n```dart\nDynamoPage.storyBoard(title: 'Your Title', flowMapping: {\n   'home': [\n    '/home',\n    '/company'\n   ]\n});\n```\n\n__flowMapping__ a key-value-list mapping that specifies flows that display on screen from left to right.\nIf you specify multiple, each mapping goes from top to bottom in order. \n\n![Storyboard Example](/assets/storyboard_example.png)\n\n\n2. __Folder__: A collapsible section that contains more items. Can nest as many as you like.\n\n```dart\nDynamoFolder.of(title: 'Widgets', pages: [\n    buildTextStylePage(),\n    buildButtonsPage(),\n    buildToastPage(),\n    buildRadiosPage(),\n    buildInputsPage(),\n]);\n```\n\n![Folder Example](/assets/folder_example.png)\n\n3. __Page__: A single, focusable page that you can preview.\n\nSimplest builder is:\n\n```dart\nDynamoPage.of(\n    title: 'Title',\n    icon: Icon(Icons.home),\n    child: (context) =\u003e\n        MyWidget(),\n);\n```\n\nSpecify the `title`, `icon`, and `child` builder. The child builder only runs if you the widget is on screen.\n\nAlso we support a list:\n\n```dart\nDynamoPage.list(\n  title: 'Alerts',\n  icon: Icon(Icons.error),\n  children: (context) =\u003e [\n    Organization.container(\n      title: Text('Network Alert'),\n      children: \u003cWidget\u003e[\n        NetworkAlertDialog(\n          onOkPressed: context.actions.onPressed('Alert Ok Button'),\n        ),\n      ],\n    ),\n    Organization.container(\n      title: Text('Confirmation Dialog'),\n      children: \u003cWidget\u003e[\n        ConfirmationAlertDialog(\n          title: context.props.text(\n              'Title', 'Are you sure you want to get Pizza?',\n              group: confirmationGroup),\n          content: context.props.text(\n              'Content', 'You can always order later',\n              group: confirmationGroup),\n          onYesPressed: context.actions.onPressed('Alert Yes Button'),\n          onNoPressed: context.actions.onPressed('Alert No Button'),\n        ),\n      ],\n    )\n  ],\n)\n```\n\n`title`, `icon`, and `children` builder. The `children` builder only is used when on screen as well. \n\nThe list builder just displays content in a list.\n\n\n## UI Documentation Widgets\n\nUIDynamo comes with a few widgets to support documentation.\n\n`PresentationWidget`: Centers, contrains and adds padding around the edges of the view. \nUse `Organization.presentation()` \n\n`ExpandableWidgetSection`: Displays content in an expandable container to keep documentation small and tidy. \nUse `Organization.expandable()`\n\n![Expandable Example](/assets/expandable_example.png)\n\n`WidgetContainer`: Wraps content in a `Card` with a `title` and visual separation. \nUse `Organization.container()`\n\n\n\n![Container Example](/assets/container_example.png)\n\n\n`PropTable`: A `Table` useful for displaying documentation for props on a `Widget`.\n\nSetting up the table is not quite automatic yet (using reflection in future could automate it):\n\n```dart\nPropTable(\n    items: [\n      PropTableItem(\n          name: 'Message',\n          description: 'Displays a message for this toast'),\n      PropTableItem(\n        name: 'Mode',\n        description: 'Displays a different UI mode',\n        defaultValue: ToastMode.Success.toString(),\n      ),\n      PropTableItem(\n        name: 'OnClose',\n        description: 'Closes the Toast before the scheduled timeout',\n        defaultValue: 'null',\n      ),\n    ],\n);\n```\n\n![PropTable](/assets/prop_table_example.png)\n\n## Adding Props\n\n\n## Configuring Actions\n\n## Localizations\n\n## Custom Plugins  \n\n\n## Maintainers\n\nAndrew Grosner [@agrosner](https://www.github.com/agrosner)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml-opensource%2Fui_dynamo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fml-opensource%2Fui_dynamo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml-opensource%2Fui_dynamo/lists"}