Double Knob
The double knob renders a text field or slider 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 and Usage
The double knob has two variants 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
DoubleKnobConfig for the Double Input Knob, but the DoubleKnobConfig can be applied to the Double Slider Knob as well.Regular double Knob
Example: DoubleKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'0%': [DoubleKnobConfig('value', 0)],
'50%': [DoubleKnobConfig('value', 0.5)],
'100%': [DoubleKnobConfig('value', 1)],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
value: context.knobs.double.input(label: 'value', initialValue: 0.2),
);
}
Nullable double knob
Example: NullKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'Without value': [NullKnobConfig('value')],
'With value': [DoubleKnobConfig('value', 1)],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
value: context.knobs.doubleOrNull.input(label: 'value'),
);
}