UIDynamo

UIDynamo is a development companion for developing UI components in isolation, increasing developer productivity exponentially.

Documentation: Create beautiful documentation for your components all in Flutter. The app is just a platform application that you can distribute anywhere for your team to interact with.

Storyboarding: Storyboard all of your app screens at once in a pan and zoom environment, or create custom routing flows to enable easy iteration.

Device Toolbar: Preview anything in this tool in light mode / dark mode, different languages, screen rotation, different display sizes, and more.

Flexibility: use this tool on your smartphone, tablet, desktop (mac), web browser (chrome), or wherever Flutter can run. More platforms will be on the way. Dynamo themes automatically to your application, but feel free to use Material theming to adjust the look and feel.

Props: use the props editor to see changes to your components live within the documentation.

Actions: use actions to display logs of component actions.

Localizations: display translations for your application and see them in different languages.

Plugins: Add plugins to appear in the plugins bar, or behind the scenes, to provide greater flexibility in your workflow.

Getting Started

There are two ways to add the library to your project.

Project Dependency

Adding the library as a project dependency will place it within your code as a library.

Add this line to your pubspec.yaml to add the library:

dependencies:
    ui_dynamo: "xx.xx.xx"

Replace with current version.

Add a folder in your project called dynamo. Place a main.dart file that you will run UIDynamo from. In your IDE add the file as a run configuration, separating Dynamo from your main application.

Separate Project

You can, alternatively, create a new flutter module that depends on your main application. This way you can isolate Dynamo completely from your application code.

Add a module called dynamo.

Add this line to your pubspec.yaml in the dynamo module:

dependencies:
    ui_dynamo: "xx.xx.xx"
    app:
      path: ../ # or application path

Setting up UIDynamo

In your main lib/main.dart of your application, adjust your App component to export its MaterialApp as a function:

MaterialApp buildApp() => MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

This is needed to use the main app in dynamo.

In your dynamo/main.dart, first add the run configuration and AppDynamo:

void main() => runApp(AppDynamo());

class AppDynamo extends StatelessWidget {
  const AppDynamo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dynamo.withApp(
      buildApp(),
      data: DynamoData(
        defaultDevice: DeviceSizes.iphoneX,
      ),
    );
  }
}

Add your Dynamo data

By default, UIDynamo will traverse your application routes, creating a Storyboard and Routes/ folder in the nav bar. Home is just a placeholder (and configureable).

You can add 3 kinds of items in the sidebar:

1. Storyboard: A pinch-zoom and pannable experience that allows you to easily add custom flows within your application all on one screen.

DynamoPage.storyBoard(title: 'Your Title', flowMapping: {
   'home': [
    '/home',
    '/company'
   ]
});

flowMapping a key-value-list mapping that specifies flows that display on screen from left to right. If you specify multiple, each mapping goes from top to bottom in order.

2. Folder: A collapsible section that contains more items. Can nest as many as you like.

DynamoFolder.of(title: 'Widgets', pages: [
    buildTextStylePage(),
    buildButtonsPage(),
    buildToastPage(),
    buildRadiosPage(),
    buildInputsPage(),
]);

3. Page: A single, focusable page that you can preview.

Simplest builder is:

DynamoPage.of(
    title: 'Title',
    icon: Icon(Icons.home),
    child: (context) =>
        MyWidget(),
);

Specify the title, icon, and child builder. The child builder only runs if you the widget is on screen.

Also we support a list:

DynamoPage.list(
  title: 'Alerts',
  icon: Icon(Icons.error),
  children: (context) => [
    Organization.container(
      title: Text('Network Alert'),
      children: <Widget>[
        NetworkAlertDialog(
          onOkPressed: context.actions.onPressed('Alert Ok Button'),
        ),
      ],
    ),
    Organization.container(
      title: Text('Confirmation Dialog'),
      children: <Widget>[
        ConfirmationAlertDialog(
          title: context.props.text(
              'Title', 'Are you sure you want to get Pizza?',
              group: confirmationGroup),
          content: context.props.text(
              'Content', 'You can always order later',
              group: confirmationGroup),
          onYesPressed: context.actions.onPressed('Alert Yes Button'),
          onNoPressed: context.actions.onPressed('Alert No Button'),
        ),
      ],
    )
  ],
)

title, icon, and children builder. The children builder only is used when on screen as well.

The list builder just displays content in a list.

UI Documentation Widgets

UIDynamo comes with a few widgets to support documentation.

PresentationWidget: Centers, contrains and adds padding around the edges of the view. Use Organization.presentation()

ExpandableWidgetSection: Displays content in an expandable container to keep documentation small and tidy. Use Organization.expandable()

WidgetContainer: Wraps content in a Card with a title and visual separation. Use Organization.container()

PropTable: A Table useful for displaying documentation for props on a Widget.

Setting up the table is not quite automatic yet (using reflection in future could automate it):

PropTable(
    items: [
      PropTableItem(
          name: 'Message',
          description: 'Displays a message for this toast'),
      PropTableItem(
        name: 'Mode',
        description: 'Displays a different UI mode',
        defaultValue: ToastMode.Success.toString(),
      ),
      PropTableItem(
        name: 'OnClose',
        description: 'Closes the Toast before the scheduled timeout',
        defaultValue: 'null',
      ),
    ],
);

Adding Props

Configuring Actions

Localizations

Custom Plugins

Maintainers

Andrew Grosner @agrosner