My Notes on Chip Widget
Flutter provides many variations of Chip widgets, and all those Chip widgets follow the Material Design. In this blog, I'll share my notes on the use cases for each Chip, along with examples
Flutter provides many variations of Chip widgets based on the use case, and all those Chip widgets follow the Material Design specifications. The underlying base class is RawChip, which is not recommended to use directly. Instead, choose the appropriate Chip based on the use case.
In this blog, I will share my notes on the use cases for each Chip, along with examples.
Chip
The basic Chip is designed to display information only, which is why it does not have a selection state or any other selection-related properties. However, since information can be deleted, it does support the delete operation.
If you click on any of those Chip, nothing will happen since they do not support any selection state.
ChoiceChip
A ChoiceChip is used when we want to choose a single option from a fixed set of options. Hence, it has all the selection-related properties. However, since the use case involves selecting from fixed options, it does not have any delete option properties.
Although the use case is for a single choice, but, as you can see from the example, you are free to change the logic of the single _selectedIndex variable to an array in order to hold multiple selections.
FilterChip
A FilterChip is used when you want to allow multiple selections from a fixed set of options or tags. It is similar to a ChoiceChip, but since it is designed to support multiple selections, it has an additional checkmark option to indicate whether the chip is selected or not. It also requires an onSelection property.
Similar to a ChoiceChip, it does not have any delete properties.
Again, the use case of this chip is for multiple selections, but you can change the logic of the _selected array to a single variable if needed.
ActionChip
An ActionChip is used to display a chip as an action button. As a result, it does not have any selection or deletion properties. It only has an onPressed function to inform about the action that occurred on the chip button.
InputChip
The InputChip is used when we want to combine all the features discussed above into a single chip. It allows for single or multi-selection with a checkmark and provides a delete option. The InputChip also has an onPressed function that can be used as an action button.
Note:
It is not possible to use both the onPressed and onSelection functions together, as it will trigger a runtime error.
The checkmark is only visible when the selected property is properly set. Otherwise, the chip will behave as either a ChoiceChip or an ActionChip.
Chip Comparison Table
From the chart, it seems like the InputChip has all the features and can be used everywhere. However, using it everywhere makes it hard to understand the specific use case for which the InputChip is used.
Is it used for single-choice? Multiple choice? Used as a tag filter? Or just as an action button?
Therefore, it's better to use pre-built chips based on the use case to convey its intentions.
Customizing Colors Using Themes
Most of the time, the only thing we want to change in a chip in terms of design is the background, selection, or disabled colors. We can directly modify these colors in the Chip widget using its properties. Below is an example of changing the selected color directly on a ChoiceChip:
ChoiceChip(
label: Text('Choice $i'),
selectedColor: Colors.blueAccent,
),
However, it is always recommended to do this using the theme. We can change the selected color for the chip using ChipThemeData in ThemeData. Let's change the selectedColor for the chip using the theme:
By changing color using the Theme widget, we can define different theme configurations in one place and easily switch between them.
That’s it, folks!!
Check this DartPad for all the examples
https://dartpad.dev/?id=a4d2ea980cd75f1b1f07750fcc2cb68f
If you enjoyed this post then would you be able to do me a quick favor and share my latest blog post with your friends and colleagues? I'd really appreciate it and I think it could be valuable to them.
Thank you so much!