Flutter Change Checkbox Background Color Android iOS Example Tutorial

Checkbox background color is the filled background color which shows when checkbox is checked. The background color will be only visible to mobile screen on checkbox selection. In flutter the Checkbox widget has a property named as activeColor which supports all type of color formats. So in this tutorial we would learn about Flutter Change Checkbox Background Color Android iOS Example Tutorial.

Contents in this project Flutter Change Checkbox Background Color Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main View MyApp class.

3. Create our main class named as MyApp extends StatelessWidget. In this class we would call our CustomCheckbox() class.

4. Create a class named as CustomCheckbox extends StatefulWidget. In this class we would make createState() method and pass the next class name along with it.

5. Create a class named as CheckboxState extends State. This is our child class in which we would create the Checkbox widget.

6. Create a Boolean variable named as checked with default true value. This would by-defaults checked the Checkbox.

7. Create a variable named as result with some default text.

8. Create a function named as getCheckBoxValue() with Boolean type argument. We would use this function to Toggle the Checkbox checked and un-checked event.

9. Creating Widget Build area -> Column widget -> Checkbox Widget with Text widget.

  • value : To manage checkbox is checked or not using Boolean value.
  • onChanged : Calls every time when checkbox is mark or un-mark.
  • activeColor : Checkbox background color.
  • checkColor : Checkbox checked icon color.
  • tristate : Checkbox displays a Dash when its value is null.

10. Complete source code for main.dart file:

Screenshots:

Flutter Change Checkbox Background Color Android iOS Example Tutorial

One Comment

  1. onPressed: (v) {
    setState(() {
    checked = v;
    });
    }

    That’s all you need. Not that massive function.

Leave a Reply

Your email address will not be published.