The color knob renders a combination of a color preview and input fields in the Widgetbook UI where you can dynamically enter a color value for a widget property.
The String knob has two variants:
context.knobs.color(): This variant allows you to enter a color value as a string and color space combination. It does not acceptnullvalues.context.knobs.colorOrNull(): This variant allows you to enter a color value as a string and color space combination or set the value tonull. It is useful when the property can be optional.
In addition to the knob's base properties, the String knob includes the following:
initialColorSpaceColorSpaceoptional
The initial color space to use when displaying the color. Defaults to ColorSpace.hex.
To use a color knob, call the context.knobs.color() method.
dartExample: Color Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.color(label: 'color', initialValue: Colors.red),
);
}To use the nullable color knob, call the context.knobs.colorOrNull() method.
dartExample: Nullable Color Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.colorOrNull(label: 'color')
);
}Multi-snapshot support allows you to generate multiple screenshots of a single use case with varying values using KnobsConfigs and AddonsConfigs.
dartExample: ColorKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'Red': [ColorKnobConfig('color', 'FFF44336')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.color(label: 'color', initialValue: Colors.red),
);
}dartExample: NullKnobConfig
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@UseCase(
type: MyWidget,
name: 'Default',
cloudKnobsConfigs: {
'No color': [NullKnobConfig('color')],
'Red': [ColorKnobConfig('color', 'FFF44336')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.colorOrNull(label: 'color'),
);
}