Pill class

A pill-shaped widget that displays a label and an optional editable value.

The Pill widget is designed to show a tag or property in a compact form. It consists of a label on the left and an optional value on the right.

If value is provided, the pill displays a separator line between the label and the value. When the user taps on the pill, it switches to an editing mode (if value is not null and editable is true), allowing the user to modify the text.

When editing is finished (by submitting or losing focus), the onValueChanged callback is triggered with the new value.

Basic Usage

Label-only pill:

Pill(label: 'Status')

Label with value:

Pill(label: 'Name', value: 'John Doe')

Styling

Use the style parameter to customize the appearance:

Pill(
  label: 'Email',
  value: 'john@example.com',
  style: PillStyles.info,
)

Or create a custom style:

Pill(
  label: 'Custom',
  style: PillStyle(
    backgroundColor: Colors.amber.shade50,
    borderColor: Colors.amber,
    labelColor: Colors.amber.shade900,
  ),
)

Editing

Enable editing by providing an onValueChanged callback:

Pill(
  label: 'Name',
  value: _name,
  onValueChanged: (newValue) => setState(() => _name = newValue),
)

Disable editing while still showing a value:

Pill(
  label: 'Name',
  value: 'John Doe',
  editable: false,
)

Inheritance

Constructors

Pill({Key? key, required dynamic label, dynamic value, Widget? leading, Widget? trailing, String? summary, ValueChanged<String>? onValueChanged, PillStyle? style, bool editable = true, bool expandable = false, bool selected = false, bool showCheckIcon = false, VoidCallback? onTap}): Creates a Pill widget.
const

Properties

editable → bool: Whether the value can be edited by tapping.
final
expandable → bool: Whether the pill expands to show the full value when tapped.
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
label → dynamic: The content displayed on the left side of the pill.
final
leading → Widget?: A widget displayed before the label inside the pill border.
final
onTap → VoidCallback?: Called when the pill is tapped.
final
onValueChanged → ValueChanged<String>?: Called when the user finishes editing the value.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selected → bool: Whether the pill is in a selected state.
final
showCheckIcon → bool: Whether to show a check icon when the pill is selected.
final
style → PillStyle?: The style configuration for this pill.
final
summary → String?: A shorter version of the value to be displayed when the pill is collapsed.
final
trailing → Widget?: A widget displayed after the value (or label if no value) inside the pill border.
final
value → dynamic: The content displayed on the right side of the pill.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<Pill>: Creates the mutable state for this widget at a given location in the tree.
override
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, int wrapWidth = 65}) → 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