Checkbox Example In Flutter

In this tutorial, we will go through a couple of different ways of implementing a Checkbox in Flutter. A Checkbox is a type of widget that holds a boolean value. The two widgets we will use in this tutorial are:

  • Checkbox, and
  • CheckboxListTile

If you are interested in Flutter video tutorials then there is an entire playlist here: Flutter Video Tutorials.

Checkbox

In the code example below, the Checkbox widget is used as a child of the Row widget. The reason for that is because Checkbox widget can not be a parent widget. Meaning that if you want to display some identification of the field, like the text, you will need to place the Checkbox inside a Row and add the identification required like in the example below:

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

As you can see in the code snippet example above,  we have a boolean called _checkbox. Initially, the value of  _checkbox variable is set to false. Once a 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 you can not change it back to false, as the state has been set. If your app needs 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, like in the example below:

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

Next, we will talk about CheckboxListTile.

CheckboxListTile

The difference between the two widgets is that the CheckboxListTile has the property “title” and 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 from before, but this time in a CheckboxListTile widget:

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

Perhaps you noticed that this way of implementing a checkbox requires less code. The CheckboxListTile has a property “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” in order 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(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Create a Checkbox',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Create a Checkbox'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, 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: 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.

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!


Leave a Reply

Your email address will not be published. Required fields are marked *