Chips widgets in dart Flutter (Everything you need to know)

What are the different types of chips in flutter and how to use them.

“Chips are compact elements that represent an attribute, text, entity, or action.”
Chips are nice widgets in flutter which can used for many purposes. For example;
Filtration during search
Selection of one item
Perform any action on click

Parts of Chips

1. Container
Chip containers hold all chip elements, and their size is determined by those elements. A container can also be defined by a stroke.

2. Thumbnail [optional]
Thumbnails identify entities (like individuals) by displaying an avatar, logo, or icon.

3. Text
Chip text can be an entity name, description, tag, action, or conversational.

4. Remove icon [optional]
Input chips can include a Remove icon.

There are different types of chips

• ChoiceChip, allows a single selection from a set of options. Choice chips contain related descriptive text or categories.
• 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 entities.
• Wrap, A widget that displays its children in multiple horizontal or vertical runs.
• 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.

Choice Chip

Choice chip example

choice chips allow single selection. Following code can be used for choice chip.

Wrap(
  runSpacing: 8,
  spacing: 8,
  children: [ChoiceChip(
    label: Text("choice label"),
    labelStyle: TextStyle(
        fontWeight: FontWeight.bold, color: Colors.white),
    selected: true,
    selectedColor: Colors.green,
    backgroundColor: Colors.blue,
  )]
);

Filter Chip

filter chip example

Filter chips used for filter the content. For example, during search filter chip can be used. Following code can be used for filter chip.

Wrap(
    runSpacing: 8,
    spacing: 8,
    children: [FilterChip(
      label: Text("filter label"),
      labelStyle: TextStyle(
          fontWeight: FontWeight.bold, color: Colors.white),
      selected: true,
      selectedColor: Colors.green,
      backgroundColor: Colors.blue, 
      checkmarkColor: Colors.red
    )]
);

Action Chip

Action chips can be used when we want to perform some action on click. Following code can be used for action chip.

Wrap(
    runSpacing: 8,
    spacing: 8,
    children: [ActionChip(
        label: Text("filter label"),
        labelStyle: TextStyle(
            fontWeight: FontWeight.bold, color: Colors.white),
        backgroundColor: Colors.blue,
        onPressed: () => print("Perform some action here"),
    )]
);

Circle Avatar Chip

Avatar chips can be used when we want to show image as well. Following code can be used for avatar chip.

Wrap(
    runSpacing: 8,
    spacing: 8,
    children: [Chip(
      label: Text("filter label"),
      labelStyle: TextStyle(
          fontWeight: FontWeight.bold, color: Colors.white),
      backgroundColor: Colors.blue,
      avatar: CircleAvatar(
        child: Text('AZ'),
        backgroundColor: Colors.white.withOpacity(0.8),
      ),
    )]
);

Input Chip

Input chips can be used when we want to take input and showing as chip widget. For example, gmail use this while adding recepients. Following code can be used for input chip.

Wrap(
    runSpacing: 8,
    spacing: 8,
    children: [InputChip(
      label: Text("filter label"),
      labelStyle: TextStyle(
          fontWeight: FontWeight.bold, color: Colors.white),
      backgroundColor: Colors.blue,
      avatar: CircleAvatar(
        child: Text('AZ'),
        backgroundColor: Colors.white.withOpacity(0.8),
      ),
      onPressed: () => print("input chip pressed"),
      onDeleted: () => print("input chip deleted"),
    )]
);

That’s all for today. Stay tuned!

Thank you very much for reading.