InputChipAppi

A customizable input chip widget for displaying selectable and deletable tags or options in Flutter applications.

Features

• Interactive Chips: Tap to select/deselect with visual feedback
• Deletable: Optional delete functionality with customizable delete icon
• Custom Styling: Configurable colors, shapes, and visual properties
• Avatar Support: Optional leading avatar or icon
• Flexible Content: Support for text labels and custom styling
• Material Design: Follows Material Design chip guidelines

Usage

InputChipAppi(
  label: 'Flutter',
  selected: true,
  onSelected: (bool selected) {
    setState(() {
      isSelected = selected;
    });
  },
  onDeleted: () {
    // Remove chip logic
  },
)

Parameters

Parameter	Type	Description
label	Widget	Required. The primary content of the chip (usually Text)
avatar	Widget?	Optional leading widget (usually CircleAvatar or Icon)
selected	bool	Whether the chip is selected (default: false)
onSelected	ValueChanged<bool>?	Callback when chip selection changes
onDeleted	VoidCallback?	Callback when delete button is pressed
deleteIcon	Widget?	Custom delete icon (default: Icons.cancel)
deleteIconColor	Color?	Color of the delete icon
deleteButtonTooltipMessage	String?	Tooltip message for delete button
onPressed	VoidCallback?	Callback when chip is pressed
pressElevation	double?	Elevation when chip is pressed
disabledColor	Color?	Color when chip is disabled
selectedColor	Color?	Color when chip is selected
tooltip	String?	Tooltip message for the chip
shape	ShapeBorder?	Custom shape for the chip
clipBehavior	Clip	Clip behavior for the chip (default: Clip.none)
focusNode	FocusNode?	Focus node for keyboard navigation
autofocus	bool	Whether to autofocus (default: false)
backgroundColor	Color?	Background color of the chip
padding	EdgeInsets?	Internal padding of the chip
visualDensity	VisualDensity?	Visual density for spacing
materialTapTargetSize	MaterialTapTargetSize?	Size of the tap target
elevation	double?	Elevation of the chip
shadowColor	Color?	Shadow color of the chip
selectedShadowColor	Color?	Shadow color when selected
showCheckmark	bool?	Whether to show checkmark when selected
checkmarkColor	Color?	Color of the checkmark
labelStyle	TextStyle?	Text style for the label
labelPadding	EdgeInsets?	Padding around the label
side	BorderSide?	Border side of the chip

Examples

Basic Input Chip

bool isSelected = false;

InputChipAppi(
  label: Text('Technology'),
  selected: isSelected,
  onSelected: (bool selected) {
    setState(() {
      isSelected = selected;
    });
  },
)

Deletable Chip

List<String> tags = ['Flutter', 'Dart', 'Mobile'];

Wrap(
  spacing: 8,
  children: tags.map((tag) => 
    InputChipAppi(
      label: Text(tag),
      onDeleted: () {
        setState(() {
          tags.remove(tag);
        });
      },
      deleteIcon: Icon(Icons.close, size: 18),
    ),
  ).toList(),
)

Chip with Avatar

InputChipAppi(
  avatar: CircleAvatar(
    backgroundColor: Colors.blue,
    child: Text('F', style: TextStyle(color: Colors.white)),
  ),
  label: Text('Flutter Developer'),
  selected: true,
  selectedColor: Colors.blue[100],
  onSelected: (bool selected) {
    // Handle selection
  },
)

Custom Styled Chip

InputChipAppi(
  label: Text(
    'Premium Feature',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
  backgroundColor: Colors.purple,
  selectedColor: Colors.purple[700],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  elevation: 4,
  pressElevation: 8,
  onSelected: (bool selected) {
    // Handle selection
  },
)

Chip with Custom Delete Icon

InputChipAppi(
  label: Text('Removable Tag'),
  avatar: Icon(Icons.tag, size: 20),
  deleteIcon: Icon(
    Icons.remove_circle,
    color: Colors.red,
    size: 20,
  ),
  deleteButtonTooltipMessage: 'Remove this tag',
  onDeleted: () {
    // Handle deletion
  },
  side: BorderSide(color: Colors.grey),
)

Interactive Chip List

class ChipData {
  final String label;
  final IconData icon;
  bool isSelected;
  
  ChipData(this.label, this.icon, {this.isSelected = false});
}

List<ChipData> chipList = [
  ChipData('Work', Icons.work),
  ChipData('Personal', Icons.person),
  ChipData('Important', Icons.star),
  ChipData('Travel', Icons.flight),
];

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: chipList.map((chipData) =>
    InputChipAppi(
      avatar: Icon(chipData.icon, size: 18),
      label: Text(chipData.label),
      selected: chipData.isSelected,
      onSelected: (bool selected) {
        setState(() {
          chipData.isSelected = selected;
        });
      },
      selectedColor: Colors.blue[100],
      checkmarkColor: Colors.blue,
    ),
  ).toList(),
)

Disabled Chip

InputChipAppi(
  label: Text('Disabled Chip'),
  onSelected: null, // Disabled
  disabledColor: Colors.grey[300],
  avatar: Icon(Icons.block, color: Colors.grey),
)

Best Practices

• Use Wrap widget to automatically handle chip overflow to new lines
• Provide clear visual feedback for selected vs unselected states
• Use appropriate spacing between chips for better touch targets
• Consider using icons or avatars to make chips more recognizable
• Implement proper state management for chip selection
• Use consistent styling across all chips in your app
• Provide tooltips for better accessibility
• Consider the context when deciding between selectable and deletable chips