Duration Knob

The Duration knob renders a text field in the Widgetbook UI where you can dynamically enter a string value to specify a Duration is milliseconds for a widget property.

Varients

The String knob has two variants:

• context.knobs.duration(): This variant allows you to enter a Duration value. It does not accept null values.
• context.knobs.durationOrNull(): This variant allows you to enter a Duration value or null. It is useful when the property can be optional.

Properties

Besides the knob's base properties, the Duration knob does not feature any additional properties.

context.knobs.duration()

Example

Usage

To use a Duration knob, call the context.knobs.duration() method.

@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    duration: context.knobs.duration(label: 'duration') 
  );
}

context.knobs.durationOrNull()

Example

Usage

To use the nullable Duration knob, call the context.knobs.durationOrNull() method.

@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    duration: context.knobs.durationOrNull(label: 'duration'), 
  );
}

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 String Knob

@UseCase(
  type: MyWidget,
  name: 'Default',
  cloudKnobsConfigs: { 
    'duration': [DurationKnobConfig('duration', 2000)], 
  }, 
)
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    duration: context.knobs.duration(label: 'duration')
  );
}

Nullable Duration Knob

@UseCase(
  type: MyWidget,
  name: 'Default',
  cloudKnobsConfigs: { 
    'Without duration': [NullKnobConfig('duration')], 
    'With duration': [DurationKnobConfig('duration', 2000)], 
  }, 
)
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    duration: context.knobs.durationOrNull(label: 'duration')
  );
}