ChoiceChip class

A Material Design choice chip.

ChoiceChips represent a single choice from a set. Choice chips contain related descriptive text or categories.

Requires one of its ancestors to be a Material widget.

This example shows how to create ChoiceChips with onSelected. When the user taps, the chip will be selected.
link

To create a local project with this code sample, run:
flutter create --sample=material.ChoiceChip.1 mysample

Material Design 3

ChoiceChip can be used for single select Filter chips from Material Design 3. If ThemeData.useMaterial3 is true, then ChoiceChip will be styled to match the Material Design 3 specification for Filter chips. Use FilterChip for multiple 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.
  • FilterChip, uses tags or descriptive words as a way to filter content.
  • 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

ChoiceChip({Key? key, Widget? avatar, required Widget label, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, ValueChanged<bool>? onSelected, double? pressElevation, required bool selected, Color? selectedColor, Color? disabledColor, 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 radio button.
const
ChoiceChip.elevated({Key? key, Widget? avatar, required Widget label, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, ValueChanged<bool>? onSelected, double? pressElevation, required bool selected, Color? selectedColor, Color? disabledColor, 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 radio button.
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
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
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