Flutter Chip Category UI

In this blog, we will learn about Flutter Chip Category UI. The Flutter Chip Widget is a top-level widget that provides a rounded box with text and custom interactions. A popular use case of Chip widget is for category tiles. Using Chip widgets, we can customise the category tile. Also we can easily add and remove categories in our UI and make a user driven mobile apps. Chips are compact elements that represent an attribute, text, entity, or action.

You may also check our Flutter app development services.

The Chip widget exposes a range of properties that allow you to add different styles and perform diverse actions.

Chip Widget:

Chip Widget Features:

autofocus: Widget can be on initial focus or not, will be decided by this property, because by default it is false.

avatar: We can add this property to display widget in front of the Chip label.

backgroundColor: This property assigns the background color of the this widget by taking the Color class as an object.

deleteButtonTooltipMessage: This property accepts a string as the object to use for the delete button tooltip.

deleteIcon: We can add the widget which can be shown in the UI when onDeleted function is called.

deleteIconColor: This property assigns the color of the delete icon by taking the Color class as an object.

elevation: This widget has a double type value because the object decides the elevated height of the Chip widget.

focusNode: The focusNode property takes the FocusNode class when the object assigns another focus node to the widget.

label: We can set the Primary content of the widget.

labelPadding: This property controls the padding around the label by taking an EdgeInsetsGeometry object.

labelStyle: The labelStyle property the TextStyle class as an object to style the label text.

materialTapTargetSize: This property specifies the size of the area to be tapped on click. Takes MaterialTapTargetSize as an object.

onDeleted: We can also use the onDelete property stores the VoidCalback type as an object.

padding: This property controls the empty space. It takes the EdgeInsetsGeometry class as an object.

shadowColor: This controls the color of the shadow under the widget. It takes the Color class as an object.

shape: This defines the shape of the Chip widget. It has the ShapeBorder class as an object.

Implementation of Chip Widget:

We will create a simple demo to show a category Ui using Chip Widget.

We can use text field for adding the items in list. In the onSubmitted callback of the TextField. We can call the addCategories method and pass the category name from the text input retrieved from the user to addCategories method.

To delete a category from the category list, we use onDeleted callback of the Chip widget. We will also pass the category name which we want to remove from the category list to removeCategories method.

Full Code:

Output:

Conclusion: 

In this blog, we have created a simple category UI by using the Chip widget.

You can also modify this code according to your need.

I hope it will help you out in understanding and getting an idea about the Chip Widget . You can also read more Mobikul blog here and Flutter app development.