Hello Guys How are you all? Hope You all are fine. In this tutorial, we are going to learn Multiple selections inside the dropdown menu in a flutter. let’s start this article without wasting your time.
Multiple selections inside the dropdown menu in Flutter
- Multiple selections inside the dropdown menu in Flutter
To make Here is all about creating Multiple selections inside the dropdown menu in Flutter. all you need to do is just have to add dropdown inside alert box dialogue.
- How to make Multiple selections inside the dropdown menu in Flutter
To make Here is all about creating Multiple selections inside the dropdown menu in Flutter. all you need to do is just have to add dropdown inside alert box dialogue.
Here is all about creating Multiple selections inside the dropdown menu in Flutter.
Complete Source Code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Dropdown - FlutterCorner.com",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class MultiSelectDialogItem<V> {
const MultiSelectDialogItem(this.value, this.label);
final V value;
final String label;
}
class MultiSelectDialog<V> extends StatefulWidget {
MultiSelectDialog({Key key, this.items, this.initialSelectedValues})
: super(key: key);
final List<MultiSelectDialogItem<V>> items;
final Set<V> initialSelectedValues;
@override
State<StatefulWidget> createState() => _MultiSelectDialogState<V>();
}
class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> {
final _selectedValues = Set<V>();
void initState() {
super.initState();
if (widget.initialSelectedValues != null) {
_selectedValues.addAll(widget.initialSelectedValues);
}
}
void _onItemCheckedChange(V itemValue, bool checked) {
setState(() {
if (checked) {
_selectedValues.add(itemValue);
} else {
_selectedValues.remove(itemValue);
}
});
}
void _onCancelTap() {
Navigator.pop(context);
}
void _onSubmitTap() {
Navigator.pop(context, _selectedValues);
}
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text('Select Equipment'),
contentPadding: EdgeInsets.only(top: 12.0),
content: SingleChildScrollView(
child: ListTileTheme(
contentPadding: EdgeInsets.fromLTRB(14.0, 0.0, 24.0, 0.0),
child: ListBody(
children: widget.items.map(_buildItem).toList(),
),
),
),
actions: <Widget>[
FlatButton(
child: Text('CANCEL'),
onPressed: _onCancelTap,
),
FlatButton(
child: Text('OK'),
onPressed: _onSubmitTap,
)
],
);
}
Widget _buildItem(MultiSelectDialogItem<V> item) {
final checked = _selectedValues.contains(item.value);
return CheckboxListTile(
value: checked,
title: Text(item.label),
controlAffinity: ListTileControlAffinity.leading,
onChanged: (checked) => _onItemCheckedChange(item.value, checked),
);
}
}
// ===================
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<MultiSelectDialogItem<int>> multiItem = List();
final valuestopopulate = {
1: "India",
2: "Britain",
3: "Russia",
4: "Canada",
};
void _showMultiSelect(BuildContext context) async {
multiItem = [];
for (int v in valuestopopulate.keys) {
multiItem.add(MultiSelectDialogItem(v, valuestopopulate[v]));
}
final items = multiItem;
final selectedValues = await showDialog<Set<int>>(
context: context,
builder: (BuildContext context) {
return MultiSelectDialog(
items: items,
initialSelectedValues: [1, 2].toSet(),
);
},
);
print(selectedValues);
getvaluefromkey(selectedValues);
}
void getvaluefromkey(Set selection) {
if (selection != null) {
for (int x in selection.toList()) {
print(valuestopopulate[x]);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Dropdown - FlutterCorner.com",
),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
child: Text("Open Multiselect"),
onPressed: () => _showMultiSelect(context),
),
],
),
),
);
}
}
Output
Summery
So, It’s All About This tutorial. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.
Leave a Reply