Flutter Change Checkbox Checked Icon Color Android iOS Example

All Checkbox widgets has same mark icon present inside them which is a right tick mark icon. In flutter the Checkbox widget has a property named as checkColor which is used to Flutter Change Checkbox Checked Icon Color in Android iOS apps. The default color property is White color. checkColor can support all the type of color formats like ARGB, RGB, Hex color code and Color constants. If you don’t know how to use all the other color formats in flutter then read our this tutorial.

Contents in this project Flutter Change Checkbox Checked Icon Color in 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 MyApp class.

3. Create our main Root parent class named as MyApp extends with State less widget. In this class we would call CustomCheckbox() class as child of Center widget.

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

5. Create a class named as CheckboxWidget extends with State. This is our main Child Checkbox widget class.

6. Create a Boolean variable named as isChecked with default True value. We would use this variable to manage checkbox checked and un-checked events.

7. Create a variable named as checkedResult with some text. We would use this variable in Text widget to manage checkbox checked and unchecked text.

8. Create a function named as toggleCheckbox(). Inside this function we would Toggle the Boolean variable value using Toggle functionality.

9. Create one Checkbox widget and one Text widget in Widget build area.

  • checkColor : Used to change the Checkbox checked mark icon color.

10. Complete source code for main.dart file:

Screenshots:

Flutter Change Checkbox Checked Icon Color Android iOS Example

Leave a Reply

Your email address will not be published.