Iterable Segmented Knob

The iterable segmented knob allows you to dynamically enter an iterable value for a widget property in the Widgetbook UI. This is particularly useful for properties that require an iterable input, such as a List or Set of item.

Variants

The iterable knob has two variants:

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

Properties

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

context.knobs.iterable.segmented()

Example

Usage

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

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

enum OnlineStatusType { online, offline, busy }

context.knobs.iterableOrNull.segmented()

Example

Usage

To use the nullable iterable segmented knob, call the context.knobs.iterableOrNull.segmented() method.

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

enum OnlineStatusType { online, offline, busy }

Multi-snapshot Support

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 IterableKnobConfig page for more information.