Create Multiple Checkbox Dynamically using Array Map Items in Flutter

There are two ways to create a widget in Flutter, first one is using Static data and other is Using dynamic content. We are using MAP data type in current tutorial to create multiple checkbox. Map is collection of data in Key – Value pairs. The data from Map can be easily accessible via its associated key. We would create a Map array with String and Boolean data. String is the name of Checkbox and Boolean is used to determine which checkbox is checked or not. So in this tutorial we would Create Multiple Checkbox Dynamically using Array Map Items in Flutter Android iOS mobile app.

Contents in this project Create Multiple Checkbox Dynamically using Array Map Items in Flutter Android iOS Example:

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

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

3. Create our main MyApp class extends with State less widget. Call our CheckboxWidget() class object in MyApp class.

4. Create a class named as CheckboxWidget extends with StatefulWidget. We would call createState() state build method here and pass our CheckboxWidgetState class.

5. Create our main widget class named as CheckboxWidgetState extends with State. We would create Checkbox in this class using MAP array data.

6. Create a Map array with String and Boolean data type named as numbers. String value is our Checkbox title text and Boolean value is used to determine which checkbox is checked and which is not.

7. Create a String array named as holder_1. We would use this array to hold Checkbox selected values.

8. Create a function named as getItems(). In this function we would check which item is true then only save the True items in holder_1 array. In this function we would use Print method of Dart to print selected items on Terminal – Command Prompt screen.

9. Create 1 Raised Button and 1 Checkbox widget using ListView component.

  • numbers.keys.map((String key)) : Used to print array items in checkbox. Here we would print Checkbox one by one using map method.

10. Complete source code for main.dart file:

Screenshots:

Create Multiple Checkbox Dynamically using Array Map Items in Flutter

Leave a Reply

Your email address will not be published.