Light logoWidgetbook Docs
Discord

Duration Knob

The Duration knob renders a set of text fields in the Widgetbook UI where you can dynamically enter a Duration value for a widget property. By default, it shows inputs for hours, minutes, and seconds.

Variants

The Duration knob has two variants:

  • context.knobs.duration(): Lets you enter a Duration value. It does not accept null.
  • context.knobs.durationOrNull(): Lets you enter a Duration value or null. This is useful when the property is optional.

Properties

Besides the knob's base properties, the Duration knob supports one additional property to control which time units are displayed:

PropertyTypeDefaultDescription
unitsSet<DurationUnit>{DurationUnit.hours, DurationUnit.minutes, DurationUnit.seconds}The time units to show as separate inputs.

DurationUnit has days, hours, minutes, seconds, milliseconds, and microseconds. Units render largest to smallest regardless of set order, and the largest absorbs any overflow so no value is hidden (e.g. with only seconds, Duration(seconds: 90) shows 90).

context.knobs.duration()

Example

Usage

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

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

To customize which time units are shown, pass a units set:

dart
Example: Duration Knob with custom units
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    duration: context.knobs.duration( 
      label: 'duration', 
      units: const { 
        DurationUnit.days, 
        DurationUnit.hours, 
        DurationUnit.minutes, 
        DurationUnit.seconds, 
        DurationUnit.milliseconds, 
        DurationUnit.microseconds, 
      }, 
    ), 
  );
}

context.knobs.durationOrNull()

Example

Usage

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

dart
Example: Nullable Duration Knob
@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 Duration Knob

dart
Example: DurationKnobConfig
@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

dart
Example: NullKnobConfig
@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')
  );
}
DateTime
Color

On this page