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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class init.
|
1 |
void main() => runApp(MyApp()); |
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.
|
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 Multiple Checkbox Example"), ), body: SafeArea( child : Center( child:CheckboxWidget(), ) ) ), ); } } |
4. Create CheckboxWidget() class extends StatefulWidget. We would call here createState() method to enable mutable state management in given class location tree.
|
1 2 3 4 |
class CheckboxWidget extends StatefulWidget { @override CheckboxWidgetState createState() => new CheckboxWidgetState(); } |
5. Create class named as CheckboxWidgetState extends with State. This is our class where we would create and manager checkbox.
|
1 2 3 4 |
class CheckboxWidgetState extends State { } |
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.
|
1 2 3 4 5 6 7 |
Map<String, bool> values = { 'Apple': false, 'Banana': false, 'Cherry': false, 'Mango': false, 'Orange': false, }; |
7. Create a empty array named as tmpArray in CheckboxWidgetState class. We would use this array to hold the selected checkbox data.
|
1 |
var tmpArray = []; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
getCheckboxItems(){ values.forEach((key, value) { if(value == true) { tmpArray.add(key); } }); // Printing all selected items on Terminal screen. print(tmpArray); // Here you will get all your selected Checkbox items. // Clear array after use. tmpArray.clear(); } |
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.
|
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 Selected Checkbox Items ", style: TextStyle(fontSize: 18),), onPressed: getCheckboxItems, color: Colors.deepOrange, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), Expanded( child : ListView( children: values.keys.map((String key) { return new CheckboxListTile( title: new Text(key), value: values[key], activeColor: Colors.pink, checkColor: Colors.white, onChanged: (bool value) { setState(() { values[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 |
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 Multiple Checkbox Example"), ), body: SafeArea( child : Center( child:CheckboxWidget(), ) ) ), ); } } class CheckboxWidget extends StatefulWidget { @override CheckboxWidgetState createState() => new CheckboxWidgetState(); } class CheckboxWidgetState extends State { Map<String, bool> values = { 'Apple': false, 'Banana': false, 'Cherry': false, 'Mango': false, 'Orange': false, }; var tmpArray = []; getCheckboxItems(){ values.forEach((key, value) { if(value == true) { tmpArray.add(key); } }); // Printing all selected items on Terminal screen. print(tmpArray); // Here you will get all your selected Checkbox items. // Clear array after use. tmpArray.clear(); } @override Widget build(BuildContext context) { return Column (children: <Widget>[ RaisedButton( child: Text(" Get Selected Checkbox Items ", style: TextStyle(fontSize: 18),), onPressed: getCheckboxItems, color: Colors.deepOrange, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), Expanded( child : ListView( children: values.keys.map((String key) { return new CheckboxListTile( title: new Text(key), value: values[key], activeColor: Colors.pink, checkColor: Colors.white, onChanged: (bool value) { setState(() { values[key] = value; }); }, ); }).toList(), ), ),]); } } |
Screenshots:
Thank you bro
Welcome 🙂 .