FilterChip class Null safety

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.

class ActorFilterEntry {
  const ActorFilterEntry(, this.initials);
  final String name;
  final String initials;

class CastFilter extends StatefulWidget {
  const CastFilter({Key? key}) : super(key: key);

  State createState() => CastFilterState();

class CastFilterState extends State<CastFilter> {
  final List<ActorFilterEntry> _cast = <ActorFilterEntry>[
    const ActorFilterEntry('Aaron Burr', 'AB'),
    const ActorFilterEntry('Alexander Hamilton', 'AH'),
    const ActorFilterEntry('Eliza Hamilton', 'EH'),
    const ActorFilterEntry('James Madison', 'JM'),
  final List<String> _filters = <String>[];

  Iterable<Widget> get actorWidgets {
    return actor) {
      return Padding(
        padding: const EdgeInsets.all(4.0),
        child: FilterChip(
          avatar: CircleAvatar(child: Text(actor.initials)),
          label: Text(,
          selected: _filters.contains(,
          onSelected: (bool value) {
            setState(() {
              if (value) {
              } else {
                _filters.removeWhere((String name) {
                  return name ==;

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
          children: actorWidgets.toList(),
        Text('Look for: ${_filters.join(', ')}'),

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.
Implemented types


FilterChip({Key? key, Widget? avatar, required Widget label, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, bool selected = false, required ValueChanged<bool>? onSelected, double? pressElevation, Color? disabledColor, Color? selectedColor, String? tooltip, BorderSide? side, OutlinedBorder? shape, Clip clipBehavior = Clip.none, FocusNode? focusNode, bool autofocus = false, Color? backgroundColor, EdgeInsetsGeometry? padding, VisualDensity? visualDensity, MaterialTapTargetSize? materialTapTargetSize, double? elevation, Color? shadowColor, Color? selectedShadowColor, bool? showCheckmark, Color? checkmarkColor, ShapeBorder avatarBorder = const CircleBorder()})
Create a chip that acts like a checkbox. [...]


autofocus bool
True if this widget will be selected as the initial focus when no other node in its scope is currently focused. [...]
avatar Widget?
A widget to display prior to the chip's label. [...]
avatarBorder ShapeBorder
The shape of the translucent highlight painted over the avatar when the selected property is true. [...]
backgroundColor Color?
Color to be used for the unselected, enabled chip's background. [...]
checkmarkColor Color?
Color of the chip's check mark when a check mark is visible. [...]
clipBehavior Clip
The content will be clipped (or not) according to this option. [...]
disabledColor Color?
The color used for the chip's background to indicate that it is not enabled. [...]
elevation double?
Elevation to be applied on the chip relative to its parent. [...]
focusNode FocusNode?
An optional focus node to use as the focus node for this widget. [...]
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
isEnabled bool
Whether or not this chip is enabled for input. [...]
read-only, override
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
label Widget
The primary content of the chip. [...]
labelPadding EdgeInsetsGeometry?
The padding around the label widget. [...]
labelStyle TextStyle?
The style to be applied to the chip's label. [...]
materialTapTargetSize MaterialTapTargetSize?
Configures the minimum size of the tap target. [...]
onSelected ValueChanged<bool>?
Called when the chip should change between selected and de-selected states. [...]
padding EdgeInsetsGeometry?
The padding between the contents of the chip and the outside shape. [...]
pressElevation double?
Elevation to be applied on the chip relative to its parent during the press motion. [...]
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
selected bool
Whether or not this chip is selected. [...]
selectedColor Color?
Color to be used for the chip's background, indicating that it is selected. [...]
selectedShadowColor Color?
Color of the chip's shadow when the elevation is greater than 0 and the chip is selected. [...]
shadowColor Color?
Color of the chip's shadow when the elevation is greater than 0. [...]
shape OutlinedBorder?
The OutlinedBorder to draw around the chip. [...]
showCheckmark bool?
Whether or not to show a check mark when SelectableChipAttributes.selected is true. [...]
side BorderSide?
The color and weight of the chip's outline. [...]
tooltip String?
Tooltip string to be used for the body area (where the label and avatar are) of the chip.
visualDensity VisualDensity?
Defines how compact the chip's layout will be. [...]


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


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited