OudsFilterChip class

OUDS Chip design guidelines

Reference design version : 1.5.0

Filter chip is a UI element that allows to select or deselect an option within a series, and is commonly used to capture filtering decisions. Filter chip allows to filter content by being selected or deselected. It can be toggled "On" or "Off" to refine displayed results, and selected Filter Chips remain visually distinct to indicate active filters.

This version of the filter chip uses the text only layout which is the most used layout. Other layouts are available for this component: text + icon and icon only.

Parameters:

• label: Text label displayed in the chip.
• icon: Icon displayed in the chip. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
• selected: Whether this chip is selected or not. If this value is null so the component is in disabled state.
• onSelected : Called when this chip is clicked. A null value indicates that the component is disabled.

You can use OudsFilterChip component in your project, customizing parameters as needed :

Text only filter chip : This is the default layout of the component.

OudsFilterChip(
      label: 'Label',
      selected: true,
      onSelected: () {},
    );

Text with icon filter chip :

OudsFilterChip.icon(
  label: 'Label',
  icon: OudsIcon('assets/ic_chip_heart.svg'),
  selected: true,
  onSelected: (bool selected) {},
)