FilterChip class

A Material Design filter chip.

Filter chips use tags or descriptive words as a way to filter content.

Filter chips are a good alternative to Checkbox or Switch widgets. Unlike these alternatives, filter chips allow for clearly delineated and exposed options in a compact area.

Requires one of its ancestors to be a Material widget.

This example shows how to use FilterChips to filter through exercises.
link

To create a local project with this code sample, run:
flutter create --sample=material.FilterChip.1 mysample

Material Design 3

FilterChip can be used for multiple select Filter chip from Material Design 3. If ThemeData.useMaterial3 is true, then FilterChip will be styled to match the Material Design 3 specification for Filter chips. Use ChoiceChip for single select Filter chips.

See also:

  • Chip, a chip that displays information and can be deleted.
  • InputChip, a chip that represents a complex piece of information, such as an entity (person, place, or thing) or conversational text, in a compact form.
  • ChoiceChip, allows a single selection from a set of options. Choice chips contain related descriptive text or categories.
  • ActionChip, represents an action related to primary content.
  • CircleAvatar, which shows images or initials of people.
  • Wrap, A widget that displays its children in multiple horizontal or vertical runs.
  • material.io/design/components/chips.html
Inheritance
Implemented types

Constructors

FilterChip({Key? key, Widget? avatar, required Widget label, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, bool selected = false, required ValueChanged<bool>? onSelected, Widget? deleteIcon, VoidCallback? onDeleted, Color? deleteIconColor, String? deleteButtonTooltipMessage, double? pressElevation, Color? disabledColor, Color? selectedColor, String? tooltip, BorderSide? side, OutlinedBorder? shape, Clip clipBehavior = Clip.none, FocusNode? focusNode, bool autofocus = false, WidgetStateProperty<Color?>? color, Color? backgroundColor, EdgeInsetsGeometry? padding, VisualDensity? visualDensity, MaterialTapTargetSize? materialTapTargetSize, double? elevation, Color? shadowColor, Color? surfaceTintColor, IconThemeData? iconTheme, Color? selectedShadowColor, bool? showCheckmark, Color? checkmarkColor, ShapeBorder avatarBorder = const CircleBorder(), BoxConstraints? avatarBoxConstraints, BoxConstraints? deleteIconBoxConstraints, ChipAnimationStyle? chipAnimationStyle, MouseCursor? mouseCursor})
Create a chip that acts like a checkbox.
const
FilterChip.elevated({Key? key, Widget? avatar, required Widget label, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, bool selected = false, required ValueChanged<bool>? onSelected, Widget? deleteIcon, VoidCallback? onDeleted, Color? deleteIconColor, String? deleteButtonTooltipMessage, double? pressElevation, Color? disabledColor, Color? selectedColor, String? tooltip, BorderSide? side, OutlinedBorder? shape, Clip clipBehavior = Clip.none, FocusNode? focusNode, bool autofocus = false, WidgetStateProperty<Color?>? color, Color? backgroundColor, EdgeInsetsGeometry? padding, VisualDensity? visualDensity, MaterialTapTargetSize? materialTapTargetSize, double? elevation, Color? shadowColor, Color? surfaceTintColor, IconThemeData? iconTheme, Color? selectedShadowColor, bool? showCheckmark, Color? checkmarkColor, ShapeBorder avatarBorder = const CircleBorder(), BoxConstraints? avatarBoxConstraints, BoxConstraints? deleteIconBoxConstraints, ChipAnimationStyle? chipAnimationStyle, MouseCursor? mouseCursor})
Create an elevated chip that acts like a checkbox.
const

Properties

autofocus → bool
True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
final
avatar → Widget?
A widget to display prior to the chip's label.
final
avatarBorder → ShapeBorder
The shape of the translucent highlight painted over the avatar when the selected property is true.
final
avatarBoxConstraints → BoxConstraints?
Optional size constraints for the avatar.
final
backgroundColor → Color?
Color to be used for the unselected, enabled chip's background.
final
checkmarkColor → Color?