How to Add Checkbox in Flutter

A checkbox is an important component to get input from the user. In flutter, a checkbox can be implemented using the Checkbox widget.

Even though Checkbox widget doesn’t have it’s own state, the widget calls the onChanged callback. The checkbox can be added as given below.

Checkbox(value: checkBoxValue,
          activeColor: Colors.green,
          onChanged:(bool newValue){
        setState(() {
          checkBoxValue = newValue;
        });}),

The complete example of checkbox in flutter is given below.

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Checkbox Example',
      home: CheckboxExample(),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  CheckboxExample({Key key}) : super(key: key);
  
  @override
  _CheckboxExampleState createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  var checkBoxValue = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    body:Container(
       child: Center(child: Checkbox(value: checkBoxValue,
          activeColor: Colors.green,
          onChanged:(bool newValue){
        setState(() {
          checkBoxValue = newValue;
        });}),
    ),),);
  }
}

The output of the flutter checkbox example is as given below.

In case, if you want a checkbox with label then you can use CheckboxListTile widget. You can use it as given below.

CheckboxListTile(
          title: const Text('This is the checkbox with label'),
          value: checkBoxValue,
          activeColor: Colors.green,
          onChanged:(bool newValue){
          setState(() {
          checkBoxValue = newValue;
        });})

Following is the complete example of checkbox with label in flutter.

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Checkbox Example',
      home: CheckboxExample(),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  CheckboxExample({Key key}) : super(key: key);
  
  @override
  _CheckboxExampleState createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  var checkBoxValue = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    body:Container(
       child: Center(child: CheckboxListTile(
          title: const Text('This is the checkbox with label'),
          value: checkBoxValue,
          activeColor: Colors.green,
          onChanged:(bool newValue){
          setState(() {
          checkBoxValue = newValue;
        });}),
    ),),);
  }
}

Following is the output of the flutter example.

I hope this flutter tutorial will help you. Stay tuned for more flutter tutorials.

1 thought on “How to Add Checkbox in Flutter”

  1. Pingback: How to Add Radio Button in Flutter – Flutter For You

Leave a Comment

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