Create CheckBox Widget in Flutter Android iOS Example Tutorial

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.

2. Call our main MyApp class using void main runApp() method.

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.

4. Create a new class named as CheckboxWidget extends with StatefulWidget. The createState() method will create mutable state in given class location tree.

5. Create a class named as CheckboxWidgetClass. This is our class where we would create CheckBox widget.

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.

7. Create a function named as toggleCheckbox() with Boolean argument. We would call this function on onChange event of Checkbox.

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.

9. Complete source code for main.dart file:

Screenshots:

Create CheckBox Widget in Flutter Android iOS Example Tutorial

2 Comments

  1. Thanks for great help!
    One question: Can I have my app save my checkbox choices until next time I use my app?

Leave a Reply

Your email address will not be published.