Integer Knob
The integer knob renders a text field or slider in the Widgetbook UI where you can dynamically enter an integer value for a widget property. This is particularly useful for properties that require an integer input, such as a number for a notification badge.
Varients and Usage
The integer 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
IntegerKnobConfig for the Integer Input Knob, but the IntegerKnobConfig can be applied to the Integer Slider Knob as well.Regular integer knob
Example: IntegerKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'No notifications': [IntKnobConfig('count', 0)],
'3 notifications': [IntKnobConfig('count', 3)],
'99+ notifications': [IntKnobConfig('count', 3)],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
count: context.knobs.intOrNull.input(label: 'count'),
);
}
Nullable integer 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 count': [NullKnobConfig('value')],
'With count': [IntKnobConfig('value', 1)],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
count: context.knobs.doubleOrNull.input(label: 'count'),
);
}