A powerful tool that helps you develop, test, visualize, and organize your Flutter UI components.

Documentation • Get Started • Web Demo

Features

🧩 Use Cases

• Write use cases for your UI components to view and test them in isolation.
• Visually navigate use cases in a grid overview that shows thumbnails of your widgets, updating in real time.
• Sort them in a tree hierarchy and navigate using it.
• Search for use cases, even with typos or abbreviations.
• Browse Recently Used or Recently Added on the home page.
• Categorize your use cases using Tags.

🎛️ Knobs

• Configure your use case widgets using knobs that control your widget and can be controlled by your widget simultaneously.
• Define knob presets to configure predefined sets of values for your knobs and view the widget in all its possible states simultaneously using the overview.
• There are knobs for most common types, like double, int, bool, String, List<T>, etc., and their nullable counterparts.
• There are even special knobs for AnimationControllers and FocusNodes.

📏 Constraints

• Interactively change the BoxConstraints passed to your widgets and see how your widgets react to different sizes.
• Or change the constraints more precisely using input fields.
• Define custom presets for the constraints.
• Or use predefined device presets for common device sizes.
• Use zoom and pan gestures to view use cases in sizes larger than the viewport.

♿ Accessibility

• Inspect the semantic nodes of your use cases and all of their properties using interactive semantics overlays.
• Change Text Scale and Bold Text to test under different accessibility conditions.
• Simulate Color Blindness to verify sufficient contrast for all users.

🖼️ Theme, Background and Localization

• Change the theme of your use cases, even while viewing them in the overview.
• Define default backgrounds for your use cases or select from predefined backgrounds to override the default ones.
• Switch the locale used by your use cases.

🛠️ Customize your Werkbank

• Resize or collapse panels.
• Enter a focus mode for no distractions.
• Toggle between light mode and dark mode in your Werkbank.
• Reorder and collapse panels to prioritize the ones you need most.

And much more!

• 🔍 Zoom and Pan
  • Navigate your use cases using Figma-like zoom and pan gestures.
• 🏷️ Metadata
  • Augment use cases with metadata such as descriptions, tags, and URLs.
• 🧪 Tests
  • Use your use cases for golden tests and widget tests by displaying them without the UI of Werkbank.
• 🛠️ Addons
  • Create your own Addons using the extremely powerful Addon API, which is also used to implement knobs, constraints selection, semantics inspection, and much more.
• 🌐 Deployment
  • Deploy your Werkbank using Flutter's web support to share it with your team and use it for design reviews.
• 🔄 Hot Reload
  • Update everything with just a hot reload.

Writing Use Cases

To get a rough idea of how use cases are written, take a look at the following example. For more detailed explanations, visit our Documentation.

// Use cases are written as functions returning a `WidgetBuilder`.
WidgetBuilder sliderUseCase(UseCaseComposer c) {
  //                        ^^^^^^^^^^^^^^^^^
  // Use the `UseCaseComposer c` to customize the use case in many ways.

  // Add metadata to augment the use case.
  c.description('A super cool slider!');
  c.tags(['input', 'slider']);
  c.urls(['https://api.flutter.dev/flutter/material/Slider-class.html']);

  // Set the default background for the use case.
  c.background.named('Surface');

  // Customize the thumbnail in the overview to improve looks or avoid overflows.
  c.overview.minimumSize(width: 150, height: 50);

  // Set initial `BoxConstraints` and presets for the use case.
  // They can still be interactively changed in the UI.
  c.constraints.initial(width: 200);
  c.constraints.preset('Wide', width: 400);

  // Define knobs to control the widget's properties.
  final valueKnob = c.knobs.doubleSlider(
    'Value',
    initialValue: 0.5,
  );

  // Return a `WidgetBuilder` that builds your widget.
  return (context) {
    return Slider(
      // Use knob values in the widget.
      value: valueKnob.value,
      // Even SET knob values in the widget.
      onChanged: (value) => valueKnob.value = value,
    );
  };
}

Where to Go Next?

• 📖 Documentation
  • Learn everything about what Werkbank is and its technical details.
• 🚀 Get Started
  • If you already roughly know what Werkbank is, jump directly into setting up your Werkbank app.
• 🌐 Example Werkbank Web Demo
  • Try out a Werkbank app in your browser.
• 🛠️ Example Werkbank Code
  • Take a look at the code of the example web demo above and use it as a starting point for your own Werkbank app.