Light logoWidgetbook Docs
Discord

Object Knob

The object knob allows you to select from a list of objects using different UI controls. This is useful for properties that require a dynamic input with different states or objects of a specific type, such as enums or custom classes.

Variants and Usage

The object knob currently has the following variant:

Example: Object Segmented Knob

context.knobs.object.segmented()

Usage

To use the object segmented knob, call the context.knobs.object.segmented() method.

dart
Example: Object Segmented Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    status: context.knobs.object.segmented(
      label: 'status',
      options: [
        OnlineStatusType.online,
        OnlineStatusType.offline,
        OnlineStatusType.busy,
      ],
      labelBuilder: (OnlineStatusType value) => value.name,
    ),
  );
}

enum OnlineStatusType { online, offline, busy }

Properties

Besides the knob's base properties, the object segmented knob features:

  • options: The list of objects to select from.
  • labelBuilder: A function to convert an object to a display string.

Multi-snapshot Support

Multi-snapshot support allows you to generate multiple screenshots of a single use case with varying values using KnobsConfigs.

dart
Example: ObjectSegmentedKnobConfig
@UseCase(
  type: MyWidget,
  name: 'Default',
  cloudKnobsConfigs: {
    'online': [ObjectSegmentedKnobConfig('status', 'online')],
    'offline': [ObjectSegmentedKnobConfig('status', 'offline')],
    'busy': [ObjectSegmentedKnobConfig('status', 'busy')],
  },
)
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    status: context.knobs.object.segmented(
      label: 'status',
      options: [
        OnlineStatusType.online,
        OnlineStatusType.offline,
        OnlineStatusType.busy,
      ],
      labelBuilder: (OnlineStatusType value) => value.name,
    ),
  );
}

On this page