An assortment of filter chips is typically utilized where the user can choose different choices. Making a filter chip in Flutter should be possible by utilizing the FilterChip widget which is exceptionally simple to utilize.
This blog will explore the Filter Chip In Flutter. We perceive how to execute a demo program. We will learn how to use the Filter Chip and how to customize your flutter applications.
FilterChip class – material library – Dart API
A Material Design filter chip. Filter chips use tags or descriptive words as a way to filter content. Filter chips are…api. flutter.dev
Table Of Contents::
Introduction:
FilterChip is a material design widget in a flutter. Filter chips are utilized when we believe that the client should choose different choices from a gathering of chips.
Flutter gives a widget called FilterChip which permits us to add a filter chip to our application. They can be utilized in the spot of Checkbox or Switch widgets. It requires one of its precursors to be a Material widget.
Demo Module ::
This demo video shows how to use the filter chip in a flutter and shows how a filter chip will work in your flutter applications. We will show a user choose the many choices from a group of chips. It will be shown on your devices.
Construction:
To utilize FilterChip, you need to call the constructor underneath:
To create a filter chip in flutter we have to call the constructor of the FilterChip class provided by flutter. There are two required properties for the FilterChip widget which are label and onSelected callback.
To make a filter chip in flutter we need to call the constructor of the FilterChip class given by flutter. There are two required properties for the FilterChip widget which are label and onSelected callback.
const FilterChip({
Key? key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.selected = false,
required this.onSelected,
this.pressElevation,
this.disabledColor,
this.selectedColor,
this.tooltip,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.backgroundColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.selectedShadowColor,
this.showCheckmark,
this.checkmarkColor,
this.avatarBorder = const CircleBorder(),
})
Without utilizing these properties we can’t make a filter chip. We need to set the name with a widget, normally a text widget. The onSelected callback is utilized to address whether the chip is chosen or unselected.
Properties:
There are some properties of FilterChip are:
- > selected — This property is utilized to show whether the chip is chosen or unselected. It takes a boolean value setting true will make the chip chosen and false will make the chip unselected.
- > onSelected — This property is utilized to update the chosen or unselected condition of the decision chip and to play out certain activities when the chip is chosen or unselected.
- > showCheckmark — This property is used to show/hide the checkmark that appears when the chip is selected. It is a boolean value. Setting true will make the checkmark visible and false will make it invisible. By default the value is true.
- > pressElevation — This property is used to change the amount of elevation we want to apply when we press the chip.
- > backgroundColor — This property is used to add/change the background color of the filter chip.
- > elevation — This property is used to apply elevation to the filter chip.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called item_model.dart inside the lib folder.
First, we want an ItemModel class for holding the information of Filterchip. The List will hold the objects of type ItemModel which is a pojo class. The pojo class will have three parameters label, color, and isSelected.
import 'dart:ui';
class ItemModel {
String label;
Color color;
bool isSelected;
ItemModel(this.label, this.color, this.isSelected);
}
The label will hold the label of the chip, the color will hold the backgroundColor and isSelected will hold the chosen or unselected condition of the filter chip.
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class MyHomePage(). In this class, we will first create a List of types ItemModel and provide the data for chips.
final List<ItemModel> _chipsList = [
ItemModel("Android", Colors.green, false),
ItemModel("Flutter", Colors.blueGrey, false),
ItemModel("Ios", Colors.deepOrange, false),
ItemModel("Python", Colors.cyan, false),
ItemModel("React JS", Colors.teal, false),
];
We will create a bool selected is equal to the false
bool selected = false;
In the body, we will be a Column widget. In this widget, we will add an image with height and width. We will add a Wrap widget. in this widget, we will add a spacing was 8, the direction was the horizontal axis, and the filterChipsList() method. We will below define the method with the code.
Column(
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
Wrap(
spacing: 8,
direction: Axis.horizontal,
children: filterChipsList(),
),
],
),
Now we will deeply define filterChipsList() method are:
This method was on the list of widgets. We will add the FilterChip widget. In this widget, we will add a label, backgroundColor, selected, labelStyle selected, onSelected, and then return chips.
List<Widget> filterChipsList() {
List<Widget> chips = [];
for (int i = 0; i < _chipsList.length; i++) {
Widget item = Padding(
padding: const EdgeInsets.only(left: 10, right: 5),
child: FilterChip(
label: Text(_chipsList[i].label),
labelStyle: const TextStyle(color: Colors.white,fontSize: 16),
backgroundColor: _chipsList[i].color,
selected: _chipsList[i].isSelected,
onSelected: (bool value) {
setState(() {
_chipsList[i].isSelected = value;
});
},
),
);
chips.add(item);
}
return chips;
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_filter_chips_demo/item_model.dart';
import 'package:flutter_filter_chips_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool selected = false;
final List<ItemModel> _chipsList = [
ItemModel("Android", Colors.green, false),
ItemModel("Flutter", Colors.blueGrey, false),
ItemModel("Ios", Colors.deepOrange, false),
ItemModel("Python", Colors.cyan, false),
ItemModel("React JS", Colors.teal, false),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Filter Chip Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Column(
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
Wrap(
spacing: 8,
direction: Axis.horizontal,
children: filterChipsList(),
),
],
),
));
}
List<Widget> filterChipsList() {
List<Widget> chips = [];
for (int i = 0; i < _chipsList.length; i++) {
Widget item = Padding(
padding: const EdgeInsets.only(left: 10, right: 5),
child: FilterChip(
label: Text(_chipsList[i].label),
labelStyle: const TextStyle(color: Colors.white,fontSize: 16),
backgroundColor: _chipsList[i].color,
selected: _chipsList[i].isSelected,
onSelected: (bool value) {
setState(() {
_chipsList[i].isSelected = value;
});
},
),
);
chips.add(item);
}
return chips;
}
}
Conclusion:
In the article, I have explained the Filter Chip basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Filter Chip User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Filter Chip in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Filter Chip, and make a demo program for working with Filter Chip in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
Related: Action Chip In Flutter
Related: Input Chip In Flutter
