CheckBox Widget is one of the most popular component in mobile app area. CheckBox Widget is used to get specific input from app user on Check box checked and un-checked event. Checkbox returns value in Boolean true false form. If checkbox is checked then it will return us true and if checkbox is unchecked it will return us result in false form. Checkbox widget has a property onChanged which calls every time user check or unchecked a checkbox. So in this tutorial we would Create CheckBox Widget in Flutter Android iOS Example Tutorial.
Contents in this project Create CheckBox Widget in Flutter Android iOS Example Tutorial:
1. Import material.dart file in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with StatelessWidget. This is our main View class. We would call CheckboxWidget() function object here to create Checkbox view. We would create CheckboxWidget class in next step.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: CheckboxWidget() ), ) )); } } |
4. Create a new class named as CheckboxWidget extends with StatefulWidget. The createState() method will create mutable state in given class location tree.
|
1 2 3 4 |
class CheckboxWidget extends StatefulWidget { @override CheckboxWidgetClass createState() => new CheckboxWidgetClass(); } |
5. Create a class named as CheckboxWidgetClass. This is our class where we would create CheckBox widget.
|
1 2 3 4 |
class CheckboxWidgetClass extends State { } |
6. Create 1 Boolean variable named as isChecked and a normal variable as resultHolder in CheckboxWidgetClass.
- isChecked : Default value of Checkbox. If false then checkbox will be unchecked and if true then checkbox will be checked.
- resultHolder : Holds a result string.
|
1 2 3 |
bool isChecked = false; var resultHolder = 'Checkbox is UN-CHECKED'; |
7. Create a function named as toggleCheckbox() with Boolean argument. We would call this function on onChange event of Checkbox.
|
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; resultHolder = 'Checkbox is CHECKED'; }); } else { // Put your code here which you want to execute on CheckBox Un-Checked event. setState(() { isChecked = false; resultHolder = 'Checkbox is UN-CHECKED'; }); } } |
8. Create Checkbox widget in Widget build area in CheckboxWidgetClass. We would also wrap Checkbox widget in Transform.scale() widget to make it bigger on screen.
- value : Decides whether checkbox is checked or not using bool value.
- onChanged : Calls every time when checkbox is checked our unchecked.
- activeColor : Background color of checkbox after checked.
- checkColor : Checkbox check icon color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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.pink, checkColor: Colors.white, tristate: false, ), ), Text('$resultHolder', style: TextStyle(fontSize: 22),) ]); } |
9. 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 71 72 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: CheckboxWidget() ), ) )); } } class CheckboxWidget extends StatefulWidget { @override CheckboxWidgetClass createState() => new CheckboxWidgetClass(); } class CheckboxWidgetClass extends State { bool isChecked = false; var resultHolder = 'Checkbox is UN-CHECKED'; void toggleCheckbox(bool value) { if(isChecked == false) { // Put your code here which you want to execute on CheckBox Checked event. setState(() { isChecked = true; resultHolder = 'Checkbox is CHECKED'; }); } else { // Put your code here which you want to execute on CheckBox Un-Checked event. setState(() { isChecked = false; resultHolder = '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.pink, checkColor: Colors.white, tristate: false, ), ), Text('$resultHolder', style: TextStyle(fontSize: 22),) ]); } } |
Screenshots:
Thanks for great help!
One question: Can I have my app save my checkbox choices until next time I use my app?
Yes you can Christian .