{"id":1451,"date":"2023-12-04T05:25:54","date_gmt":"2023-12-04T05:25:54","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=1451"},"modified":"2024-01-03T05:29:30","modified_gmt":"2024-01-03T05:29:30","slug":"building-elegant-multiple-select-dropdown-lists-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/building-elegant-multiple-select-dropdown-lists-in-flutter\/","title":{"rendered":"Building Elegant Multiple Select Dropdown Lists in Flutter"},"content":{"rendered":"\n

Selecting multiple options from a dropdown list is a common requirement in Flutter app development. While plugins like flutter_custom_selector<\/code> can simplify the process, let’s explore how to create a beautiful multiple select dropdown list without relying on external plugins. In your Flutter project, you might need a dropdown list that allows users to select multiple languages. Let’s enhance your existing code and provide a more elegant solution.<\/p>\n\n\n\n

import 'package:flutter\/material.dart';\r\n\r\nclass MultipleSelectDropdown extends StatefulWidget {\r\n  const MultipleSelectDropdown({Key? key}) : super(key: key);\r\n\r\n  @override\r\n  State<MultipleSelectDropdown> createState() => _MultipleSelectDropdownState();\r\n}\r\n\r\nclass _MultipleSelectDropdownState extends State<MultipleSelectDropdown> {\r\n  List<String> availableLanguages = [\r\n    \"Chinese\",\r\n    \"Spanish\",\r\n    \"Hindi\",\r\n    \"Arabic\",\r\n    \"Bengali\",\r\n    \"Portuguese\",\r\n    \"Russian\",\r\n    \"Japanese\",\r\n    \"Indonesian\",\r\n    \"Sinhala\",\r\n    \"Tamil\",\r\n    \"Mandarin\",\r\n    \"Thai\",\r\n  ];\r\n\r\n  List<String> selectedLanguages = [];\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    double width = MediaQuery.of(context).size.width;\r\n    return Container(\r\n      width: width * 0.8,\r\n      child: Column(\r\n        crossAxisAlignment: CrossAxisAlignment.start,\r\n        children: [\r\n          Text(\r\n            'Select Your Languages',\r\n            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),\r\n          ),\r\n          SizedBox(height: 10),\r\n          Container(\r\n            padding: EdgeInsets.all(10),\r\n            decoration: BoxDecoration(\r\n              border: Border.all(color: Colors.grey),\r\n              borderRadius: BorderRadius.circular(8),\r\n            ),\r\n            child: DropdownButtonHideUnderline(\r\n              child: DropdownButton<String>(\r\n                isExpanded: true,\r\n                value: selectedLanguages.isEmpty\r\n                    ? null\r\n                    : selectedLanguages.join(', '),\r\n                hint: Text('Choose Languages'),\r\n                items: availableLanguages.map((String language) {\r\n                  return DropdownMenuItem<String>(\r\n                    value: language,\r\n                    child: Text(language),\r\n                  );\r\n                }).toList(),\r\n                onChanged: (String? value) {\r\n                  setState(() {\r\n                    if (value != null) {\r\n                      if (selectedLanguages.contains(value)) {\r\n                        selectedLanguages.remove(value);\r\n                      } else {\r\n                        selectedLanguages.add(value);\r\n                      }\r\n                    }\r\n                  });\r\n                },\r\n              ),\r\n            ),\r\n          ),\r\n          SizedBox(height: 10),\r\n          Text(\r\n            'Selected Languages: ${selectedLanguages.join(', ')}',\r\n            style: TextStyle(fontSize: 16),\r\n          ),\r\n        ],\r\n      ),\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n
Dropdown UI Enhancement:<\/strong><\/p>\n\n\n\n
We’ve wrapped the dropdown in a container for a cleaner look.<\/p>\n\n\n\n
Added styling to the dropdown container for better aesthetics.<\/p>\n\n\n\n
Multi-Select Functionality:<\/strong><\/p>\n\n\n\n
Modified the dropdown to allow multiple selections.<\/p>\n\n\n\n
Display selected languages dynamically below the dropdown.<\/p>\n\n\n\n
Improved User Experience:<\/strong><\/p>\n\n\n\n
Included a hint in the dropdown for better user guidance.<\/p>\n\n\n\n
Removed the unnecessary Padding<\/code> and Column<\/code> in the original code.<\/p>\n","protected":false},"excerpt":{"rendered":"
Selecting multiple options from a dropdown list is a common requirement in Flutter app development. While plugins like flutter_custom_selector can simplify the process, let’s explore how to… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[791,819,805,815,813,818,787,807,814,809,810,812,802,817,793,790,816,820,808,811],"class_list":["post-1451","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-dart-programming","tag-dart-ui","tag-flutter-best-practices","tag-flutter-code-enhancement","tag-flutter-customization","tag-flutter-design-patterns","tag-flutter-development","tag-flutter-dropdown","tag-flutter-dropdownbutton","tag-flutter-form","tag-flutter-state-management","tag-flutter-styling","tag-flutter-ui","tag-flutter-user-experience","tag-flutter-widgets","tag-mobile-app-development","tag-mobile-app-ui","tag-mobile-app-ui-ux","tag-multiple-select","tag-user-interface-design"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=1451"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1451\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1451\/revisions\/1452"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=1451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=1451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=1451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}