Object Knob
The object knob renders a segmented button or a dropdown menu in the Widgetbook UI where you can dynamically select an object value for a widget property. This is particularly useful for properties that require an object input, such as a configuration object for a widget, or an enum value.
Variants and Usage
The object knob has one variant with each a regular and a nullable type:
For the usage please refer to the respective pages.
Multi-snapshot Support
Multi-snapshot support allows you to generate multiple screenshots of a single use case with varying values using KnobsConfigs and AddonsConfigs.
The blow information shows the ObjectKnobConfig for the Object Segmented
Knob, but the ObjectKnobConfig can be applied to the Object Dropdown Knob as well.
Regular object knob
Example: ObjectKnobConfig
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'online': [ObjectKnobConfig('status', 'online')],
'offline': [ObjectKnobConfig('status', 'offline')],
'busy': [ObjectKnobConfig('status', 'busy')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
status: context.knobs.object.segmented<OnlineStatusType>(
label: 'status',
labelBuilder: (value) => value.name,
options: [
OnlineStatusType.online,
OnlineStatusType.offline,
OnlineStatusType.busy,
],
),
);
}
enum OnlineStatusType { online, offline, busy }
Nullable object Knob
Example: NullKnobConfig
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'no status': [NullKnobConfig('status')],
'online': [ObjectKnobConfig('status', 'online')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
status: context.knobs.objectOrNull.segmented<OnlineStatusType>(
label: 'status',
labelBuilder: (value) => value.name,
options: [
OnlineStatusType.online,
OnlineStatusType.offline,
OnlineStatusType.busy,
],
),
);
}
enum OnlineStatusType { online, offline, busy }