Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 126.96.36.199 release ready!
Owner and Founder. Opencart
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.
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.
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.
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.
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Excellent work, fast, good quality and understood the brief perfectly! Quick responses developing the project and very good cooperation. I suggest to anyone.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.