Iterable Knob
The iterable knob renders a segmented button in the Widgetbook UI where you can dynamically select an iterable value for a widget property. This is particularly useful for properties that require an iterable input, such as a configuration iterable for a widget.
Variants and Usage
The iterable 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.
Regular iterable knob
Example: IterableKnobConfig
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'online and busy': [IterableKnobConfig('status', '[online,busy]')],
'offline and busy': [IterableKnobConfig('status', '[offline,busy]')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
status: context.knobs.iterable.segmented<OnlineStatusType>(
label: 'status',
labelBuilder: (value) => value.name,
options: [
OnlineStatusType.online,
OnlineStatusType.offline,
OnlineStatusType.busy,
],
),
);
}
enum OnlineStatusType { online, offline, busy }
Nullable iterable Knob
Example: NullKnobConfig
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'no status': [NullKnobConfig('status')],
'online and busy': [IterableKnobConfig('status', '[online,busy]')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
status: context.knobs.iterableOrNull.segmented<OnlineStatusType>(
label: 'status',
labelBuilder: (value) => value.name,
options: [
OnlineStatusType.online,
OnlineStatusType.offline,
OnlineStatusType.busy,
],
),
);
}
enum OnlineStatusType { online, offline, busy }