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, 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()})
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()})
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
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
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 MaterialStates.
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
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}) → 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