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:
|
1 2 3 4 5 6 7 |
Chip( avatar: CircleAvatar( backgroundColor: Colors.grey.shade800, child: const Text('D'), ), label: const Text('Demo'), ) |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
void addCategories(String categoryName) { setState(() { if(categories.contains(categoryName)){ categories.remove(categoryName); } categories.add(categoryName); controller.text = ''; }); } void removeCategories(String categoryName) { setState(() { categories.remove(categoryName); }); } |
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.
|
1 2 3 4 5 6 |
TextField( onSubmitted: (category) { addCategories(category); }, .... ) |
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.
|
1 2 3 4 5 6 |
Chip( onDeleted: () { removeCategories(category); }, .... ) |
Full Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
import 'package:flutter/material.dart'; void main() { runApp( const MaterialApp( debugShowCheckedModeBanner: false, home:ChipDemo() ), //MaterialApp ); } class ChipDemo extends StatefulWidget { const ChipDemo({Key? key}) : super(key: key); @override State<ChipDemo> createState() => _ChipDemoState(); } class _ChipDemoState extends State<ChipDemo> { TextEditingController controller = TextEditingController(); List<String> categories = [ 'Android', 'IOS', 'Web', 'Flutter', ]; void addCategories(String categoryName) { setState(() { if(categories.contains(categoryName)){ categories.remove(categoryName); } categories.add(categoryName); controller.text = ''; }); } void removeCategories(String categoryName) { setState(() { categories.remove(categoryName); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Chip Widgets Demo'), centerTitle: true, backgroundColor: Colors.red, ), body: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(16.0), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const SizedBox(height: 16), Wrap( spacing: 24, children: categories.map( (category) { return Chip( onDeleted: () { removeCategories(category); }, deleteIcon: const Icon(Icons.remove_circle), label: Text(category), ); }, ).toList(), ), const SizedBox(height: 40), const Text( 'Enter the Category and press enter to add it.', style: TextStyle( fontSize: 18, fontWeight: FontWeight.w500, ), ), const SizedBox(height: 16), TextField( controller: controller, onSubmitted: (category) { addCategories(category); }, cursorColor: Colors.black, decoration: InputDecoration( labelText: 'Enter Category Name', hintText: 'Enter Category Name', labelStyle: TextStyle(color: Colors.black), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(16), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(16), ), ), ), ], ), ), ), ), ); } } |
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.