Check Mobile App
Read now
Start a Project

Flutter Chip Category UI

Save


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.

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.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Excellent work, fast, good quality and understood the brief perfectly! Quick responses developing the project and very good cooperation. I suggest to anyone.

Stathis Plakidas

Stathis Plakidas

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home