Get Multiple Checkbox Checked Value in Flutter Android iOS Example

Checkbox component is used to get multiple choice answers from application user. By default checkbox returns us its selection in true false Boolean from. Like selected checkbox returns us True and unchecked checkbox returns us False. Sometimes app developer need to access the Checkbox value in string form rather than Boolean form. So using the dynamic Key – Pair value Map array we can give checkbox name and value. So in this tutorial we would Create app with multiple checkbox and Get Multiple Checkbox Checked Value in Flutter Android iOS App Example.

Contents in this project Get Multiple Checkbox Checked Value in Flutter Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and call our main MyApp class init.

3. Create our main class named as MyApp extends StatelessWidget class. This is our base widget layout class. We would call CheckboxWidget() class here directly to create Checkbox widget view.

4. Create CheckboxWidget() class extends StatefulWidget. We would call here createState() method to enable mutable state management in given class location tree.

5. Create class named as CheckboxWidgetState extends with State. This is our class where we would create and manager checkbox.

6. Create a Map array with String and Boolean values named as values in CheckboxWidgetState class. Map in flutter is used to create data in key-value pairs. Our checkbox will be created using this particular map data.

7. Create a empty array named as tmpArray in CheckboxWidgetState class. We would use this array to hold the selected checkbox data.

8. Create a function named as getCheckboxItems() in CheckboxWidgetState class. Inside this function we would first check the selected item true value using IF condition and enter only True items in tmpArray. We would also empty the array after use to next time when user selects item it will no get same data. We would printing the selected data on Command Prompt or Terminal screen using Print method.

9. Create Widget build area in CheckboxWidgetState class. We would here create 1 Raised button widget and 1 ListView widget and put the Checkbox under ListView component. We are using Array.keys.map method to print Checkbox on screen.

10. Complete source code for main.dart file:

Screenshots:

Get Multiple Checkbox Checked Value in Flutter Android iOS Example

2 Comments

  1. Thank you bro

Leave a Reply

Your email address will not be published. Required fields are marked *