Choice Chip In Flutter
A choice chip is a sort of Material Plan chip. Choice chips permit the choice of a solitary chip from a set of choices. In Flutter, there is a committed widget called ChoiceChip that permits you to effectively make activity chips.
This blog will explore the Choice Chip In Flutter. We perceive how to execute a demo program. We will learn how to use the Choice Chip in your flutter applications.
ChoiceChip class – material library – Dart API
A Material Design choice chip. ChoiceChip s represent a single choice from a set. Choice chips contain related…api. flutter.dev
Table Of Contents ::
Introduction:
A choice chip is a material widget in a flutter. The choice chip permits the client to make a solitary choice from a set/gathering of chips. It contains a comparable sort of text or classification.
Flutter gives a widget considered ChoiceChip that allows us to add the choice chip to our application. It requires one of its precursors to be a Material widget.
Demo Module ::
This demo video shows how to use the choice chip in a flutter and shows how a choice chip will work in your flutter applications. We will show a user press the chip, then the chip will be selected. It will be shown on your devices.
Constructor:
To utilize ChoiceChip, you need to call the constructor underneath:
To create a choice chip in flutter we have to use the constructor of the ChoieChip class provided by flutter.
To make a choice chip in flutter we need to utilize the constructor of the ChoieChip class given by flutter.
const ChoiceChip({
Key? key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.onSelected,
this.pressElevation,
required this.selected,
this.selectedColor,
this.disabledColor,
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.avatarBorder = const CircleBorder(),
})
There are two required properties for the ChoiceChip widget which are labeled and selected. The label can be any widget normally a text widget and selected is a boolean value that is utilized to demonstrate whether the label is chosen or unselected. To utilize a choice chip we need to furnish these properties for certain qualities.
Properties:
There are some properties of ChoiceChip are:
- > selected — This property is utilized to set the chip’s state to be 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 choice chip and to play out certain activities when the chip is chosen or unselected.
- > selectedColor — This property is used to apply color to the chip when the chip is selected.
- > pressElevation — This property is used to change the amount of elevation we want to apply when we press the chip.
- > selectedShadowColor — This property is used to apply shadow color to the chip when the chip is transforming from a selected state to unselected state.
- > backgroundColor — This property is used to add/change the background color of the choice chip.
- > shadowColor — This property is used to apply color to the shadow that appears when the chip is elevated.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the first place, we want a pojo class for holding the information of the choice chip. The pojo class will have two parameters label and color. The label will hold the text to be shown as the label of the chip and the variety will hold the backgroundColor of the chip.
class Data {
String label;
Color color;
Data(this.label, this.color);
}
Now let’s create a List of type Data (pojo) and provide the data for chips.
final List<Data> _choiceChipsList = [
Data("Android", Colors.green),
Data("Flutter", Colors.blue),
Data("Ios", Colors.deepOrange),
Data("Python", Colors.cyan),
Data("React", Colors.pink)
];
We will also create an integer variable was _selectedIndex.
int? _selectedIndex;
In the body, we will add the Column widget. In this widget, we will add an image and wrap widget. In this widget, we will add direction was horizontal, the spacing was six, and its children were choiceChips() method. We will define deeply describe it below with the code.
Center(
child: Column(
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
Wrap(
spacing: 6,
direction: Axis.horizontal,
children: choiceChips(),
),
],
),
)
Now we will deeply define choiceChips() method are:
This method was on the list of widgets. We will add the ChoiceChip widget. In this widget, we will add a label, backgroundColor, selected, labelStyle selectedColor, onSelected, and then return chips.
List<Widget> choiceChips() {
List<Widget> chips = [];
for (int i = 0; i < _choiceChipsList.length; i++) {
Widget item = Padding(
padding: const EdgeInsets.only(left: 10, right: 5),
child: ChoiceChip(
label: Text(_choiceChipsList[i].label),
labelStyle: const TextStyle(color: Colors.white),
backgroundColor: _choiceChipsList[i].color,
selected: _selectedIndex == i,
selectedColor: Colors.black,
onSelected: (bool value) {
setState(() {
_selectedIndex = i;
});
},
),
);
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_choice_chip_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.green,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class Data {
String label;
Color color;
Data(this.label, this.color);
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
int? _selectedIndex;
final List<Data> _choiceChipsList = [
Data("Android", Colors.green),
Data("Flutter", Colors.blue),
Data("Ios", Colors.deepOrange),
Data("Python", Colors.cyan),
Data("React", Colors.pink)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Choice Chip Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: Colors.blueGrey,
),
body: Center(
child: Column(
children: [
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
Wrap(
spacing: 6,
direction: Axis.horizontal,
children: choiceChips(),
),
],
),
));
}
List<Widget> choiceChips() {
List<Widget> chips = [];
for (int i = 0; i < _choiceChipsList.length; i++) {
Widget item = Padding(
padding: const EdgeInsets.only(left: 10, right: 5),
child: ChoiceChip(
label: Text(_choiceChipsList[i].label),
labelStyle: const TextStyle(color: Colors.white),
backgroundColor: _choiceChipsList[i].color,
selected: _selectedIndex == i,
selectedColor: Colors.black,
onSelected: (bool value) {
setState(() {
_selectedIndex = i;
});
},
),
);
chips.add(item);
}
return chips;
}
}
Conclusion:
In the article, I have explained the Choice Chip basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Choice 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 Choice Chip in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Choice Chip, and make a demo program for working with Choice 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.
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.
