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.

Sample code

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

class CastFilter extends StatefulWidget {
  @override
  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'),
  ];
  List<String> _filters = <String>[];

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Wrap(
          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.
  • material.google.com/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, double pressElevation: 8.0, Color disabledColor, Color selectedColor, String tooltip, ShapeBorder shape, Clip clipBehavior: Clip.none, Color backgroundColor, EdgeInsetsGeometry padding, MaterialTapTargetSize materialTapTargetSize })
Create a chip that acts like a checkbox. [...]
const

Properties

avatar Widget
A widget to display prior to the chip's label. [...]
final
backgroundColor Color
Color to be used for the unselected, enabled chip's background. [...]
final
clipBehavior Clip
The content will be clipped (or not) according to this option. [...]
final
disabledColor Color
Color to be used for the chip's background indicating that it is disabled. [...]
final
isEnabled bool
Whether or not this chip is enabled for input. [...]
read-only, override
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
onSelected ValueChanged<bool>
Called when the chip should change between selected and deselected 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 during the press motion. This controls the size of the shadow below the chip. [...]
final
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
shape ShapeBorder
The ShapeBorder to draw around the chip. [...]
final
tooltip String
Tooltip string to be used for the body area (where the label and avatar are) of the chip.
final
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

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. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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 toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns 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 ==(dynamic other) bool
The equality operator. [...]
inherited