Chip Widget

Estimated reading: 4 minutes 33 views

CustomChip

CustomChip is a flexible and reusable chip component used to represent compact information such as tags, categories, filters, or selected items. It supports multiple visual styles, shapes, sizes, and optional actions like deletion.

Common Use Cases

Tags and labels (e.g. Admin, Active, Premium)
Filters in search and data tables
Selected items in forms or multi-select inputs
Status indicators
Compact user or category representations

Constructor

Dart

CustomChip({
  Key? key,
  required Widget label,
  Widget? avatar,
  Widget? deleteIcon,
  Color? color,
  Color? labelColor,
  Color? borderColor,
  Color? deleteIconColor,
  void Function()? onDeleted,
  TextStyle? labelStyle,
  double? elevation,
  ChipStyleType type = ChipStyleType.full,
  ChipShapeType shapeType = ChipShapeType.rectangular,
  ChipSize size = ChipSize.medium,
  EdgeInsets? padding,
})

CustomChip({
  Key? key,
  required Widget label,
  Widget? avatar,
  Widget? deleteIcon,
  Color? color,
  Color? labelColor,
  Color? borderColor,
  Color? deleteIconColor,
  void Function()? onDeleted,
  TextStyle? labelStyle,
  double? elevation,
  ChipStyleType type = ChipStyleType.full,
  ChipShapeType shapeType = ChipShapeType.rectangular,
  ChipSize size = ChipSize.medium,
  EdgeInsets? padding,
})

Parameters

Parameter	Description
`label`	Required. The primary content of the chip, usually a `Text` widget.
`avatar`	Optional leading widget, commonly used for icons or avatars.
`deleteIcon`	Custom widget displayed as the delete/remove icon.
`color`	Background color of the chip.
`labelColor`	Color applied to the label text.
`borderColor`	Border color of the chip (useful for outlined styles).
`deleteIconColor`	Color of the delete icon.
`onDeleted`	Callback triggered when the delete icon is tapped.
`labelStyle`	Custom `TextStyle` for the label.
`elevation`	Elevation/shadow level of the chip.
`type`	Visual style of the chip (e.g. full, soft, outlined).
`shapeType`	Shape of the chip (rectangular or rounded).
`size`	Size preset of the chip (small, medium, large).
`padding`	Custom internal padding for fine-grained spacing control.

Basic Usage Example

Dart

CustomChip(
  label: const Text('Active'),
  color: kSuccessColor,
  labelColor: Colors.white,
)

CustomChip(
  label: const Text('Active'),
  color: kSuccessColor,
  labelColor: Colors.white,
)

Chip with Avatar

Dart

CustomChip(
  avatar: const Icon(Icons.person, size: 16),
  label: const Text('Admin'),
  color: kPrimaryColor,
  labelColor: Colors.white,
  shapeType: ChipShapeType.rounded,
)

CustomChip(
  avatar: const Icon(Icons.person, size: 16),
  label: const Text('Admin'),
  color: kPrimaryColor,
  labelColor: Colors.white,
  shapeType: ChipShapeType.rounded,
)

Deletable Chip

Dart

CustomChip(
  label: const Text('Flutter'),
  type: ChipStyleType.outlined,
  borderColor: kPrimaryColor,
  onDeleted: () {
    // handle chip removal
  },
)

CustomChip(
  label: const Text('Flutter'),
  type: ChipStyleType.outlined,
  borderColor: kPrimaryColor,
  onDeleted: () {
    // handle chip removal
  },
)

Best Practices

Use chips for short, scannable information only.
Keep labels concise to avoid layout overflow.
Prefer outlined or soft styles when displaying many chips together.
Use onDeleted only when user interaction is clearly expected.

Summary

CustomChip provides a powerful yet compact UI element for representing metadata, filters, and statuses in FlutKit dashboards. With configurable styles, shapes, and behaviors, it fits seamlessly into both form-heavy and data-rich interfaces.

ChipInputField

ChipInputField is an interactive input component that allows users to add, remove, and manage multiple text values (chips/tags) within a single field. It is especially useful for tag-based inputs, labels, keywords, or categorization features.

Common Use Cases

Tag management (e.g. bug, important, todo)
Labeling tasks, tickets, or projects
Keyword input for search or filtering
Metadata entry in CMS or admin panels
Lightweight multi-value text input

Constructor

Dart

ChipInputField({
  Key? key,
  List<String> initialTags = const [],
  List<String> suggestions = const [],
  void Function(List<String>)? onChanged,
})

ChipInputField({
  Key? key,
  List<String> initialTags = const [],
  List<String> suggestions = const [],
  void Function(List<String>)? onChanged,
})

Parameters

Parameter	Description
`initialTags`	A list of tags that are pre-filled when the widget is first rendered.
`suggestions`	A list of suggested tags shown as autocomplete options while typing.
`onChanged`	Callback triggered whenever the tag list changes (add or remove). Returns the current list of tags.

Basic Usage Example

Dart

ChipInputField(
  initialTags: ['bug', 'important'],
  suggestions: [
    'bug',
    'follow up',
    'important',
    'logo',
    'review',
    'todo',
    'tomorrow',
    'wordpress',
  ],
  onChanged: (tags) {
    debugPrint('Current tags: $tags');
  },
)

ChipInputField(
  initialTags: ['bug', 'important'],
  suggestions: [
    'bug',
    'follow up',
    'important',
    'logo',
    'review',
    'todo',
    'tomorrow',
    'wordpress',
  ],
  onChanged: (tags) {
    debugPrint('Current tags: $tags');
  },
)

How It Works

Users can type text and press Enter (or select from suggestions) to add a chip.
Each chip can be removed individually.
Suggested tags help maintain consistency and reduce input errors.
Every update to the chip list triggers the onChanged callback.

Best Practices

Provide meaningful suggestions to guide users and avoid duplicate or inconsistent tags.
Keep tag text short and readable.
Use this widget where multi-value input is expected, not for long-form text.
Always handle onChanged if the data needs to be stored, validated, or sent to a backend.

Summary

ChipInputField offers a clean and user-friendly way to manage tag-based inputs in FlutKit dashboards. With support for initial values, autocomplete suggestions, and change callbacks, it is well-suited for modern admin interfaces and productivity tools.

After reviewing the demo, you can copy the example code, import the widget, and integrate it directly into your screen.

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Chip section.

Dart

Base UI → Chip

Base UI → Chip