Enum Arg

The enum arg renders a dropdown or segmented control in the Widgetbook UI where you can dynamically select an enum value for a widget property. This is useful for properties that represent a fixed set of options, such as a status or alignment.

Variants

The enum arg has two style variants, each with a regular and nullable type:

• Dropdown: A dropdown menu for selecting a value from a list.
• Segmented: A segmented control for selecting a value from a smaller set of options.

EnumArg (Dropdown)

By default, EnumArg uses the dropdown style.

Example

Usage

final $Default = _Story(
  args: _Args(
    status: EnumArg<OnlineStatusType>( 
      OnlineStatusType.online, 
      values: OnlineStatusType.values, 
    ), 
  ),
);

NullableEnumArg (Dropdown)

Example

Usage

final $Default = _Story(
  args: _Args(
    status: NullableEnumArg<OnlineStatusType>( 
      null, 
      values: OnlineStatusType.values, 
    ), 
  ),
);

EnumArg (Segmented)

To use the segmented style, pass a SegmentedSingleArgStyle to the style parameter.

Example

Usage

final $Default = _Story(
  args: _Args(
    status: EnumArg<OnlineStatusType>( 
      OnlineStatusType.online, 
      values: OnlineStatusType.values, 
      style: const SegmentedSingleArgStyle(), 
    ), 
  ),
);

NullableEnumArg (Segmented)

Example

Usage

final $Default = _Story(
  args: _Args(
    status: NullableEnumArg<OnlineStatusType>( 
      null, 
      values: OnlineStatusType.values, 
      style: const SegmentedSingleArgStyle(), 
    ), 
  ),
);