Chip Widgets In Flutter
Flutter widgets are built using a modern framework that takes inspiration from React. We have learned before that everything in Flutter is a widget. At whatever point you will code for building anything in Flutter, it will be inside a widget. The focal intention is to build the application out of widgets.
It portrays how your application view should look like with their present design and state. When you adjusted the code, the widget rebuilt its portrayal by calculating the distinction between the past and current widget to decide the insignificant changes for delivering in the application’s UI.
In this article, we will explore the Chip Widgets In Flutter. We will also implement a demo program, describe properties and their types, and how to use them in your flutter applications.
Table Of Contents::
Chip Widget
Chips are conservative components that speak to quality, text, entity, or action. Providing a non-invalid onDeleted callback will make the chip incorporate a button for erasing the chip. Its progenitors must incorporate Material, MediaQuery, Directionality, and MaterialLocalizations. Regularly these widgets are given by MaterialApp and Scaffold. The label and clipBehavior contentions must not be invalid.
It speaks to complex elements in small blocks, for example, a contact. Contact chips may minimally speak to contact data. Chips can be utilized for different kinds of elements, including free-form text, predefined text, rules, or contacts. Chips may likewise contain icons.
First, We will create a basic chip widget in flutter
Widget _buildChip(String label, Color color) {
return Chip(
labelPadding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.white70,
child: Text(label[0].toUpperCase()),
),
label: Text(
label,
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: color,
elevation: 6.0,
shadowColor: Colors.grey[60],
padding: EdgeInsets.all(8.0),
);
}
}
We will create a _buildChip() widget, In this widget, we will return a Chip, and in this method, we will use an avatar and label property.
chipList() {
return Wrap(
spacing: 6.0,
runSpacing: 6.0,
children: <Widget>[
_buildChip('Gamer', Color(0xFFff6666)),
_buildChip('Hacker', Color(0xFF007f5c)),
_buildChip('Developer', Color(0xFF5f65d3)),
_buildChip('Racer', Color(0xFF19ca21)),
_buildChip('Traveller', Color(0xFF60230b)),
],
);
}
We will create the chipList() method and call _buildChip() widget on this method and Wrap it. Now, run the code and get the final output on your devices.
Properties
Let’s see some of its properties:
- > label: This property is required; it acknowledges any widget simultaneously; mostly, it is a great idea to have a Text widget representing the name of any entity, action, and so forth.
- > avatar: This property was, It acknowledges any widget and can be utilized to show pictures, the underlying letters of any entity, action, and so forth
- > backgroundColor: This property indicated the background color of the chip when it is unselected and empowered.
- > labelStyle: This property was utilized to apply any TextStyle to the label.
- > labelPadding: This property was added some padding around the label.
- > elevation: This property was acknowledged as the double value and used to elevate the chip.
- > shadowColor: This property was color to the shadow of the chip when elevation is set.
- > deleteIcon: This property was utilized to show the delete icon. This will be just obvious when onDeleted is set.
- > onDeleted: This property was a callback when the delete icon is squeezed inside the chip.
- > deleteIconColor: This property was color to be set for delete icon.
- > deleteButtonTooltipMessage: This property was set as a message to show up on the delete icon’s tooltip.
- > shape: This property can be utilized to offer shapes to the border of the chip.
Features
- The Chips widget Value property can be bound to a dataset of legitimate qualities, for instance, Email Addresses, Hobbies, Skillset, Categories, and the sky is the limit from there. You can add new values, yet these new values won’t be added to the dataset.
- It goes about as a search/autocomplete widget. When you begin composing in the Chips widget, it triggers the choice of values from the dataset and compares the character’s values.
- Permit Only Select (Default: false) — If Allow Only Select is set to valid, Chips will confine adding values other than in the choice. As a matter of default, there is no limitation. In any case, note that these new values won’t be added to the dataset.
- Max Size (Default: 0) — By default, there is no restriction on the number of chips to add. If it is set to valid after Max Size arrives at the input box to add more, it will be covered up and indicated again after a portion of the components is erased.
- Chip thing class name property from the styles tab can be utilized to apply styles for singular things of the Chip.
- Class names can be entered (with no condition), these classes will be applied to all the chips.
- Runtime Functionality: You can explore between the chip things utilizing the console both ways keys. Likewise, utilizing the erase/delete keys, the Chip thing can be Deleted.
Types
1. Action Chips
Action chips can be utilized to summon some activity on primary substance. It can not be disabled since it isn’t required, then it ought not even to be accessible to users.
ActionChip(
elevation: 8.0,
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.redAccent,
child: Icon(Icons.mode_comment,color:
Colors.white,size: 20,),
),
label: Text('Message'),
onPressed: () {
_key.currentState.showSnackBar(SnackBar(
content: Text('Message...'),
));
},
backgroundColor: Colors.grey[200],
shape: StadiumBorder(
side: BorderSide(
width: 1,
color: Colors.redAccent,
)),
);
In this chip, we will use an avatar, label, shape, and onPressed(). In the onPressed method, we will add a snackbar for displaying the text. Now, run the code and output show below the video.
2. Input Chips
Input chips speak to a mind-boggling snippet of information, for example, a substance (individual, spot, or thing) or conversational content, in a minimal structure.
Input chips can be made selectable by setting onSelected, deletable by setting onDeleted, and pressable like a button with onPressed. They have a label, and they can have the leading symbol (see avatar) and a trailing symbol (deleteIcon). Colors and padding can be tweaked.
InputChip(
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.pink.shade600,
child: Text('FD'),
),
label: Text('Flutter Devs',style: TextStyle(color:
_isSelected?Colors.white:Colors.black),
),
selected: _isSelected,
selectedColor: Colors.blue.shade600,
onSelected: (bool selected) {
setState(() {
_isSelected = selected;
});
},
onDeleted: () {
},
);
In this chip, we will show onSelected and OnDeleted for only icon show. When the user taps on this chip, then the whole chip is selected. The below video shows how the Input Chips will work.
3. Filter Chips
The Filter chip contains alternatives, attributes, categories with the goal that users can filter from it. You can undoubtedly replace the checkbox with a Filter chip. Filter chips consider plainly outlined and uncovered alternatives in a conservative zone.
FilterChip(
backgroundColor: Colors.tealAccent[200],
avatar: CircleAvatar(
backgroundColor: Colors.cyan,
child: Text(company.name[0].toUpperCase(),style: TextStyle(color: Colors.white),),
),
label: Text(company.name,),
selected: _filters.contains(company.name),
selectedColor: Colors.purpleAccent,
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add(company.name);
} else {
_filters.removeWhere((String name) {
return name == company.name;
});
}
});
},
),
In this chip, we will select and unselected randomly with your multiple choices. The below video shows how the Filter Chips will work.
4. Choice Chips
The choice chip permits choosing a single chip from the rundown. It can replace different widgets that permit a single determination, like the switch button and radio button.
ChoiceChip(
label: Text(_choices[index]),
selected: _choiceIndex == index,
selectedColor: Colors.red,
onSelected: (bool selected) {
setState(() {
_choiceIndex = selected ? index : 0;
});
},
backgroundColor: Colors.green,
labelStyle: TextStyle(color: Colors.white),
);
Choice chips contain related descriptive text or categories. This chip only allows single-chip selection. The below video shows how the Choice Chips will work.
Code File
import 'package:flutter/material.dart';
class ChipDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ChipDemoState();
}
class _ChipDemoState extends State<ChipDemo> {
GlobalKey<ScaffoldState> _key;
bool _isSelected;
List<CompanyWidget> _companies;
List<String> _filters;
List<String> _choices;
int _choiceIndex;
@override
void initState() {
super.initState();
_key = GlobalKey<ScaffoldState>();
_isSelected = false;
_choiceIndex = 0;
_filters = <String>[];
_companies = <CompanyWidget>[
CompanyWidget('CEO'),
CompanyWidget('Director'),
CompanyWidget('Manager'),
CompanyWidget('Team Leader'),
CompanyWidget('Employee'),
];
_choices = ["Software Engineer","Software Developer",
"Software Testing"];
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(
title: Text("Chip Widget In Flutter"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
chipList(),
_buildActionChips(),
_buildInputChips(),
Wrap(
children: companyPosition.toList(),
),
_buildChoiceChips(),
],
),
),
);
}
chipList() {
return Wrap(
spacing: 6.0,
runSpacing: 6.0,
children: <Widget>[
_buildChip('Gamer', Color(0xFFff6666)),
_buildChip('Hacker', Color(0xFF007f5c)),
_buildChip('Developer', Color(0xFF5f65d3)),
_buildChip('Racer', Color(0xFF19ca21)),
_buildChip('Traveller', Color(0xFF60230b)),
],
);
}
Widget _buildChoiceChips() {
return Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
itemCount: _choices.length,
itemBuilder: (BuildContext context, int index) {
return ChoiceChip(
label: Text(_choices[index]),
selected: _choiceIndex == index,
selectedColor: Colors.red,
onSelected: (bool selected) {
setState(() {
_choiceIndex = selected ? index : 0;
});
},
backgroundColor: Colors.green,
labelStyle: TextStyle(color: Colors.white),
);
},
),
);
}
Widget _buildInputChips() {
return InputChip(
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.pink.shade600,
child: Text('FD'),
),
label: Text('Flutter Devs',style: TextStyle(color:
_isSelected?Colors.white:Colors.black),
),
selected: _isSelected,
selectedColor: Colors.blue.shade600,
onSelected: (bool selected) {
setState(() {
_isSelected = selected;
});
},
onDeleted: () {
},
);
}
Widget _buildActionChips() {
return ActionChip(
elevation: 8.0,
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.redAccent,
child: Icon(Icons.mode_comment,color: Colors.white,size: 20,),
),
label: Text('Message'),
onPressed: () {
_key.currentState.showSnackBar(SnackBar(
content: Text('Message...'),
));
},
backgroundColor: Colors.grey[200],
shape: StadiumBorder(
side: BorderSide(
width: 1,
color: Colors.redAccent,
)),
);
}
Iterable<Widget> get companyPosition sync* {
for (CompanyWidget company in _companies) {
yield Padding(
padding: const EdgeInsets.all(6.0),
child: FilterChip(
backgroundColor: Colors.tealAccent[200],
avatar: CircleAvatar(
backgroundColor: Colors.cyan,
child: Text(company.name[0].toUpperCase(),style: TextStyle(color: Colors.white),),
),
label: Text(company.name,),
selected: _filters.contains(company.name),selectedColor: Colors.purpleAccent,
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add(company.name);
} else {
_filters.removeWhere((String name) {
return name == company.name;
});
}
});
},
),
);
}
}
Widget _buildChip(String label, Color color) {
return Chip(
labelPadding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.white70,
child: Text(label[0].toUpperCase()),
),
label: Text(
label,
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: color,
elevation: 6.0,
shadowColor: Colors.grey[60],
padding: EdgeInsets.all(8.0),
);
}
}
class CompanyWidget {
const CompanyWidget(this.name);
final String name;
}
Conclusion:
In the article, I have explained some properties and types of Chip Widgets; you can modify this code according to your choice. This was a small introduction to Chip Widgets On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Chip Widgets in your flutter projects. We will show the chips, some properties using in chips, and make a demo program for working chip in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤https://giphy.com/embed/d31w24psGYeekCZy/twitter/iframe
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Chip Widgets Demo:
flutter-devs/flutter_chip_widgets_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
