Dependable Dropdown in Flutter is throwing an error

Question

I have three Dropdowns, each dependent on the previous one. I was able to load data onto the second Dropdown based on the value selected in the First Dropdown. When I select the Second Dropdown, the third Dropdown throws an error.

First DropDown values:

final List<String> juzList = List<String>.generate(30, (i) => ('Juz ${i + 1}'));

Second Dropdown values:

final surahPerJuz = [
  ['بقرة'],
  [
    'البقرة',
    'آل عمران',
  ],
  ['آل عمران', 'النساء', 'المائدة']
];

Third Dropdown values:

final pagesPerSurah = {
  1: List<String>.generate(100, (i) => ('Page ${i + 1}')),
  2: List<String>.generate(101, (i) => ('Page ${i + 1}')),
  3: List<String>.generate(200, (i) => ('Page ${i + 1}')),
  // ... (add maps for remaining surahs)
};

First Dropdown:

FormField(
            builder: (FormFieldState state) {
              return InputDecorator(
                decoration: kTextInputDecoration.copyWith(
                  labelText: 'Select Juz',
                  errorText: state.hasError ? state.errorText : null,
                ),
                child: DropdownButtonHideUnderline(
                  child: DropdownButton(
                    value: selectedJuz,
                    isDense: true,
                    onChanged: (value) {
                      setState(() {
                        selectedJuz = value;
                        selectedSurah = null;
                        selectedPage = null;
                      });
                    },
                    items: juzList.map((value) {
                      return DropdownMenuItem(
                        value: value,
                        child: Text(value),
                      );
                    }).toList(),
                  ),
                ),
              );
            },
            validator: (val) {
              return val != '' ? null : 'Please select juz';
            },
          ),  

Second DropDown:

FormField(
            builder: (FormFieldState state) {
              return InputDecorator(
                decoration: kTextInputDecoration.copyWith(
                  labelText: 'Select Surah',
                  errorText: state.hasError ? state.errorText : null,
                ),
                child: DropdownButtonHideUnderline(
                  child: DropdownButton<String>(
                    value: selectedSurah,
                    isDense: true,
                    onChanged: (value) {
                      setState(() {
                        selectedSurah = value;
                        selectedPage = null;
                      });
                    },
                    items: (selectedJuz != null)
                        ? surahPerJuz[int.parse(selectedJuz!.substring(4)) - 1]
                            .map((surah) => DropdownMenuItem<String>(
                                value: surah, child: Text(surah)))
                            .toList()
                        : [], //
                  ),
                ),
              );
            },
            validator: (val) {
              return val != '' ? null : 'Please select surah';
            },
          ),  

Third Dropdown:

FormField(
            builder: (FormFieldState state) {
              return InputDecorator(
                decoration: kTextInputDecoration.copyWith(
                  labelText: 'Select Page',
                  errorText: state.hasError ? state.errorText : null,
                ),
                child: DropdownButtonHideUnderline(
                  child: DropdownButton<String>(
                    value: selectedPage,
                    isDense: true,
                    onChanged: (value) {
                      setState(() {
                        selectedPage = value;
                      });
                    },
                    items: (selectedSurah != null)
                        ? pagesPerSurah[int.parse(selectedSurah!.substring(6))]
                            ?.map((page) => DropdownMenuItem<String>(
                                value: page, child: Text(page)))
                            .toList()
                        : [], // Show
                  ),
                ),
              );
            },
            validator: (val) {
              return val != '' ? null : 'Please select surah';
            },
          ),  

Error:
I am still getting an error when I select the second drop-down button.

error: Invalid number (at character 1)

The third dropDown button is not being populated and throwing the above error.

Answer 1

I was able to solve my own issue by:

1. Changing the

   `final pagesPerSurah = { 'البقرة': List.generate(49, (i) => 'Page ${i + 1}'), 'النساء': List.generate(100, (i) => 'Page ${i + 101}'), 'آل عمران': List.generate(50, (i) => 'Page ${i + 51}'), // ... (add entries for remaining surahs) };

`

2. Changing the 3rd Dropdown to:

   items: (selectedSurah != null) ? pagesPerSurah[selectedSurah!] ?.map((page) => DropdownMenuItem<String>( value: page, child: Text(page))) .toList() : [], // Show