Flutter Checkbox Example

In this tutorial, we will explore various ways to implement a Checkbox in Flutter. A Checkbox is a type of widget that holds a boolean value. The two widgets that we will cover in this tutorial are:

• Checkbox
• CheckboxListTile
  

  If you are interested in Flutter video tutorials, check this playlist: Flutter Video Tutorials. Also, there is a large collection of code examples if you check Flutter tutorials page.

If you are interested in video tutorials, check out the Flutter Video Tutorials page.

Checkbox

In the code example below, we have used the Checkbox widget as a child of the Row widget. The reason for this is that the Checkbox widget cannot be a parent widget. If you want to display some identification of the field, such as text, you will need to place the Checkbox inside a Row and add the required identification, as shown in the example below:

child: Row(
  children: [
    Checkbox(
      value: _checkbox,
      onChanged: (value) {
        setState(() {
          _checkbox = true;
        });
      },
    ),
    Text('I am true now'),
  ],
),

As shown in the code snippet above, we have defined a boolean variable called _checkbox. Initially, its value is set to false. Once the user presses the Checkbox UI element in the app, it sets the state of the boolean to true. In this case, once the value of the checkbox is set to true, it cannot be changed back to false as the state has been set.

If your app requires the Checkbox to be flexible and toggle between “true” and “false”, you can set it up in a way that every time the checkbox is pressed, the value changes to the opposite value, as shown in the example below:

child: Row(
  children: [
    Checkbox(
      value: _checkbox,
      onChanged: (value) {
        setState(() {
          _checkbox = !_checkbox;
        });
      },
    ),
    Text('I am true now'),
  ],
),

Next, let’s discuss CheckboxListTile.

CheckboxListTile

The difference between the two widgets is that the CheckboxListTile has a property called “title”, which means you don’t need additional widgets to give your checkbox some sort of identification. In the example below, you will see how to implement the same Checkbox as before, but this time using a CheckboxListTile widget:

child: CheckboxListTile(
  controlAffinity: ListTileControlAffinity.leading,
  title: Text('I am true'),
  value: _checkbox,
  onChanged: (value) {
    setState(() {
      _checkbox = !_checkbox;
    });
  },
),

Perhaps you have noticed that this way of implementing a Checkbox requires less code. The CheckboxListTile has a property called “controlAffinity,” which by default is set to “ListTileControlAffinity.trailing,” meaning the checkbox will be on the right side of the title. In the example above, we used “ListTileControlAffinity.leading” to replicate the previous Checkbox. You can visualize and test both of these widgets using the code example below:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Create a Checkbox',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Create a Checkbox'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _checkbox = false;
  bool _checkboxListTile = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Create a Checkbox'),
      ),
      body: Center(
        child: Column(
          children: [
            Row(
              children: [
                Checkbox(
                  value: _checkbox,
                  onChanged: (value) {
                    setState(() {
                      _checkbox = !_checkbox;
                    });
                  },
                ),
                Text('I am true now'),
              ],
            ),
            CheckboxListTile(
              controlAffinity: ListTileControlAffinity.leading,
              title: Text('I am true now'),
              value: _checkboxListTile,
              onChanged: (value) {
                setState(() {
                  _checkboxListTile = !_checkboxListTile;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

If you run the above code example in your Android studio, you should get an app that looks like the one in the image below.

How do I change the color of a Checkbox?

n Flutter, you can change the color of a Checkbox by using the activeColor and checkColor properties of the Checkbox widget.

The activeColor property is used to change the color of the checkbox when it is checked, while the checkColor property is used to change the color of the checkmark inside the checkbox. Here’s an example of how to use these properties:

Checkbox(
  value: true,
  onChanged: (newValue) {
    // Do something
  },
  activeColor: Colors.blue, // Change the color of the checkbox when it is checked
  checkColor: Colors.white, // Change the color of the checkmark inside the checkbox
),

In the above example, the activeColor property is set to Colors.blue, which changes the color of the checkbox when it is checked to blue. Similarly, the checkColor property is set to Colors.white, which changes the color of the checkmark inside the checkbox to white.

You can replace the color values with any other color of your choice to change the color of the Checkbox.

Frequently Asked Questions

• How do I control the state of a Checkbox?
  You can control the state of a Checkbox by using the value parameter, which determines whether the Checkbox is checked or unchecked. You can also use the onChanged parameter to listen for changes to the Checkbox‘s state and update the value parameter accordingly.
• How do I add a label to a Checkbox in Flutter?
  You can add a label to a Checkbox using the Text widget and the Row widget. You can create a row that contains a Checkbox and a Text widget to display the label.
• How do I create a group of Checkboxes that are mutually exclusive?
  To create a group of Checkboxes that are mutually exclusive, you can use the Radio widget instead of the Checkbox widget. The Radio widget allows you to group together a set of options, and only one option can be selected at a time.
• How do I change the size of a Checkbox in Flutter?
  You can change the size of a Checkbox by using the materialTapTargetSize parameter, which determines the size of the Checkbox‘s tap target. You can also wrap the Checkbox widget in a Transform.scale widget to scale the Checkbox to a specific size.
• How do I customize the appearance of a Checkbox in Flutter?
  You can customize the appearance of a Checkbox using the decoration parameter, which allows you to set the Checkbox‘s border and background. You can also use the checkColor parameter to change the color of the check mark inside the Checkbox.

I hope this Flutter tutorial is helpful to you. If you are interested in learning Flutter, please check other Flutter tutorials on this site. Some of them have video tutorials included.

Happy learning!