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()),