Flutter Widget In Focus — Chip (Know It All)

Exploring Chip, A small Flutter widget to show relevant information accurately

Photo by DDP on Unsplash

Most readers viewing this would be familiar with the Gmail app and might have observed the following interaction while composing an email…

Gmail App from Google

When one selects a name from the list, it gets transformed into something that is visually compact while retaining details of what exactly was selected.

This is called ‘Chip’

Chips are compact elements that represent an input, attribute, or action.

The basic Chip widget in Flutter looks like…

Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published.

🏗 UI structure

Chip(
  avatar: CircleAvatar(
    backgroundColor: Theme.of(context).accentColor,
    child: Text('D'),
  ),
  label: Text('David'),
)

Let’s see some of its properties quickly -

ⓛabel: required

It accepts any widget but in most cases it is good to have the Text widget representing the name of any entity, action etc.

ⓐvatar:

It accepts any widget and can be used to show image, initial letter of any entity, action etc.

ⓑackgroundColor:

Showing background color of chip when it is unselected and enabled.

ⓛabelStyle:

Used to apply any TextStyle to the label.

ⓛabelPadding:

Adds some padding around the label

ⓔlevation:

It accepts double value and used to elevate the chip

ⓢhadowColor:

Gives color to the shadow of the chip when elevation is set

ⓓeleteIcon:

Used to display delete icon. This will be only visible when onDeleted is set.

ⓞnDeleted:

It’s a callback when delete icon is pressed inside the chip.

ⓓeleteIconColor:

Color to be set for delete icon

ⓓeleteButtonTooltipMessage:

Set a message to appear on tooltip of delete icon.

ⓢhape:

Can be used to give shapes to the border of the chip. something like this.

Congratulations!! You now have a basic idea about how Chip widgets work in Flutter.

Now let’s see the types of chip

➊ Input chips

Input chips represent the information that was presented as part of the selection.

A very common example of this kind is shown at the beginning of this article, viz. the Gmail’s composing screen.

It can also be used for suggesting responses in a messaging app. So when the user clicks on the input chip, the message contained in it is sent as a response.

Example of Input chip with onPressed event.

InputChip(
  avatar: CircleAvatar(
    backgroundColor: Theme.of(context).accentColor,
    child: Text('D'),
  ),
  label: Text('David'),
  onPressed: () {
    print('David got clicked');
  },
)

➋ Choice chips

The choice chip allows selecting a single chip from a list. Sometimes, it can be used to replace other widgets that allow single selection like the toggle button or radio button.

Example of Choice chip with onSelected event.

Wrap(
  children: [
    ChoiceChip(
      label: Text('Small'),
      selected: false,
      onSelected: (bool selected) {
        setState(() {});
      },
    ),
    SizedBox(
      width: 10,
    ),
    ChoiceChip(
      label: Text('Big'),
      selected: true,
      onSelected: (bool selected) {
        setState(() {});
      },
      selectedColor: Theme.of(context).accentColor,
    ),
  ],
)

➌ Filter chips

They contain options, attributes, and categories that users can filter from. You can easily replace a checkbox with the Filter chip.

Example of Filter chip with onSelected event.

Wrap(
  children: [
    FilterChip(
      label: Text('Popcorn'),
      selected: false,
      onSelected: (bool selected) {
        setState(() {});
      },
    ),
    SizedBox(
      width: 10,
    ),
    FilterChip(
      label: Text('Coke'),
      labelStyle: TextStyle(
          color: widget.isSelected ? Colors.black : Colors.white),
      selected: widget.isSelected,
      onSelected: (bool selected) {
        setState(() {
          widget.isSelected = !widget.isSelected;
        });
      },
      selectedColor: Theme.of(context).accentColor,
      checkmarkColor: Colors.black,
    ),
  ],
)

➍ Action chips

Action chips can be used to invoke an action on the primary content. It cannot be disabled, therefore in case, it is not needed it shouldn’t be made available to users.

For example, the user can take action like playing or downloading the song.

Wrap(
  children: [
    ActionChip(
      label: Text('Play'),
      onPressed: () {
        //TODO
      },
    ),
    SizedBox(
      width: 10,
    ),
    ActionChip(
      avatar:
          widget.isSelected ? CircularProgressIndicator() : null,
      label: Text(
          '${widget.isSelected ? 'Downloading...' : 'Download'}'),
      labelStyle: TextStyle(color: Colors.white),
      onPressed: () {
        setState(() {
          widget.isSelected = !widget.isSelected;
        });
      },
    ),
  ],
)

It looks like you have learned a lot today! Cheers! 👍

Full code can be found here 👇

Goodbye

Thanks for reading. If you found this article to be helpful please share it with your friends.

For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.

⏮ Previous

Easily Understand Dart’s Extension Methods For Flutter

Little about me

Hi, I am Pinkesh Darji. I write about Flutter at https://flutterbeads.com/. I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles.

Pinkesh Darji 💙

pinkeshdarji — Overview