Double Knob

The double input knob renders a text field in the Widgetbook UI where you can dynamically enter a double value for a widget property. This is particularly useful for properties that require a double input, such as a percentage or currency.

Varients

The double input knob has two variants:

• context.knobs.double.input(): This variant allows you to enter a double value via a text field. It does not accept null values.
• context.knobs.doubleOrNull.input(): This variant allows you to enter a double value via a text field or set the value to null. It is useful when the property can be optional.

Properties

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

context.knobs.double.input()

Example

Usage

To use the double input knob, call the context.knobs.double.input() method.

@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
  return MyWidget(
    value: context.knobs.double.input(label: 'value', initialValue: 0.2), 
  );
}

context.knobs.doubleOrNull.input()

Example

Usage

To use the nullable double input knob, call the context.knobs.doubleOrNull.input() method.

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

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