skip to Main Content

I am creating an App using Flutter, and I have the following problem: On one screen I have a Dropdown where I select a country, when selecting it it saves the prefixes of that country in a list, the idea is to transfer that list to a second Dropdown where they will be shown the prefixes according to the selected country:

class _CountriesViewState extends ConsumerState {

@override
Widget build(BuildContext context) {
    final countriesState = ref.watch(countriesProvider);
    String? _selectedCountryIso;
    String? _selectedPrefix;
    List<String> selectedCountryPrefixes = [];
    final List<String> countryNames = countriesState.countries.map((country) => country.countryName).toList();
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 18.0),
        child: Form(
            child: Column(
                children: [
                    CustomDropdown(
                        labelText: 'País',
                        items: countryNames,
                        value: _selectedCountryIso,
                        onSelectionChanged: (newValue) {
                            setState(() {
                                selectedCountryPrefixes = countriesState.countries
                                .firstWhere((country) => country.countryName == newValue)
                                .prefix
                                .map((prefix) => prefix['Prefix']!)
                                .toList();
                            });
                            print("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
                            print(selectedCountryPrefixes);
                            print("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
                            //SO FAR, EVERYTHING IS GOOD, THE COUNTRIES ARE LOADING AND IN selectedCountryPrefixes THERE ARE THE PREFIXES, EXAMPLE: [1201, 1202, 1203, 1205, 1206]
                        },
                        onChanged: (newValue) {},
                    ),
                    CustomDropdown(
                        labelText: 'Prefijo',
                        items: selectedCountryPrefixes,
                        value: _selectedPrefix,
                        //IN THIS DROPDOWN IT DOES NOT LOAD ANYTHING:(
                        onSelectionChanged: (newValue) {
        
                        },
                        onChanged: (newValue) {},
                    ),

As I mentioned in the code, the first Dropdown works well, loads the countries and stores the prefixes in selectedCountryPrefixes like this [1201, 1202, 1203, 1205, 1206].

I have tried to do one thing and another but in the second Dropdown the prefixes are not loaded, I greatly appreciate your collaboration.

2

Answers


  1. You declared selectedCountryPrefixes inside the build method, which makes it get reinitialized to empty list every time the widget rebuilds. The print statement correctly printed the updated list because the widget has not rebuilt at that time.

    You should declare selectedCountryPrefixes in the state instead:

    class _CountriesViewState extends ConsumerState {
    List<String> selectedCountryPrefixes = []; // (1) Add this line
    
    @override
    Widget build(BuildContext context) {
        final countriesState = ref.watch(countriesProvider);
        String? _selectedCountryIso;
        String? _selectedPrefix;
        List<String> selectedCountryPrefixes = []; // (2) Remove this line
    

    Be aware that you’re also declaring _selectedCountryIso and _selectedPrefix inside the build method which probably should be moved to the state as well.

    Login or Signup to reply.
  2. Try to check when the selectedCountryPrefixes is not empty then show the drop down

    if (selectedCountryPrefixes.isNotEmpty) 
     CustomDropdown(
        labelText: 'Prefijo',
        items: selectedCountryPrefixes,
        value: _selectedPrefix,
        onSelectionChanged: (newValue) {},
        onChanged: (newValue) {},
      )
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search