MultiFieldKnobConfig constructor

const MultiFieldKnobConfig(Map<String, dynamic> fields)

All first-class knobs provided by Widgetbook are single-field knobs. This means that they have only one field. For example, the knobs.int knob has only one IntField.

But in other cases, you might want to create a custom knob that has more than one field. For example, if you want to create a custom knob that allows the user to select a user, you might want to create a custom knob that has two fields: one for the name and one for the age.

class UserKnob extends Knob<User> {
  UserKnob({
    required super.label,
    required super.initialValue,
  });

  @override
  List<Field> get fields => [
    StringInputField(
      name: '$label.name',
      initialValue: initialValue.name,
    ),
    IntInputField(
      name: '$label.age',
      initialValue: initialValue.age,
    ),
  ];
}

Given that the knob's label is "user", then this knob can be configured as follows:

const MultiFieldKnobConfig({
  'user.name': 'John Doe',
  'user.age': 42,
});

For more info, check out our docs: https://docs.widgetbook.io/knobs/custom-knob

Implementation

const MultiFieldKnobConfig(Map<String, dynamic> fields) : super('', fields);