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 accept null values.
  • context.knobs.booleanOrNull(): This variant allows you to toggle a bool value or null. It is useful when the property can be optional.

context.knobs.boolean()

Properties

Besides the knob's base properties, the boolean knob does not feature any additional properties.

Example

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) {},
  );
}

context.knobs.booleanOrNull()

Properties

Besides the knob's base properties, the nullable boolean knob does not feature any additional properties.

Example

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) {},
  );
}