Object Segmented Knob

The object segmented knob allows you to dynamically enter an object value for a widget property in the Widgetbook UI. This is particularly useful for properties that require an object input, such as a user profile or an enum value.

The object knob has two variants:

• context.knobs.object.segmented(): This variant allows you to enter an object value via a segmented button. It does not accept null values.
• context.knobs.objectOrNull.segmented(): This variant allows you to enter an object value via a segmented button or set the value to null. It is useful when the property can be optional.

In addition to the knob's base properties, the object segmented knob includes the following:

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

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

enum OnlineStatusType { online, offline, busy }

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

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

enum OnlineStatusType { online, offline, busy }

Multi-snapshot support for Widgetbook Cloud allows you to generate multiple screenshots of a single use case with varying values using KnobsConfigs and AddonsConfigs. Please refer to the ObjectKnobConfig page for more information.