Boolean Knob
The boolean knob renders a toggle switch in the Widgetbook UI where you can dynamically toggle a bool value for a widget property.
Varients
The boolean knob has two variants:
context.knobs.boolean(): This variant allows you to toggle a bool value. It does not acceptnullvalues.context.knobs.booleanOrNull(): This variant allows you to toggle a bool value ornull. It is useful when the property can be optional.
Properties
Besides the knob's base properties, the boolean knob does not feature any additional properties.
Usage
To use a boolean knob, call the context.knobs.boolean() method.
Example: Boolean Knob
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(type: Checkbox, name: 'Duo state')
Widget buildCheckboxUseCase(BuildContext context) {
return Checkbox(
value: context.knobs.boolean(label: 'value'),
onChanged: (value) {},
);
}
Properties
Besides the knob's base properties, the nullable boolean knob does not feature any additional properties.
Usage
To use the nullable boolean knob, call the context.knobs.booleanOrNull() method.
Example: Nullable Boolean Knob
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(type: Checkbox, name: 'Tristate')
Widget buildCheckboxUseCase(BuildContext context) {
return Checkbox(
value: context.knobs.booleanOrNull(label: 'value'),
tristate: true,
onChanged: (value) {},
);
}
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 Boolean Knob
Example: BooleanKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: Checkbox,
name: 'Duo state',
cloudKnobsConfigs: {
'Checked': [BooleanKnobConfig('value', true)],
'Unchecked': [BooleanKnobConfig('value', false)],
},
)
Widget buildCheckboxUseCase(BuildContext context) {
return Checkbox(
value: context.knobs.boolean(label: 'value'),
onChanged: (value) {},
);
}
Nullable Bool Knob
Example: NullKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: Checkbox,
name: 'Tristate',
cloudKnobsConfigs: {
'Mixed': [NullKnobConfig('value')],
'Checked': [BooleanKnobConfig('value', true)],
'Unchecked': [BooleanKnobConfig('value', false)],
},
)
Widget buildCheckboxUseCase(BuildContext context) {
return Checkbox(
value: context.knobs.booleanOrNull(label: 'value'),
onChanged: (value) {},
);
}