To display the complete name and code of a selected country in Flutter's dropdown menu, follow these steps:
Step 1: Create a list of countries and their codes
List<Map<String, dynamic>> countries = [
{"name": "Afghanistan", "code": "AF"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
// and so on...
];
Step 2: Create a stateful widget that will hold the selected country and its code
class CountryDropdown extends StatefulWidget {
@override
_CountryDropdownState createState() => _CountryDropdownState();
}
class _CountryDropdownState extends State<CountryDropdown> {
String selectedCountry = '';
String selectedCountryCode = '';
@override
Widget build(BuildContext context) {
return DropdownButton(
hint: Text('Select a country'),
value: selectedCountry,
onChanged: (value) {
setState(() {
selectedCountry = value;
for (var country in countries) {
if (country['name'] == selectedCountry) {
selectedCountryCode = country['code'];
}
}
});
},
items: countries.map((country) {
return DropdownMenuItem(
value: country['name'],
child: Text(country['name']),
);
}).toList(),
);
}
}
Step 3: Display the selected country and code
Text('$selectedCountry ($selectedCountryCode)'),
To add a search bar to the dropdown menu, we can use the autocomplete_textfield
package. Here are the steps:
Step 1: Add the package to your dependencies in pubspec.yaml
dependencies:
autocomplete_textfield: ^1.8.3
Step 2: Use the AutoCompleteTextField
widget instead of the DropdownButton
class CountryDropdown extends StatefulWidget {
@override
_CountryDropdownState createState() => _CountryDropdownState();
}
class _CountryDropdownState extends State<CountryDropdown> {
TextEditingController searchTextController = TextEditingController();
String selectedCountry = '';
String selectedCountryCode = '';
@override
Widget build(BuildContext context) {
return AutoCompleteTextField(
controller: searchTextController,
decoration: InputDecoration(
hintText: 'Search for a country',
border: OutlineInputBorder(),
),
itemSubmitted: (value) {
setState(() {
selectedCountry = value;
for (var country in countries) {
if (country['name'] == selectedCountry) {
selectedCountryCode = country['code'];
}
}
});
},
itemBuilder: (context, suggestion) => ListTile(
title: Text(suggestion),
),
suggestions: countries
.map((country) => country['name'].toString())
.toList(),
);
}
}
Note: The search function in the AutoCompleteTextField
is case sensitive. If you want it to be case insensitive, you'll need to modify the lib/autocomplete_textfield.dart
file in your project's folder by replacing the _filterList
method with the following:
List<String> _filterList(String filter, List<String> filterList) {
if (filter == null || filter.isEmpty) {
return filterList;
}
return filterList.where((item) => item.toLowerCase().contains(filter.toLowerCase())).toList();
}
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-11-24 11:00:00 +0000
Seen: 11 times
Last updated: Oct 04 '21
In a new Flutter project on Android Studio, is it possible to not have any libs or main.dart file?
How can Google calendar events be generated on the server-side using Flutter?
How can I retrieve an SVG image from a URL in Flutter?
How can I combine streams of different types in Dartlang using rxdart?
What are the steps to disable FlutterFire configuration?
How can zooming similar to desktop be achieved in HTML webview browser using Flutter?
How to imitate Http Client calls during flutter testing?
What is the process of invoking a Cloud Function in Firebase through Flutter?