How To Add A Check Box In Flutter? Simply Flutter In 2023

- Advertisement -

This tutorial gives an in-depth explanation of how to add a check box in flutter.

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

In this example, we’ll demonstrate how to add a checkbox in Flutter and make it switchable when the user clicks the label on the box. For any form, checkboxes are crucial elements. Here’s an illustration:

Checkbox Addition in Flutter

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

Only a checkbox with an unchecked status is available here. 

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?"),
)

You will see a checkbox with a label here, but the checkbox’s status won’t change unless you click on it. Not clickable is the label. 

How to Set the Left Checkbox on the CheckboxListTile

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?"),
)

You will see a checkbox with a label that you can click here. 

Checking whether a checkbox is selected:

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
}

Code to add a Check Box in Flutter

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?"),
                  ),

            ],)
          )
       );
  }
}
Check Box in Flutter
Check Box in Flutter

This will enable you to add a checkbox to the Flutter application.

People, who read this article also read: Flutter Liquid Swipe Animation

Conclusion

You’ve learned the basics of how to add a check box in Flutter.

Now, Iā€™d like to hear from you: Do you know how to add a checkbox in flutter? Did you think it would be this easy? 

Either way, let me know by leaving a quick comment below.

Check the following video for visual insight!

- Advertisement -

Help Us!!!

We are expert developer providing free content to help the flutter learner. We need your support. Your little support inspire us šŸ¤—

Sarhan Bakshi
Sarhan Bakshi
I am a Writer, Designer, and Artist who is professional in all sectors. I am someone who can prove his worth and is witty and smart enough to handle any situation. I have photography skills and quick-to-act leadership abilities. I am young and sporty. Moreover, I have great social skills and can hold a conversation with people of more than one language. I am well adept in English, Bengali, and Hindi languages.

Related blog posts