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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. Call our CheckboxWidget() class object in MyApp class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Flutter Create Checkbox Dynamically"), ), body: SafeArea( child : Center( child:CheckboxWidget(), ) ) ), ); } } |
4. Create a class named as CheckboxWidget extends with StatefulWidget. We would call createState() state build method here and pass our CheckboxWidgetState class.
|
1 2 3 4 |
class CheckboxWidget extends StatefulWidget { @override CheckboxWidgetState createState() => new CheckboxWidgetState(); } |
5. Create our main widget class named as CheckboxWidgetState extends with State. We would create Checkbox in this class using MAP array data.
|
1 2 3 4 |
class CheckboxWidgetState extends State { } |
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.
|
1 2 3 4 5 6 7 8 9 |
Map<String, bool> numbers = { 'One' : false, 'Two' : false, 'Three' : false, 'Four' : false, 'Five' : false, 'Six' : false, 'Seven' : false, }; |
7. Create a String array named as holder_1. We would use this array to hold Checkbox selected values.
|
1 |
var holder_1 = []; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
getItems(){ numbers.forEach((key, value) { if(value == true) { holder_1.add(key); } }); // Printing all selected items on Terminal screen. print(holder_1); // Here you will get all your selected Checkbox items. // Clear array after use. holder_1.clear(); } |
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.
|
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 |
Widget build(BuildContext context) { return Column (children: <Widget>[ RaisedButton( child: Text(" Get Checked Checkbox Items ", style: TextStyle(fontSize: 20),), onPressed: getItems, color: Colors.green, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), Expanded( child : ListView( children: numbers.keys.map((String key) { return new CheckboxListTile( title: new Text(key), value: numbers[key], activeColor: Colors.pink, checkColor: Colors.white, onChanged: (bool value) { setState(() { numbers[key] = value; }); }, ); }).toList(), ), ),]); } |
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Flutter Create Checkbox Dynamically"), ), body: SafeArea( child : Center( child:CheckboxWidget(), ) ) ), ); } } class CheckboxWidget extends StatefulWidget { @override CheckboxWidgetState createState() => new CheckboxWidgetState(); } class CheckboxWidgetState extends State { Map<String, bool> numbers = { 'One' : false, 'Two' : false, 'Three' : false, 'Four' : false, 'Five' : false, 'Six' : false, 'Seven' : false, }; var holder_1 = []; getItems(){ numbers.forEach((key, value) { if(value == true) { holder_1.add(key); } }); // Printing all selected items on Terminal screen. print(holder_1); // Here you will get all your selected Checkbox items. // Clear array after use. holder_1.clear(); } @override Widget build(BuildContext context) { return Column (children: <Widget>[ RaisedButton( child: Text(" Get Checked Checkbox Items ", style: TextStyle(fontSize: 20),), onPressed: getItems, color: Colors.green, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), Expanded( child : ListView( children: numbers.keys.map((String key) { return new CheckboxListTile( title: new Text(key), value: numbers[key], activeColor: Colors.pink, checkColor: Colors.white, onChanged: (bool value) { setState(() { numbers[key] = value; }); }, ); }).toList(), ), ),]); } } |
Screenshots:
