Color Knob
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.
Variants
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.
Properties
In addition to the knob's base properties, the String knob includes the following:
initialColorSpaceColorSpaceoptionalThe initial color space to use when displaying the color. Defaults to ColorSpace.hex.
Usage
To use a color knob, call the context.knobs.color() method.
Example: Color Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.color(label: 'color', initialValue: Colors.red),
);
}
Usage
To use the nullable color knob, call the context.knobs.colorOrNull() method.
Example: Nullable Color Knob
@UseCase(type: MyWidget, name: 'Default')
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.colorOrNull(label: 'color')
);
}
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 Color Knob
Example: 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),
);
}
Nullable Color 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: {
'No color': [NullKnobConfig('color')],
'Red': [ColorKnobConfig('color', 'FFF44336')],
},
)
Widget buildUseCase(BuildContext context) {
return MyWidget(
color: context.knobs.colorOrNull(label: 'color'),
);
}