Error while running Dart list

Question

I am trying to make a list in Dart/flutter, however I am getting the following error while running the app screen.

Repository class:

chamarGetGaiola(String usuario, String token) async {
  http.Response response = await http.get(
  urlAPI + "/GaiolasDisponiveis?usuario=$usuario&token=$token",
  headers: {"Content-type": "application/json; charset=UTF-8"},
);

if (response.statusCode.toString() == "200") {
  List<dynamic> retorno = json.decode(response.body);

  List<Gaiola> lista = List<Gaiola>();

  for (final item in retorno) {
    Gaiola novoItem = Gaiola();
    novoItem.GaiolaId = item["gaiolaId"];
    novoItem.Nome = item["nome"];
    lista.add(novoItem);
  }


  return lista;

  // print("Resposata usuário: $usuario $senha $token");

} 

Class of the Cage:

class Gaiola {

int GaiolaId;
String Nome;

}

Class to assemble the list.

import 'package:projeto/Caixa.dart';
import 'package:flutter/material.dart';
import 'package:projeto/global.dart' as gv;
import 'dart:convert';
import 'Gaiola.dart';
import 'Repositorio.dart';

class Aspirar extends StatefulWidget {
String caixa;

 @override
 _AspirarState createState() => _AspirarState();
  }



    class _AspirarState extends State<Aspirar> {



     Repositorio repositorio = Repositorio();

     TextEditingController campoQtdAspirada = TextEditingController();
     Gaiola gaiola;




    @override
    Widget build(BuildContext context) {

    List<Gaiola> listaGaiola = repositorio.chamarGetGaiola(gv.usuarioLogado, 
    gv.token);

    return Scaffold(
    appBar: AppBar(
      title:
          Text("Aspirar Caixa ${gv.codigoQrCodeCapturado.toUpperCase()}"),
      backgroundColor: Color(0xffccffcc),
    ),
    backgroundColor: Color(0xff263238),
    body: Column(
      children: <Widget>[
        Text(
          gv.codigoQrCodeCapturado.toUpperCase(),
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
            fontSize: 25,
          ),
        ),
        Image.asset(
          "imagens/caixa.png",
          width: 240,
        ),
        Padding(
          padding: EdgeInsets.all(32),
          child: TextField(
            style: TextStyle(color: Colors.white),
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              labelText: "Quantidade Aspirada",
              labelStyle: TextStyle(fontSize: 20, color: Color(0xffccffcc)),
            ),
            controller: campoQtdAspirada,
          ),
        ),
        Container(
            child: DropdownButton<Gaiola>(
          items: listaGaiola.map((Gaiola gaiola) {
            return new DropdownMenuItem<Gaiola>(
              value: gaiola,
              child: new Text(
                gaiola.Nome,
                style: new TextStyle(color: Colors.black),
              ),
            );
          }).toList(),
          onChanged: (Gaiola value) {
            setState(() {
              gaiola = value;
            });
          },
          hint: Text(
            'Selecionar Gaiola',
          ),
          value: gaiola,
          underline: Container(
            decoration: const BoxDecoration(
                border: Border(
              bottom: BorderSide(color: Color(0xffccffcc)),
            )),
          ),
          style: TextStyle(
            fontSize: 20,
            color: Colors.black,
          ),
          iconEnabledColor: Color(0xffccffcc),
          iconSize: 20,
        )),
        Padding(
          padding: EdgeInsets.only(top: 16, bottom: 10),
          child: RaisedButton(
            child: Text(
              "Confirmar Aspiração",
              style: TextStyle(color: Colors.black, fontSize: 20),
            ),
            color: Color(0xffccffcc),
            padding: EdgeInsets.fromLTRB(32, 16, 32, 16),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(32)),
            onPressed: () {
              print(
                  "Combo digitado: ${campoQtdAspirada.text}, GaiolaId: ${gaiola.GaiolaId}");
            },
          ),
        ),
      ],
    ));
     }
     }

Answer 1

You have only missed the return of your method chamarGetGaiola, do so:

Future<List<Gaiola>> chamarGetGaiola(String usuario, String token) async {
  ...
}

But as your method will return one Future you will need to use the FutureBuilder, Modify your cage combo as follows

Container(
      child: FutureBuilder(
        future: repositorio.chamarGetGaiola(gv.usuarioLogado, gv.token),
        builder: (context, snapshot) {
          if (!snapshot.hasData)
            return Container();

          return DropdownButton<Gaiola>(
          items: snapshot.data.map((Gaiola gaiola) {
            return new DropdownMenuItem<Gaiola>(
              value: gaiola,
              child: new Text(
                gaiola.Nome,
                style: new TextStyle(color: Colors.black),
              ),
            );
          }).toList(),
          onChanged: (Gaiola value) {
            setState(() {
              gaiola = value;
            });
          },
          hint: Text(
            'Selecionar Gaiola',
          ),
          value: gaiola,
          underline: Container(
            decoration: const BoxDecoration(
                border: Border(
              bottom: BorderSide(color: Color(0xffccffcc)),
            )),
          ),
          style: TextStyle(
            fontSize: 20,
            color: Colors.black,
          ),
          iconEnabledColor: Color(0xffccffcc),
          iconSize: 20,
        );
        }
      )
    )

And so you won’t need to use it anymore

List<Gaiola> listaGaiola = repositorio.chamarGetGaiola(gv.usuarioLogado, 
    gv.token);

Note: I don’t have Flutter on the computer right now, so I didn’t get to test, maybe I need to do some modification.

Why use Futurebuilder?

As the request made to your API is asynchronous and the data will be received at another time it is necessary that your method return one Future<T>.

The FutureBuilder will await this call and as soon as it is finalized, will redesign the Widget that it contains.

I did a validation if (!data.hasData) return Container();, this validation serves to ensure that when the FutureBuilder is waiting for the API response he draws a Container "null" thus occupying no space and becoming imperceptible to the user.