Skip to main content

​
Chips

Chip components are compact elements that represent attributes, actions, or selections. They can contain text, icons, avatars, and support interactions like selection and deletion.

​
ChromiaChip

A customizable chip component for displaying compact information.

​
Basic Usage

ChromiaChip(
  label: 'Flutter',
  onDeleted: () => removeTag('Flutter'),
)

​
Parameters

​
label
String
required
Label text to display in the chip.
​
avatar
Widget?
Avatar widget shown at the start of the chip.
​
icon
IconData?
Icon shown at the start if no avatar is provided.
​
onPressed
VoidCallback?
Callback when the chip is pressed. Makes the chip interactive.
​
onDeleted
VoidCallback?
Callback when the delete icon is pressed. If provided, displays a close icon.
​
backgroundColor
Color?
Background color of the chip.
​
foregroundColor
Color?
Foreground color for text and icons.
​
deleteIconColor
Color?
Color of the delete icon.
​
padding
EdgeInsetsGeometry?
Custom padding for the chip content.

​
Examples

​
Simple Chip

ChromiaChip(
  label: 'Flutter',
)

​
Chip with Icon

ChromiaChip(
  label: 'Favorite',
  icon: Icons.star,
)

​
Deletable Chip

ChromiaChip(
  label: 'Flutter',
  icon: Icons.code,
  onDeleted: () => print('Deleted Flutter chip'),
)

​
Interactive Chip

ChromiaChip(
  label: 'Settings',
  icon: Icons.settings,
  onPressed: () => navigateToSettings(),
)

​
Chip with Avatar

ChromiaChip(
  label: 'John Doe',
  avatar: CircleAvatar(
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  ),
  onDeleted: () => removeUser(),
)

​
ChromiaChip.filter

A filter chip that can be selected/deselected, typically used for filtering content.

​
Parameters

​
label
String
required
Label text for the chip.
​
selected
bool
required
Whether the chip is currently selected.
​
onSelected
ValueChanged<bool>
required
Callback when the selection state changes.
​
icon
IconData?
Icon to display when not selected.
​
selectedIcon
IconData?
Icon to display when selected.
​
backgroundColor
Color?
Background color when not selected.
​
selectedBackgroundColor
Color?
Background color when selected.
​
foregroundColor
Color?
Foreground color when not selected.
​
selectedForegroundColor
Color?
Foreground color when selected.

​
Examples

​
Basic Filter Chip

ChromiaChip.filter(
  label: 'Active',
  selected: isActive,
  onSelected: (selected) => setState(() => isActive = selected),
)

​
Multiple Filter Chips

Row(
  children: [
    ChromiaChip.filter(
      label: 'All',
      selected: filter == 'all',
      onSelected: (selected) => setState(() => filter = 'all'),
    ),
    SizedBox(width: 8),
    ChromiaChip.filter(
      label: 'Active',
      selected: filter == 'active',
      onSelected: (selected) => setState(() => filter = 'active'),
    ),
    SizedBox(width: 8),
    ChromiaChip.filter(
      label: 'Completed',
      selected: filter == 'completed',
      onSelected: (selected) => setState(() => filter = 'completed'),
    ),
  ],
)

​
Filter Chip with Icons

ChromiaChip.filter(
  label: 'Favorite',
  selected: isFavorite,
  icon: Icons.star_border,
  selectedIcon: Icons.star,
  onSelected: (selected) => setState(() => isFavorite = selected),
)

​
ChromiaChip.choice

A choice chip for selecting a single option from a set, similar to radio buttons.

​
Parameters

​
label
String
required
Label text for the chip.
​
selected
bool
required
Whether the chip is currently selected.
​
onSelected
VoidCallback
required
Callback when the chip is selected.
​
icon
IconData?
Optional icon to display.
​
backgroundColor
Color?
Background color when not selected.
​
selectedBackgroundColor
Color?
Background color when selected.
​
foregroundColor
Color?
Foreground color when not selected.
​
selectedForegroundColor
Color?
Foreground color when selected.

​
Examples

​
Choice Chips (Radio Style)

Row(
  children: [
    ChromiaChip.choice(
      label: 'Small',
      selected: size == 'small',
      onSelected: () => setState(() => size = 'small'),
    ),
    SizedBox(width: 8),
    ChromiaChip.choice(
      label: 'Medium',
      selected: size == 'medium',
      onSelected: () => setState(() => size = 'medium'),
    ),
    SizedBox(width: 8),
    ChromiaChip.choice(
      label: 'Large',
      selected: size == 'large',
      onSelected: () => setState(() => size = 'large'),
    ),
  ],
)

​
Choice Chip with Icon

ChromiaChip.choice(
  label: 'Premium',
  selected: plan == 'premium',
  icon: Icons.workspace_premium,
  onSelected: () => setState(() => plan = 'premium'),
)

​
ChromiaChipGroup

A group of chips with automatic wrapping and consistent spacing.

​
Parameters

​
children
List<Widget>
required
List of chip widgets to display.
​
spacing
double?
Horizontal spacing between chips. Defaults to theme spacing.
​
runSpacing
double?
Vertical spacing between rows of chips. Defaults to theme spacing.
​
alignment
WrapAlignment
default:"WrapAlignment.start"
How to align the chips horizontally.

​
Examples

​
Tag Group

ChromiaChipGroup(
  children: [
    ChromiaChip(label: 'Flutter', onDeleted: () {}),
    ChromiaChip(label: 'Dart', onDeleted: () {}),
    ChromiaChip(label: 'Mobile', onDeleted: () {}),
    ChromiaChip(label: 'UI/UX', onDeleted: () {}),
  ],
)

​
Filter Group

ChromiaChipGroup(
  children: [
    ChromiaChip.filter(
      label: 'All',
      selected: filter == 'all',
      onSelected: (s) => setFilter('all'),
    ),
    ChromiaChip.filter(
      label: 'Active',
      selected: filter == 'active',
      onSelected: (s) => setFilter('active'),
    ),
    ChromiaChip.filter(
      label: 'Archived',
      selected: filter == 'archived',
      onSelected: (s) => setFilter('archived'),
    ),
  ],
)

​
Custom Spacing

ChromiaChipGroup(
  spacing: 12,
  runSpacing: 12,
  alignment: WrapAlignment.center,
  children: [
    ChromiaChip(label: 'Design'),
    ChromiaChip(label: 'Development'),
    ChromiaChip(label: 'Marketing'),
  ],
)

Build docs developers (and LLMs) love

Get started for freeTalk to us