Flutter - Default value in dropdown

Question

I'm trying to send a element to one view. This element will be default element in the dropdown of the second page . I use something like that in first page

  onTap: () {
                        Navigator.push(
                            context,
                            new MaterialPageRoute(
                                builder: (context) => new SummaryPage(,
                                    dropdownItem: dropdownSelection)));
                      } 

Then in page two i create future to get all elements in dropdown and initstate method to set default element dropdown

 List data = List();

 Future<Null> getEstates() async {
    final response = await http
        .get('URL'
    }).catchError((error) {
      print(error.toString());
    });
    final responseJson = json.decode(response.body);
    final getBody = responseJson['body'];
    setState(() {
      data = getBody;
      loading = false;
    });
  }


 void initState() {
    super.initState();     

     setState(() {
          dropdownSelection = widget.dropdownItem.toString();
        });

getEstate return this

[{id: 1, descripcion: Terreno Rio}, {id: 2, descripcion: Terreno Asier}]

The dropdown look like similar to this

child: ButtonTheme(
                    alignedDropdown: true,
                    child: new DropdownButton<String>(
                      isDense: true,
                      hint: new Text("Search...",
                          textAlign: TextAlign.center),
                      value: dropdownSelection,
                      onChanged: (String newValue) {
                        setState(() {
                          dropdownSelection = newValue;
                      },
                      items: data.map((item) {
                        return new DropdownMenuItem<String>(
                          child: new Text(
                            item['description'],
                          ),
                          value: item['id'].toString(),
                        );
                      }).toList(),
                    ),
                  ),

The error that shows is

value == null || items.where((DropdownMenuItem item) => item.value == value).length == 1': is not true

Apparently code is fine but when i go to the second view shows a error view around 1 seconds and then show the second page. I think the value maybe load too soon and dropdown can´t set properly. Any idea why this error happens and how can i fix them?

Answer 1

That's because at the first time you don't have any value (your list is empty), so you can display a CircleProgressIndicator, like this:

        child: data.length > 0 ? ButtonTheme(
                        alignedDropdown: true,
                        child: new DropdownButton<String>(
                          isDense: true,
                          hint: new Text("Buscar..",
                              textAlign: TextAlign.center),
                          value: dropdownSelection,
                          onChanged: (String newValue) {
                            setState(() {
                              dropdownSelection = newValue;              
                          },
                          items: data.map((item) {
                            return new DropdownMenuItem<String>(
                              child: new Text(
                                'Finca: ' + item['descripcion'],
                              ),
                              value: item['id'].toString(),
                            );
                          }).toList(),
                        ),
                      ),
                    ) : Center(child: CircularProgressIndicator()),

Answer 2

There could be 2 things wrong, that i can think of with your code:

1. the value of DropdownMenutItem item is not unique, ie. some "id"s are repeated.
2. the id that you are passing to PageTwo is not matching with any of the ids in the menu.

I would suggest using int id only instead of String as value