What can be customized in the Flutter ChoiceChip widget
The Flutter ChoiceChip widget allows for the customization of several visual properties to give it a unique look and feel. Some of the customizable properties include the label, selected and disabled state, label style, and padding. You can also customize the ChoiceChip border, background colour, and selected colour.
Additionally, you can change the ChoiceChip avatar and label spacing, and add an icon to be displayed when the ChoiceChip is selected. With these customization options, you can create ChoiceChip widgets that perfectly fit your application’s design and functionality requirements.
Here are the ChoiceChip properties:
ChoiceChip ChoiceChip({
Key? key,
Widget? avatar,
required Widget label,
TextStyle? labelStyle,
EdgeInsetsGeometry? labelPadding,
void Function(bool)? onSelected,
double? pressElevation,
required bool selected,
Color? selectedColor,
Color? disabledColor,
String? tooltip,
BorderSide? side,
OutlinedBorder? shape,
Clip clipBehavior = Clip.none,
FocusNode? focusNode,
bool autofocus = false,
Color? backgroundColor,
EdgeInsetsGeometry? padding,
VisualDensity? visualDensity,
MaterialTapTargetSize? materialTapTargetSize,
double? elevation,
Color? shadowColor,
Color? surfaceTintColor,
IconThemeData? iconTheme,
Color? selectedShadowColor,
ShapeBorder avatarBorder = const CircleBorder(),
})How to use an avatar in Flutter ChoiceChip
The avatar property of ChoiceChip is used to display an image avatar to the left of the label. To use it, you can pass an instance of the Widget class, such as CircleAvatar, Image, or any other widget that displays an image.
Here’s an example that uses the NetworkImage class to display an image from a network URL as the avatar of a ChoiceChip:
ChoiceChip(
avatar: CircleAvatar(
backgroundImage: NetworkImage('https://picsum.photos/250?image=9'),
),
label: Text('Choice Chip'),
selected: false,
onSelected: (selected) {},
),
In this example, we used the CircleAvatar widget to display an image avatar. We passed an instance of the NetworkImage class to the backgroundImage property to load the image from the specified URL.
Note that the avatar property can be null if you don’t want to display an image avatar.
ChoiceChip(
avatar: null,
label: Text('Choice Chip'),
selected: false,
onSelected: (selected) {},
),
ChoiceChip(
avatar: CircleAvatar(
backgroundImage: null,
),
label: Text('Choice Chip'),
selected: false,
onSelected: (selected) {},
),
Flutter ChoiceChip widget avatar with Image
To use an asset image in a ChoiceChip avatar, you first need to import the image into your project’s assets folder. You can then load the image using the AssetImage widget and provide it as the avatar parameter in the ChoiceChip constructor.
Here’s an example code snippet that demonstrates how to use an asset image in a ChoiceChip avatar:
ChoiceChip(
avatar: CircleAvatar(
backgroundImage: AssetImage('assets/logo.png'),
),
label: Text('Choice Chip'),
selected: false,
onSelected: (selected) {},
),
In this example, we’ve used a CircleAvatar widget as the ChoiceChip avatar, which allows us to provide an image as the avatar. We’ve used the AssetImage widget to load the image from our project’s assets folder, and we’ve provided it as the backgroundImage parameter of the CircleAvatar widget.
You can customize the size of the avatar by adjusting the radius property of the CircleAvatar widget. You can also add padding or margin around the avatar by wrapping it in a Padding or Container widget, respectively.
Flutter ChoiceChip widget avatar with Icon
To use an Icon as an avatar in a ChoiceChip, we can pass an Icon widget to the avatar property of the ChoiceChip. The Icon widget can be customized with different sizes, colours, and styles. Here’s an example code that shows how to use an Icon as an avatar in a ChoiceChip:
ChoiceChip(
avatar: Icon(Icons.favorite),
label: Text('Choice Chip'),
selected: false,
onSelected: (selected) {},
),
In this example, we used the favorite icon from the Icons class as the avatar for the ChoiceChip. When the ChoiceChip is selected, the onSelected callback function is called where we can handle the state change.
How to customize the colours of the ChoiceChip in Flutter
Here is how to customize colours for a Flutter ChoiceChip widget:
- disabledColor: This property sets the colour of the chip when it is disabled.
- selectedColor: This property sets the colour of the chip when it is selected.
- backgroundColor: This property sets the background colour of the chip.
- shadowColor: This property sets the colour of the shadow behind the chip.
- surfaceTintColor: This property sets the colour of the chip when it is pressed. The default value is a light grey.
- selectedShadowColor: This property sets the colour of the shadow behind the chip when it is selected.
To use these properties in a Flutter ChoiceChip widget, you can set them in the constructor of the widget or using the Theme widget. Here’s an example code that sets custom colours for a ChoiceChip:
ChoiceChip(
label: Text('Choice Chip'),
selected: true,
onSelected: (bool selected) {},
disabledColor: Colors.grey,
selectedColor: Colors.blue,
backgroundColor: Colors.white,
shadowColor: Colors.grey,
pressElevation: 8.0,
elevation: 2.0,
),You can play around with the colour values to achieve the desired look for your ChoiceChip widget.
How to use onSelected in Flutter ChoiceChip
The onSelected property in Flutter’s ChoiceChip widget is used to define a callback function that is triggered when the user selects the chip. The callback function takes a boolean parameter that indicates whether the chip has been selected or not.
To use the onSelected property, you need to first define the callback function that you want to be triggered when the chip is selected. This function should take a boolean parameter that indicates whether the chip has been selected or not. Then, you can pass this function to the onSelected property of the ChoiceChip.
Here’s an example code snippet that shows how to use the onSelected property:
bool _isSelected = false;
ChoiceChip(
label: Text('Choice Chip'),
selected: _isSelected,
selectedColor: Colors.blue,
onSelected: (isSelected) {
setState(() {
_isSelected = isSelected;
});
},
)
In this example, the ChoiceChip widget has a label that says ‘Choice Chip’. The selected property is set to _isSelected, which is a boolean variable that starts as false. The onSelected property is set to a callback function that updates the _isSelected variable with the value of the isSelected parameter passed to it.
When the user selects the chip, the onSelected callback function is triggered with the value true for the isSelected parameter. The setState function is called to update the state of the widget, which causes the ChoiceChip to be rebuilt with the updated value of _isSelected.
How to customize the Label in the Flutter ChoiceChip widget
You can customize the label in a Flutter ChoiceChip in various ways. Here are some customization options with code examples:
Changing the ChoiceChip label text style:
You can change the font size, font weight, font style, colour, and other properties of the label text by using the labelStyle property.
ChoiceChip(
label: Text('Choice Chip'),
labelStyle: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.red,
),
selected: true,
),
Changing the ChoiceChip label padding:
To change the padding of the label in a ChoiceChip, you can use the labelPadding property. This property takes a EdgeInsets object, which allows you to set the padding for each side of the label. For example:
ChoiceChip(
label: Text('Choice Chip'),
labelPadding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
selected: true,
),
Adding an icon to the label in ChoiceChip:
You can add an icon to the label using the Row widget and set the labelPadding property to control the space between the icon and the label.
ChoiceChip(
label: Row(
children: [
Icon(Icons.check_circle, color: Colors.green),
SizedBox(width: 5),
Text('Example Label'),
],
),
selected: true,
),
Changing the ChoiceChip label background colour:
I’m not sure how the backgroundColor property works in the ChoiceChip widget. The ChoiceChip has two states, selected and disabled, and we can use selectedColor and disabledColor to customize the background colour for those states. However, I’ve noticed that the backgroundColor property doesn’t seem to have any visible effect. So essentially, we can customize the background colour of the ChoiceChip based on its state using the selectedColor and disabledColor properties.
ChoiceChip(
label: Text('Choice Chip'),
backgroundColor: Colors.blue,
selectedColor: Colors.red,
disabledColor: Colors.green,
selected: true,
),
How to use selected in the Flutter ChoiceChip
The selected property in Flutter ChoiceChip is used to indicate whether the chip is currently selected or not. It is a boolean property, with false as its default value.
When the user taps on the chip, the value of selected changes to true. You can use this property to change the appearance of the chip when it is selected, for example, changing its colour, adding an icon, or changing the label text.
Here’s an example code of how to use the selected property:
bool _isSelected = false;
ChoiceChip(
label: Text('My Choice'),
selected: _isSelected,
onSelected: (bool selected) {
setState(() {
_isSelected = selected;
});
},
)In the code above, we first define a boolean _isSelected with a default value of false. We then create a ChoiceChip widget with a label and pass the _isSelected boolean to the selected property. We also define an onSelected callback function that takes a boolean parameter selected and sets the _isSelected value to selected.
When the user taps on the chip, the onSelected callback function is called and updates the _isSelected value to the new selected value. This, in turn, changes the appearance of the chip based on the value of _isSelected.
How to change the shape of the Flutter ChoiceChip
The Flutter ChoiceChip widget supports five different shapes: RoundedRectangleBorder, ContinuousRectangleBorder, CircleBorder, StadiumBorder, and BeveledRectangleBorder. You can change the shape of the ChoiceChip by specifying the desired shape in the shape property.
Here is a short description of the five shapes that can be used in Flutter ChoiceChip:
- RoundedRectangleBorder: This shape creates a rectangular shaped ChoiceChip with rounded corners. It’s a simple and classic shape that works well for a variety of use cases.
- ContinuousRectangleBorder: This shape is similar to the RoundedRectangleBorder, but it has straight corners instead of rounded ones. This can create a more modern or minimalist look, depending on the other design elements you use with it.
- CircleBorder: This shape creates a circular ChoiceChip. It’s a good option if you want a simple, unobtrusive design that doesn’t draw too much attention to itself.
- StadiumBorder: This shape creates a pill-shaped ChoiceChip with rounded ends. It can be a good choice if you want to draw attention to the text on the chip since the rounded ends create a visual “frame” around the label.
- BeveledRectangleBorder: This shape creates a ChoiceChip with angled corners, giving it a more geometric and dynamic look than the other options. It can be a good choice if you want to create a design that feels modern and playful.
Here is an example code for using all five shapes:
Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.all(10),
child: Column(
children: [
ChoiceChip(
label: Text('Rounded Rectangle'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
selected: true,
),
ChoiceChip(
label: Text('Continuous Rectangle'),
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
selected: true,
),
ChoiceChip(
label: Text('Circle'),
labelPadding: EdgeInsets.all(20),
shape: CircleBorder(
),
selected: true,
),
ChoiceChip(
label: Text('Stadium'),
shape: StadiumBorder(
),
selected: true,
),
ChoiceChip(
label: Text('Beveled Rectangle'),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
selected: true,
),
],
)
)
In the example above, the first ChoiceChip has a rounded rectangle shape, the second ChoiceChip has a continuous rectangle shape, the third ChoiceChip has a circle shape, the fourth ChoiceChip has a stadium shape, and the fifth ChoiceChip has a bevelled rectangle shape.
How to add a border to the Flutter ChoiceChip
To add a black border to the Flutter ChoiceChip, you can use the side property of the Border class. The side property allows you to define which sides of the widget should have a border, as well as the color and width of the border.
Here’s an example code snippet that demonstrates how to add a black border to a ChoiceChip with each of the 5 available shapes using the side property:
Column(
children: [
ChoiceChip(
label: Text('ChoiceChip with border'),
selected: true,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black, width: 2),
borderRadius: BorderRadius.circular(30),
),
),
ChoiceChip(
label: Text('ChoiceChip with border'),
selected: true,
shape: StadiumBorder(
side: BorderSide(color: Colors.black, width: 2),
),
),
ChoiceChip(
label: Text('ChoiceChip with border'),
selected: true,
shape: BeveledRectangleBorder(
side: BorderSide(color: Colors.black, width: 2),
borderRadius: BorderRadius.circular(10),
),
),
ChoiceChip(
label: Text('ChoiceChip with border'),
padding: EdgeInsets.symmetric(vertical: 70),
selected: true,
shape: CircleBorder(
side: BorderSide(color: Colors.black, width: 2),
),
),
ChoiceChip(
label: Text('ChoiceChip with border'),
selected: true,
shape: ContinuousRectangleBorder(
side: BorderSide(color: Colors.black, width: 2),
borderRadius: BorderRadius.circular(20),
),
),
],
)
In this example, we’ve used the side property of the Border class to define a black border with a width of 2. We’ve also specified the borderRadius property for the RoundedRectangleBorder and BeveledRectangleBorder shapes to give them rounded corners.
