Flutter Chips: Action chip, Choice chip, Filter chip, Input chip
In Flutter, chips are used to represent a small piece of information, such as a category, filter, or tag. Chips are a great way to represent selections, actions, and filters in a compact and visually appealing way.
This tutorial will cover the different types of chips available in Flutter: Action chip, Choice chip, Filter chip, and Input chip.
You will learn how to create each type of chip and customize their appearance and behavior.
Compact elements that represent an input, attribute, or action
Chips are a type of widget that represent a small piece of information, such as a tag or a filter. The code defines a ChipDemo class which extends StatefulWidget, and the state of the widget is managed by _ChipDemoState class, which extends State<ChipDemo> and implements RestorationMixin.
The code defines the following types of chips:
- ActionChip: This is a chip that represents an action that can be performed. In this code, an ActionChip is defined that represents a button to turn on lights. When the chip is pressed, an onPressed callback is called, but in this code, it is not implemented.
- ChoiceChip: This is a chip that allows the user to select one option from a set of options. In this code, three ChoiceChip widgets are defined with the labels "Small", "Medium", and "Large". The selected option is maintained in a RestorableIntN object _indexSelected. When a ChoiceChip is pressed, its onSelected callback is called, which sets the selected option in _indexSelected and updates the state of the widget.
- FilterChip: This is a chip that represents a filter that can be applied. In this code, three FilterChip widgets are defined with the labels "Elevator", "Washer", and "Fireplace". The selected filters are maintained in RestorableBool objects isSelectedElevator, isSelectedWasher, and isSelectedFireplace. When a FilterChip is pressed, its onSelected callback is called, which toggles the selected state of the filter and updates the state of the widget.
- InputChip: This is a chip that represents an input. In this code, an InputChip is defined with the label "Biking" and an avatar icon that represents biking. When the chip is pressed, an onPressed callback is called, but in this code, it is not implemented. The chip also has a delete icon, which can be used to delete the input. When the delete icon is pressed, an onDeleted callback is called, but in this code, it is not implemented.
The code also defines some disabled chips, which are ChoiceChip, FilterChip, and InputChip widgets that are not interactive. They are used to display a chip that cannot be selected or deleted.
The code also implements state restoration using RestorationMixin. The state of the widget is saved and restored when the app is closed and reopened. The state includes the selected options and filters in the RestorableIntN and RestorableBool objects. The restorationId method is used to assign a unique ID to the widget's state, and the registerForRestoration method is used to register the state objects for restoration. The restoreState and dispose methods are used to save and dispose the state objects.
import 'package:flutter/material.dart';
class ChipDemo extends StatefulWidget {
const ChipDemo({super.key});
@override
State<ChipDemo> createState() => _ChipDemoState();
}
class _ChipDemoState extends State<ChipDemo> with RestorationMixin {
final RestorableIntN _indexSelected = RestorableIntN(null);
final RestorableBool isSelectedElevator = RestorableBool(false);
final RestorableBool isSelectedWasher = RestorableBool(false);
final RestorableBool isSelectedFireplace = RestorableBool(false);
@override
String get restorationId => 'choice_chip_demo';
@override
void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
registerForRestoration(_indexSelected, 'choice_chip');
registerForRestoration(isSelectedElevator, 'selected_elevator');
registerForRestoration(isSelectedWasher, 'selected_washer');
registerForRestoration(isSelectedFireplace, 'selected_fireplace');
}
@override
void dispose() {
_indexSelected.dispose();
isSelectedElevator.dispose();
isSelectedWasher.dispose();
isSelectedFireplace.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return
Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 20),
//.........................................Action chip
ActionChip(
onPressed: () {},
avatar: const Icon(
Icons.brightness_5,
color: Colors.black54,
),
label: const Text('Turn On Lights'),
),
//.........................................Choice chip
Wrap(
children: [
ChoiceChip(
label: const Text('Small'),
selected: _indexSelected.value == 0,
onSelected: (value) {
setState(() {
_indexSelected.value = value ? 0 : -1;
});
},
),
const SizedBox(width: 8),
ChoiceChip(
label: const Text('Medium'),
selected: _indexSelected.value == 1,
onSelected: (value) {
setState(() {
_indexSelected.value = value ? 1 : -1;
});
},
),
const SizedBox(width: 8),
ChoiceChip(
label: const Text('Large'),
selected: _indexSelected.value == 2,
onSelected: (value) {
setState(() {
_indexSelected.value = value ? 2 : -1;
});
},
),
],
),
const SizedBox(height: 12),
// Disabled chips
Wrap(
children: [
ChoiceChip(
label: const Text('Small'),
selected: _indexSelected.value == 0,
onSelected: null,
),
const SizedBox(width: 8),
ChoiceChip(
label: const Text('Medium'),
selected: _indexSelected.value == 1,
onSelected: null,
),
const SizedBox(width: 8),
ChoiceChip(
label: const Text('Large'),
selected: _indexSelected.value == 2,
onSelected: null,
),
],
),
//.........................................Filter chip
Wrap(
spacing: 8.0,
children: [
FilterChip(
label: const Text('Elevator'),
selected: isSelectedElevator.value,
onSelected: (value) {
setState(() {
isSelectedElevator.value = !isSelectedElevator.value;
});
},
),
FilterChip(
label: const Text('Washer'),
selected: isSelectedWasher.value,
onSelected: (value) {
setState(() {
isSelectedWasher.value = !isSelectedWasher.value;
});
},
),
FilterChip(
label: const Text('Fireplace'),
selected: isSelectedFireplace.value,
onSelected: (value) {
setState(() {
isSelectedFireplace.value = !isSelectedFireplace.value;
});
},
),
],
),
const SizedBox(height: 12),
// Disabled chips
Wrap(
spacing: 8.0,
children: [
FilterChip(
label: const Text('Elevator'),
selected: isSelectedElevator.value,
onSelected: null,
),
FilterChip(
label: const Text('Washer'),
selected: isSelectedWasher.value,
onSelected: null,
),
FilterChip(
label: const Text('Fireplace'),
selected: isSelectedFireplace.value,
onSelected: null,
),
],
),
//.........................................Input chip
InputChip(
onPressed: () {},
onDeleted: () {},
avatar: const Icon(
Icons.directions_bike,
size: 20,
color: Colors.black54,
),
deleteIconColor: Colors.black54,
label: const Text('Biking'),
),
const SizedBox(height: 12),
// Disabled chip
const InputChip(
onPressed: null,
onDeleted: null,
avatar: Icon(
Icons.directions_bike,
size: 20,
color: Colors.black54,
),
deleteIconColor: Colors.black54,
label: Text('Biking'),
),
],
),
)
);
}
}
..
Comments
Post a Comment