Flutter – CheckboxListTile

21 Feb, 2022
CheckboxListTile is a built-in widget in flutter. We can say it a combination of CheckBox with a ListTile. Its properties such as value, activeColor, and checkColor are similar to the CheckBox widget, and title, subtitle, contentPadding, etc are similar to the ListTile widget. We can tap anywhere on the CheckBoxListTile to Google the checkbox. Below we will see all the properties of this widget along with an example.
const CheckboxListTile(
{Key key,
@required bool value,
@required ValueChanged<bool> onChanged,
Color activeColor,
Color checkColor,
Widget title,
Widget subtitle,
bool isThreeLine: false,
bool dense,
Widget secondary,
bool selected: false,
ListTileControlAffinity controlAffinity: ListTileControlAffinity.platform,
bool autofocus: false,
EdgeInsetsGeometry contentPadding,
bool tristate: false}
)
Properties of CheckboxListTile Widget:
activeColor: This widget takes in the Color class as the object to assign the checkbox a color when it is checked.
autofocus: This property takes in a boolean as the value to divide whether the widget will be selected on the initial focus or not.
checkColor: This property assigns a color to the check icon by taking in the Color class as the object.
contentPadding: This property is responsible to assign empty space inside the widget by taking in EdgeIsetsGeometry class as the object.
controlAffinity: The controlAffinity property holds the ListTileControlAffinity class as the object to decide the location of action in respect to text inside the widget.
dense: The dense property takes in a boolean as the object whether is associated with the vertical dense list.
isThreeLine: This property also takes in a boolean as the object to decide whether the text in the widget will be printed till the third line.
onChanged: This property takes in Valuechanged<bool> as the object. This property is responsible for the change in the checkbox.
secondary: The secondary property holds a widget as the object to be displayed on the opposite side of the checkbox.
selected:  This property takes in a boolean value as the object to decide whether the checkbox will be already selected or not.
subtitle: The subtitle property holds a widget as the object to be displayed below the title. Usually, this widget is Text.
title: This property also takes in a widget as the object to be displayed as the title of the CheckBoxListTle, usually, it is Text widget.
tristate: This property holds a boolean as the object. If it is set to true the values in the checkbox can either true, false, or null.
value: This property also takes in a boolean as the object to control whether the checkbox is selected or not.
Example 1:
Dart
import 'package:flutter/material.dart'; // importing material design libraryvoid main() {  runApp(MaterialApp(         // runApp method    home: HomePage(),  )); //MaterialApp} class HomePage extends StatefulWidget {  @override  _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> {   // value set to false  bool _value = false;   // App widget tree  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('GeeksforGeeks'),          backgroundColor: Colors.greenAccent[400],          leading: IconButton(            icon: Icon(Icons.menu),            tooltip: 'Menu',            onPressed: () {},          ), //IconButton        ), //AppBar        body: SizedBox(          width: 400,          height: 400,          child: Center(            child: Padding(              padding: const EdgeInsets.all(8.0),              child: Container(                decoration: BoxDecoration(                  border: Border.all(color: Colors.greenAccent),                  borderRadius: BorderRadius.circular(20),                ), //BoxDecoration                                 /** CheckboxListTile Widget **/                child: CheckboxListTile(                  title: const Text('GeeksforGeeks'),                  subtitle: const Text('A computer science portal for geeks.'),                  secondary: const Icon(Icons.code),                  autofocus: false,                  activeColor: Colors.green,                  checkColor: Colors.white,                  selected: _value,                  value: _value,                  onChanged: (bool value) {                    setState(() {                      _value = value;                    });                  },                ), //CheckboxListTile              ), //Container            ), //Padding          ), //Center        ), //SizedBox      ), //Scaffold    ); //MaterialApp  }}
Output:
Explanation: In the body of this flutter app the hierarchy till the CheckBoxListTile is SizedBox > Center > Padding > Container > CheckBoxListTile. All the widget above the CheckBoxListTile is mainly to put it in the center of the screen. In the CheckBoxListTile widget or title, the property is holding Text(‘GeeksforGeeks’), and the subtitle is also a Text widget. On the extreme left, we have the checkbox and on the extreme right, we have a material design code icon. The active color in the widget is green and the check icon color is white. The control of the state of this widget is taken by the value property. And the green-colored border is painted by the BoxDecoration widget with a 20 px curve on the edges. The combined result of all these is a nice looking checkbox tile, it can be used in many applications like to-do list or scheduler app.
Example 2:
Dart
import 'package:flutter/material.dart'; // importing material design libraryvoid main() {  runApp(MaterialApp(         // runApp method    home: HomePage(),  )); //MaterialApp} // Creating a stateful widget to manage// the state of the appclass HomePage extends StatefulWidget {  @override  _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> {     // value set to false  bool _value = false;  bool _valu = false;      // App widget tree  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('GeeksforGeeks'),          backgroundColor: Colors.greenAccent[400],          leading: IconButton(            icon: Icon(Icons.menu),            tooltip: 'Menu',            onPressed: () {},          ), //IconButton        ), //AppBar        body: Center(          child: SizedBox(            width: 400,            height: 400,            child: Center(              child: Padding(                padding: const EdgeInsets.all(8.0),                child: Column(                  children: [                    Container(                      decoration: BoxDecoration(                        border: Border.all(color: Colors.greenAccent),                        borderRadius: BorderRadius.circular(20),                      ), //BoxDecoration                                             /** CheckboxListTile Widget **/                      child: CheckboxListTile(                        title: const Text('GeeksforGeeks'),                        subtitle:                            const Text('A computer science portal for geeks. '),                        secondary: CircleAvatar(                          backgroundImage: NetworkImage(                              "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage                          radius: 20,                        ),                        autofocus: false,                        activeColor: Colors.green,                        checkColor: Colors.white,                        selected: _value,                        dense: true,                        value: _value,                        onChanged: (bool value) {                          setState(() {                            _value = value;                          });                        },                      ), //CheckboxListTile                    ),                    SizedBox(                      height: 30,                    ),                    Container(                      decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(20),                        boxShadow: [                          BoxShadow(                            color: Colors.black,                            offset: const Offset(                              3.0,                              3.0,                            ), //Offset                            blurRadius: 10.0,                            spreadRadius: 2.0,                          ), //BoxShadow                          BoxShadow(                            color: Colors.white,                            offset: const Offset(0.0, 0.0),                            blurRadius: 0.0,                            spreadRadius: 0.0,                          ), //BoxShadow                        ],                      ), //BoxDecoration                                             /** CheckboxListTile Widget **/                      child: CheckboxListTile(                        title: const Text('GeeksforGeeks'),                        subtitle: const Text(                            'A computer science portal for geeks. Here you will find articles on all the technologies.'),                        secondary: CircleAvatar(                          backgroundImage: NetworkImage(                              "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage                          radius: 20,                        ),                        autofocus: false,                        isThreeLine: true,                        activeColor: Colors.green,                        checkColor: Colors.white,                        selected: _valu,                        value: _valu,                        onChanged: (bool value) {                          setState(() {                            _valu = value;                          });                        },                      ), //CheckboxListTile                    ),                  ],                ), //Container              ), //Padding            ), //Center          ),        ), //SizedBox      ),      debugShowCheckedModeBanner: false, //Scaffold    ); //MaterialApp  }}
Output:
Explanation: In this example displaying the use of CheckBoxTile widget we have modified the looks of the CheckBoxTile by employing its different parameters along with the BoxDecoration widget. By taking a look at the app we can notice an image has replaced that code icon. In both that CheckBoxTiles the secondary parameter is taking CircleAvatar widget as the object which is taking in NetworkImage. The size of the image is 20 px. In the first tile, the dense property is also set to true, which makes the tile bit small compared to the original size. Both tiles, separated by a SizedBox widget of height 30 px. In the second tile, the border parameter is removed from the BoxDecoration and the boxShadow has been added, which is giving a nice black shadow around the edges. In addition, the isThreeLine property is also set to true which some additional height to the tile, to accommodate more text in the subtitle parameter.
surinderdawra388
kashishsoda
simranarora5sos
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.