Introduction to Knobs
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:
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:
labelStringrequiredA String that provides a title to the Knob. Each label must be unique for a WidgetbookUseCase.
initialValueToptionalThe initial value of the knob when the WidgetbookUseCase is loaded.
The accepted type depends on the Knob. For instance, a Non-nullable Integer Knob accepts int as a type.
The default value depends on the specifics of the knob but is null for nullable knobs.
descriptionStringoptionalAn 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.