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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: CustomCheckbox() ), )); } } |
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.
|
1 2 3 4 |
class CustomCheckbox extends StatefulWidget { @override CheckboxWidget createState() => new CheckboxWidget(); } |
5. Create a class named as CheckboxWidget extends with State. This is our main Child Checkbox widget class.
|
1 2 3 4 |
class CheckboxWidget extends State { } |
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.
|
1 |
bool isChecked = true; |
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.
|
1 |
var checkedResult = 'Checkbox is CHECKED'; |
8. Create a function named as toggleCheckbox(). Inside this function we would Toggle the Boolean variable value using Toggle functionality.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
void toggleCheckbox(bool value) { if(isChecked == false) { // Put your code here which you want to execute on CheckBox Checked event. setState(() { isChecked = true; checkedResult = 'Checkbox is CHECKED'; }); } else { // Put your code here which you want to execute on CheckBox Un-Checked event. setState(() { isChecked = false; checkedResult = 'Checkbox is UN-CHECKED'; }); } } |
9. Create one Checkbox widget and one Text widget in Widget build area.
- checkColor : Used to change the Checkbox checked mark icon color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Transform.scale( scale: 1.5, child: Checkbox( value: isChecked, onChanged: (value){toggleCheckbox(value);}, activeColor: Colors.green, checkColor: Colors.white, tristate: false, ), ), Text('$checkedResult', style: TextStyle(fontSize: 21), textAlign: TextAlign.center,) ]); } |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: CustomCheckbox() ), )); } } class CustomCheckbox extends StatefulWidget { @override CheckboxWidget createState() => new CheckboxWidget(); } class CheckboxWidget extends State { bool isChecked = true; var checkedResult = 'Checkbox is CHECKED'; void toggleCheckbox(bool value) { if(isChecked == false) { // Put your code here which you want to execute on CheckBox Checked event. setState(() { isChecked = true; checkedResult = 'Checkbox is CHECKED'; }); } else { // Put your code here which you want to execute on CheckBox Un-Checked event. setState(() { isChecked = false; checkedResult = 'Checkbox is UN-CHECKED'; }); } } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Transform.scale( scale: 1.5, child: Checkbox( value: isChecked, onChanged: (value){toggleCheckbox(value);}, activeColor: Colors.green, checkColor: Colors.white, tristate: false, ), ), Text('$checkedResult', style: TextStyle(fontSize: 21), textAlign: TextAlign.center,) ]); } } |
Screenshots:
