How to Add Checkbox in Flutter

In this example, we are going to show you how to add a checkbox, a checkbox with the label, and make it switchable when clicking on the label in Flutter. Checkboxes are important components for any kind of form. See the example below:

bool? check1 = false; //true for checked checkbox, false for unchecked one

Checkbox( //only check box
  value: check1, //unchecked
  onChanged: (bool? value){
      //value returned when checkbox is clicked
      setState(() {
          check1 = value;
      });
  }
)

Here, you will get only a checkbox with unchecked status.

See this also: How to Add Radio Button in Flutter

bool? check2 = true,;

CheckboxListTile( //checkbox positioned at right
  value: check2,
  onChanged: (bool? value) {  
      setState(() {
          check2 = value;
      });
  },
  title: Text("Do you really want to learn Flutter?"),
)

Here, you will have a checkbox with the label, but the status of the checkbox will only change when clicked on it. The label is non-clickable.

bool? check3 = false;

CheckboxListTile(
  value: check3,
  controlAffinity: ListTileControlAffinity.leading, //checkbox at left
  onChanged: (bool? value) {  
      setState(() {
          check3 = value;
      });
  },
  title: Text("Do you really want to learn Flutter?"),
)

Here, you will have a checkbox with a clickable label.

bool? check1 = false;

Checkbox(
  value: check1, //set variable for value
  onChanged: (bool? value){
      setState(() {
          check1 = value;
      });
  }
)

if(check1!){
   //checkbox is checked
}else{
   //checkbox is not checked
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  bool? check1 = false, check2 = true, check3 = false;
  //true for checked checkbox, flase for unchecked one
  
  @override
  Widget build(BuildContext context) { 


    return  Scaffold(
          appBar: AppBar(
            title: Text("Checkbox in Flutter"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [  
                  Checkbox( //only check box
                    value: check1, //unchecked
                    onChanged: (bool? value){
                        //value returned when checkbox is clicked
                        setState(() {
                            check1 = value;
                        });
                    }
                  ),

                  CheckboxListTile( //checkbox positioned at right
                    value: check2,
                    onChanged: (bool? value) {  
                        setState(() {
                            check2 = value;
                        });
                    },
                    title: Text("Do you really want to learn Flutter?"),
                  ),

                  CheckboxListTile( //checkbox positioned at left
                    value: check3,
                    controlAffinity: ListTileControlAffinity.leading,
                    onChanged: (bool? value) {  
                        setState(() {
                           check3 = value;
                        });
                    },
                    title: Text("Do you really want to learn Flutter?"),
                  ),

            ],)
          )
       );
  }
}