CheckBox ListTile In Flutter
In this blog, Here we will implement how to create a checked listview in flutter application. In this app, we will present the normal list item how to display CheckBox List using Flutter CheckboxListTile widget. It will not contain any kind of package in it. We will implement a demo of the CheckboxListTile in your flutter applications.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
CheckBox ListTile :
We are going to tell you how to use the checkbox list tile widget. If you must have an input where the user can select several options. The common solutions are to use the checkbox.you can add text or icons to the checkbox for that in the flutter .checkbox usage with icons or images and text may be the solution, but flutter provides an option that makes it much easier. A checkbox ListTile is a widget that combines a checkbox and a List Tile. The List Tile allows us to create a checkbox with the title subtitle without creating separate widgets in all the list item.
Demo Module :
Code Implementation :
Create a new dart file called flutter_checkbox_listtile_demo inside the lib folder.
CheckboxListTile(
activeColor: Colors.pink[300],
dense: true,
//font change
title: new Text(
checkBoxListTileModel[index].title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 0.5),
),
value: checkBoxListTileModel[index].isCheck,
secondary: Container(
height: 50,
width: 50,
child: Image.asset(
checkBoxListTileModel[index].img,
fit: BoxFit.cover,
),
),
onChanged: (bool val) {
itemChange(val, index);
})
As we are now going to use the checkbox ListTile widget in this screen. the checkbox list tile has a lot of parameters. But two parameters are very important. you have value (bool) and OnChanged (void function(bool)). In this, we can use the title. And under the title, we can use a subtitle to add more widgets. Just as we use it for details. A checkBox can use the secondary widget in ListTile. This checkbox will be on the opposite side. it is used for Icons or images.
Code File :
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_listtile_demo/model/listtilemodel.dart';
class CheckBoxListTileDemo extends StatefulWidget {
@override
CheckBoxListTileDemoState createState() => new CheckBoxListTileDemoState();
}
class CheckBoxListTileDemoState extends State<CheckBoxListTileDemo> {
List<CheckBoxListTileModel> checkBoxListTileModel =
CheckBoxListTileModel.getUsers();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.white,
centerTitle: true,
title: new Text(
'CheckBox ListTile Demo',
style: TextStyle(color: Colors.black),
),
),
body: new ListView.builder(
itemCount: checkBoxListTileModel.length,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
new CheckboxListTile(
activeColor: Colors.pink[300],
dense: true,
//font change
title: new Text(
checkBoxListTileModel[index].title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 0.5),
),
value: checkBoxListTileModel[index].isCheck,
secondary: Container(
height: 50,
width: 50,
child: Image.asset(
checkBoxListTileModel[index].img,
fit: BoxFit.cover,
),
),
onChanged: (bool val) {
itemChange(val, index);
})
],
),
),
);
}),
);
}
void itemChange(bool val, int index) {
setState(() {
checkBoxListTileModel[index].isCheck = val;
});
}
}
class CheckBoxListTileModel {
int userId;
String img;
String title;
bool isCheck;
CheckBoxListTileModel({this.userId, this.img, this.title, this.isCheck});
static List<CheckBoxListTileModel> getUsers() {
return <CheckBoxListTileModel>[
CheckBoxListTileModel(
userId: 1,
img: 'assets/images/android_img.png',
title: "Android",
isCheck: true),
CheckBoxListTileModel(
userId: 2,
img: 'assets/images/flutter.jpeg',
title: "Flutter",
isCheck: false),
CheckBoxListTileModel(
userId: 3,
img: 'assets/images/ios_img.webp',
title: "IOS",
isCheck: false),
CheckBoxListTileModel(
userId: 4,
img: 'assets/images/php_img.png',
title: "PHP",
isCheck: false),
CheckBoxListTileModel(
userId: 5,
img: 'assets/images/node_img.png',
title: "Node",
isCheck: false),
];
}
}
Conclusion :
In this article, I have explained a CheckBox ListTile demo, you can modify and experiment according to your own, this little introduction was from the CheckBox ListTile our side.
I hope this blog helps will provide you with sufficient information in Trying up the CheckBox ListTile in your flutter project. 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 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.
