×
×

Spread the love

In flutter, CheckboxListTile is a ListTile with a Checkbox. We can also call it as a checkbox with a label. In this example tutorial, we will learn how to use a CheckboxListTile widget in flutter and its properties with examples.

Flutter CheckboxListTile

CheckboxListTile in flutter is nothing but a ListTile containing a checkbox by default. If we tap anywhere on the list tile it will toggle the state of the checkbox. Checkboxlisttile can be used as a child of listview. For example, If we want the users to choose a few or all options from a list of options we can use checkboxlisttile.

Most of the properties of the checkboxlisttile are similar to checkbox and listtile. So check those widgets for reference. If you want to select / unselect the tile when the checkbox is checked / unchecked provide the same value to value and selected properties which is boolean.

Constructor:

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
}) 

Flutter CheckboxListTile Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  bool _value = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green[400],
            title: Text("Flutter CheckboxListTile"),
          ),
          body:CheckboxListTile(
            value: _value,
            onChanged: (value) {
              setState(() {
                _value = value;
              });
            },
            title: Text("Checkbox"),
            contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
            ),
          ),
        )
    );
  }
}

Output:

flutter checkbox list tile

Flutter CheckboxListTile Properties

The different flutter CheckboxListTile properties are:

  • value(required)
  • onChanged(require)
  • activeColor
  • checkColor
  • tristate
  • title
  • subtitle
  • secondary
  • selected
  • controlAffinity
  • contentPadding

As the value, onChanged, activeColor, checkColor and tristate properties of this widget are identical to the similarly-named properties on the Checkbox widget i’m not discussing them in this post.

tristate

We can use tristate property in CheckboxListTile but we cannot use same value(true/false) to both the value and selected properties. When tristate property is true the value property will accept three values(true, false, null) but the selected property will only accept two values(true, false). Passing same value to both will result in error when the value is null.

title

We will use title property to set a text or label to the checkbox. To show the users what the checkbox indicates, we will use this property.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Checkbox"),
          contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
          ),
        ),

Output:

flutter checkbox list tile title

subtitle

We will use subtitle property to add or change subtitle to the checkbox title.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Title"),
          subtitle: Text("Subtitle"),
          contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
          ),
        ),

Output:

flutter checkbox listtile subtitle

secondary

The secondary property can be any widget, generally we will use an icon as secondary widget. We can use Text or any other widget instead.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Product"),
            subtitle: Text("Description"),
            secondary: Icon(Icons.ac_unit),
          contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
          ),
        ),

Output:

flutter checkbox listtile secondary

selected

We will use selected property to decide whether we want to render icon and text colors with the color of activeColor property. If there is no active color applied, it will use default color.

It takes a boolean value. If we set it to true it will render icon and text colors with the activecolor. If we set it to false there will be no change in text and icon colors. To make the ListTile appear selected when the checkbox is checked we have to pass same value(true or false) to the value and selected properties.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Product"),
            subtitle: Text("Description"),
            secondary: Icon(Icons.ac_unit),
            selected: _value,
          contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
          ),
        ),

Output:

When checkbox is checked

flutterr checkbox listtile selected when checkbox checked

When unchecked

flutter checkbox listtile selected unchecked

controlAffinity

We will use controlAffinity property to control the position of the checkbox relative to the text. It takes ListTileControlAffinity which has constants leading, trailing and platform.

ListTileControlAffinity.leading

Positions checkbox to left, text to center and secondary(generally an icon) to right.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Product"),
            subtitle: Text("Description"),
            secondary: Icon(Icons.ac_unit),
            selected: _value,
            controlAffinity: ListTileControlAffinity.leading,
          contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
          ),
        ),

Output:

flutter checkbox Listtile controlaffinit leading

ListTileControlAffinity.trailing

Positions checkbox to right, text to center and secondary to left.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Product"),
            subtitle: Text("Description"),
            secondary: Icon(Icons.ac_unit),
            selected: _value,
            controlAffinity: ListTileControlAffinity.trailing,
          contentPadding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10
          ),
        ),

Output:

flutter checbox Listtile controlaffinit trailing

contentPadding

We will use contentPadding property to provide padding to the list tile content.

body:CheckboxListTile(
          value: _value,
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          title: Text("Product"),
            subtitle: Text("Description"),
            secondary: Icon(Icons.ac_unit),
            selected: _value,
            controlAffinity: ListTileControlAffinity.trailing,
          contentPadding: EdgeInsets.symmetric(
              horizontal: 50,
              vertical: 20
          ),
        ),

Output:

flutter checkbox listtile contentpadding

Changing CheckboxListTile border color when unchecked

To change the border color of the checkbox inside CheckboxListTile when it is unchecked just wrap the CheckboxListTile widget inside a Theme widget as a child and set ThemeData‘ s unselectedWidgetColor property to your desired color.

body:Theme(
          data: ThemeData(
            unselectedWidgetColor: Colors.red
            ),
            child:CheckboxListTile(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
              title: Text("Product"),
              subtitle: Text("Description"),
              secondary: Icon(Icons.ac_unit),
              selected: _value,
              controlAffinity: ListTileControlAffinity.trailing,
              contentPadding: EdgeInsets.symmetric(
                horizontal: 20,
                vertical: 10
              ),
            ),
          )

Output:

flutter checkbox listtile bordercolor

That brings an end to flutter CheckboxListTile example tutorial. Let’s catch up with some other flutter tutorial soon. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.