How to create a Checkbox in flutter Example 2022

Basics, Flutter Crash Course, Flutter UI / UX, Flutter Widgets, UI UX

In this tutorial, we are going to learn two ways to create and design a checkbox in a flutter. We will also learn how to create a custom checkbox in a flutter with an example. We will first design the checkbox widget in a flutter as a checkbox() and then we will create a CheckboxListView in a flutter as a CheckboxListTile().

Flutter Checkbox doesn’t allow the use of text as a title or label so for that we either have to create a CheckboxListTile or create our own Custom Checkbox which you can create from the code below.

By Creating a CheckboxListTile we have to make a checkbox on the right side so, that we have an option as discussed in the video.

Variables

bool? _checkBox = false;
bool? _listTileCheckBox = false;

Types of Checkboxes

// 1.   CheckBox
              Checkbox(
                value: _checkBox,
                checkColor: Colors.white,
                activeColor: Colors.deepPurple,
                tristate: true,
                onChanged: (val) {
                  setState(() {
                    _checkBox = val;
                  });
                },
              ),

//2.   CheckBoxListTile
              CheckboxListTile(
                value: _listTileCheckBox,
                checkColor: Colors.white,
                activeColor: Colors.deepPurple,
                tristate: true,
                title: Text("Top Product"),
                onChanged: (val) {
                  setState(() {
                    _listTileCheckBox = val;
                  });
                },
                controlAffinity: ListTileControlAffinity.leading, //Leading Checkbox Icon
              ),
f

Custom Checkbox in Flutter

To create a custom checkbox in flutter we will use multiple Widgets and also we will create our own custom widget that will return us the Checkbox.

Custom Checkbox Call

//Custom CheckBox WIdget created with love COdingwithTEA
//Call it from your design screen
MyCheckBox(listTileCheckBox: _listTileCheckBox,),

Custom Checkboxe using Row and Stateful Class

class MyCheckBox extends StatefulWidget {
  MyCheckBox({Key? key, required this.listTileCheckBox}) : super(key: key);
  bool? listTileCheckBox; //To access this variable we use widget. in state class below

  @override
  State<MyCheckBox> createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBox> {
  @override
  Widget build(BuildContext context) {
    return Align(
      //Use Align so that our Container does not get all width as it happens in ListView
      alignment: Alignment.centerLeft,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.deepPurple.shade50,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Checkbox(
              checkColor: Colors.white,
              activeColor: Colors.deepPurple,
              tristate: true,
              value: widget.listTileCheckBox,
              onChanged: (val) {
                setState(() => widget.listTileCheckBox = val);
              },
            ),
            const Padding(
              padding: EdgeInsets.only(right: 15.0),
              child: Text("Top Product"),
            ),
          ],
        ),
      ),
    );
  }
}

Let's Connect

Videos are always a better source for in-depth knowledge. So, connect with me at YouTube.

Download Project

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Latest Courses

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorials

Flutter Profile page UI Design - Flutter app design 2023 - Profile Screen Flutter UI - Flutter 2023
Flutter Firebase phone authentication - Firebase Phone auth tutorial in flutter - Flutter Firebase phone number authentication 2022
Firebase Authentication in flutter - Flutter firebase authentication 2022 - firebase auth tutorial 2022 - firebase flutter auth
How to setup firebase in flutter 2022 - Flutter firebase setup
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!