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.
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
- Object
- Diagnosticable
- DiagnosticableTree
- Widget
- StatelessWidget
- FilterChip
- 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