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.

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.

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, MaterialStateProperty<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}): 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, MaterialStateProperty<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}): 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?: Color of the chip's check mark when a check mark is visible.
final
chipAnimationStyle → ChipAnimationStyle?: Used to override the default chip animations durations.
final
clipBehavior → Clip: The content will be clipped (or not) according to this option.
final
color → MaterialStateProperty<Color?>?: The color that fills the chip, in all WidgetStates.
final
deleteButtonTooltipMessage → String?: The message to be used for the chip's delete button tooltip.
final
deleteIcon → Widget?: The icon displayed when onDeleted is set.
final
deleteIconBoxConstraints → BoxConstraints?: Optional size constraints for the delete icon.
final
deleteIconColor → Color?: Used to define the delete icon's color with an IconTheme that contains the icon.
final
disabledColor → Color?: The color used for the chip's background to indicate that it is not enabled.
final
elevation → double?: Elevation to be applied on the chip relative to its parent.
final
focusNode → FocusNode?: An optional focus node to use as the focus node for this widget.
final
hashCode → int: The hash code for this object.
no setterinherited
iconTheme → IconThemeData?: Theme used for all icons in the chip.
final
isEnabled → bool: Whether or not this chip is enabled for input.
no setteroverride
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
label → Widget: The primary content of the chip.
final
labelPadding → EdgeInsetsGeometry?: The padding around the label widget.
final
labelStyle → TextStyle?: The style to be applied to the chip's label.
final
materialTapTargetSize → MaterialTapTargetSize?: Configures the minimum size of the tap target.
final
onDeleted → VoidCallback?: Called when the user taps the deleteIcon to delete the chip.
final
onSelected → ValueChanged<bool>?: Called when the chip should change between selected and de-selected states.
final
padding → EdgeInsetsGeometry?: The padding between the contents of the chip and the outside shape.
final
pressElevation → double?: Elevation to be applied on the chip relative to its parent during the press motion.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selected → bool: Whether or not this chip is selected.
final
selectedColor → Color?: Color to be used for the chip's background, indicating that it is selected.
final
selectedShadowColor → Color?: Color of the chip's shadow when the elevation is greater than 0 and the chip is selected.
final
shadowColor → Color?: Color of the chip's shadow when the elevation is greater than 0.
final
shape → OutlinedBorder?: The OutlinedBorder to draw around the chip.
final
showCheckmark → bool?: Whether or not to show a check mark when SelectableChipAttributes.selected is true.
final
side → BorderSide?: The color and weight of the chip's outline.
final
surfaceTintColor → Color?: Color of the chip's surface tint overlay when its elevation is greater than 0.
final
tooltip → String?: Tooltip string to be used for the body area (where the label and avatar are) of the chip.
final
visualDensity → VisualDensity?: Defines how compact the chip's layout will be.
final

Methods

build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited