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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main View MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends StatelessWidget. In this class we would call our CustomCheckbox() class.
|
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 and pass the next class name along with it.
|
1 2 3 4 |
class CustomCheckbox extends StatefulWidget { @override CheckboxState createState() => new CheckboxState(); } |
5. Create a class named as CheckboxState extends State. This is our child class in which we would create the Checkbox widget.
|
1 2 3 4 |
class CheckboxState extends State<CustomCheckbox> { } |
6. Create a Boolean variable named as checked with default true value. This would by-defaults checked the Checkbox.
|
1 |
bool checked = true; |
7. Create a variable named as result with some default text.
|
1 |
var result = 'Checkbox is CHECKED'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
void getCheckBoxValue(bool value) { if(checked == false) { // Put your code here which you want to execute on CheckBox Checked. setState(() { checked = true; result = 'Checkbox is CHECKED'; }); } else { // Put your code here which you want to execute on CheckBox Un-Checked. setState(() { checked = false; result = 'Checkbox is UN-CHECKED'; }); } } |
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.
|
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: checked, onChanged: (value){getCheckBoxValue(value);}, activeColor: Colors.lightBlue, checkColor: Colors.white, tristate: false, ), ), Text('$result', style: TextStyle(fontSize: 22), 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 CheckboxState createState() => new CheckboxState(); } class CheckboxState extends State<CustomCheckbox> { bool checked = true; var result = 'Checkbox is CHECKED'; void getCheckBoxValue(bool value) { if(checked == false) { // Put your code here which you want to execute on CheckBox Checked. setState(() { checked = true; result = 'Checkbox is CHECKED'; }); } else { // Put your code here which you want to execute on CheckBox Un-Checked. setState(() { checked = false; result = 'Checkbox is UN-CHECKED'; }); } } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Transform.scale( scale: 1.5, child: Checkbox( value: checked, onChanged: (value){getCheckBoxValue(value);}, activeColor: Colors.lightBlue, checkColor: Colors.white, tristate: false, ), ), Text('$result', style: TextStyle(fontSize: 22), textAlign: TextAlign.center,) ]); } } |
Screenshots:
onPressed: (v) {
setState(() {
checked = v;
});
}
That’s all you need. Not that massive function.