Overview

Knobs are dynamic tools in Widgetbook that allow you to modify the parameters passed to a use-case on the fly. They allow you to adapt and examine your widgets under various conditions and inputs, enhancing the overall understanding of a component's behavior.

Usage

To incorporate knobs into your widgets, use the context.knobs function to access the knobs builder:

Example: Knobs
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

import '../main.dart';

@widgetbook.UseCase(name: 'with different title', type: Container)
Widget myWidget(BuildContext context) {
  return MyHomePage(
    title: context.knobs.string(
      label: 'Title Label',
      initialValue: 'HomePage',
    ),
  );
}

Properties

Each Knob possesses a set of inherent properties to control its display in the Widgetbook's UI:

  • label: A String that provides a title to the Knob. Each label must be unique for a WidgetbookUseCase.
  • description: An optional String that explains the Knob's functionality. It serves as a form of documentation within Widgetbook, assisting your team members in understanding how to manipulate the Knob.

Available Knobs

TypeRegular KnobNullable Knob
boolbooleanbooleanOrNull
intint.inputint.input
intint.sliderint.slider
doubledouble.inputdoubleOrNull.input
doubledouble.sliderdoubleOrNull.slider
StringstringstringOrNull
DurationdurationdurationOrNull
DateTimedateTimedateTimeOrNull
ColorcolorcolorOrNull
TlistlistOrNull