Chip Widget: Material Design with Flutter
Everything you need to know about Chips
With the continuous evolution in UI design users got more attached to well-designed applications. Material design played a vital role in this evolution with its minimalistic widgets. Did you ever think about how apps like WhatsApp have built their filter options into their search bar, Gmail added recipient chips in their email client or how Youtube uses hashtag chips to filter YouTube videos? Let’s have a look at all of these chip widgets from the attractive Material UI definition. Material designed chips are compact elements that can include text, images or other widgets and also actions. With actions you can add the functionality of what should happen if you click on one of your chips.
Here are the different chip types available in the flutter package. We will have a closer look at all of them below.
- Filter Chip
- Input Chip
- Action Chip
- Choice Chip
Let’s create our first basic chip:
Line 2–5: Set a CircleAvatar with an image that comes from our assets folder.
Line 6: The label contains the main text of our chip.
Filter Chips
These are usually used in filtered search bars where a user can select from multiple options to filter their search query and receive with it more accurate results.
Line 1–3: The Wrap widget is similar to a Row widget. However, the Row widget supports only one line for our chips, while the Wrap widget can display multiple lines of chips. We use here spacing to have horizontally & vertically some space between our chips.
Line 4–5: filterChips models are mapped to the FilterChip widget
Line 6–10: Sets a text for the label property and some styling for this text. The filterChip.label and filterChip.color are provided for each chip by the properties of the FilterChipData object.
Line 12–18: By tapping on a particular chip the onSelected property is triggered. Here inside, the chip on which we have tapped is toggling his isSelected state.
Line 11+21: The selected chips have with selectedColor a different color than the unselected ones with backgroundColor to distinguish them.
The model class FilterChipData defines the data for our FilterChip.
Input Chips
These types of chips are usually used within the recipient’s section of Gmail or also while adding tags in other applications. The specialty of the InputChip is that it contains generally a user avatar and an onDeleted property which is called when the X of our chip is tapped on.
Line 4–5: inputChips models are mapped to the InputChip widget
Line 12–15: By tapping on a particular chip the onPressed property is triggered
Line 16: By tapping on the X of our chip the onDeleted property is triggered with which the tapped chip will be deleted from our inputChips list
Action Chips
Action Chips are used in the Google assistant for quick actions like setting an alarm, turning the lights off, etc. These types of chips are associated with the property onPressed with which you can perform any action after a click event occurs.
Line 4–5: actionChips models are mapped to the ActionChip widget
Line 16–19: By tapping on a particular chip the onPressed property is triggered. Here inside you can place your individual action.
Choice Chips
Choice Chips are alternatives to your radio buttons. Users can choose between multiple chips, however only one chip of all the chips can be selected at the same time. If a new chip is selected the previously selected chip will be deselected again.
Line 4–5: choiceChips models are mapped to the ChoiceChip widget
Line 9–18: By tapping on the chip the onSelected property is triggered. For all the chips the `isSelected is set to false so that the user can select only one chip at a specific time.
`
Lastly, here are a few more properties of the class Chip which you can try out yourself to create more attractive chips.
Enjoy and start building your application more UI friendly!!!
Thanks for reading this Flutter article — share it if you found this helpful! Also, follow me on all of my social media below.
Youtube: Subscribe JohannesMilke
Twitter: Follow JohannesMilke
Medium: Follow JohannesMilke
Find the Source Code of this project here:
Follow Flutter Community on Twitter for everything happening in the 🌎 of Flutter: https://www.twitter.com/FlutterComm
