1

Estou com dificuldades para preencher um dropdown. Utilizando dados de uma consulta sqflite já fiz os seguintes códigos:

Um future map que retorna minhas categorias do banco de dados no seguinte formato:

[ 
   { 
      "_categoriaid":1,
      "categorianome":"Investimentos"
   },
   { 
      "_categoriaid":2,
      "categorianome":"Salário"
   }
]

Código:

  Future<Map> _categorias() async {
    var db = await DatabaseHelper.instance.database;
    List respostaCategoria = await db
        .rawQuery('SELECT (_categoriaid),(categorianome) FROM categoria');
    print(respostaCategoria);
    return respostaCategoria[0];
  }

Para exibição fiz esse FutureBuiler porem a dificuldade esta na hora de preencher os dados no dropdown.

Pelo que entendi preciso converter esse Map retornado do future para uma string e preencher no dropdown porem não consigo fazer essa conversão

FutureBuilder<Map>(
                    future: _categorias(),
                    builder: (context, snapshot) {
                      final state = snapshot.connectionState;
                      var resultado;

                      if(state == ConnectionState.done) {
                        if(snapshot.hasError) {
                          resultado = "Error";
                        } else {
                          resultado = snapshot.data;

                          if (resultado == null){
                            resultado = "Algo deu errado.";
                          }
                        }
                      }
                      return DropdownButton<String>(
                        items: resultado.map((String dropDownStringItem) {
                          return DropdownMenuItem<String>(
                            value: dropDownStringItem,
                            child: Text(dropDownStringItem),
                          );
                        }).toList(),

                        onChanged: (String newValueSelected){
                          setState(() {
                            this._currentItemSelected = newValueSelected;
                          });
                        },
                        value: _currentItemSelected,
                        isExpanded: true,
                      );
                    },
                  ),

Na forma atual recebo o seguinte erro:

The method 'map' was called on null.
Receiver: null
Tried calling: map(Closure: (String) => DropdownMenuItem<String>)

type '(String) => DropdownMenuItem<String>' is not a subtype of type '(String, dynamic) => MapEntry<dynamic, dynamic>' of 'transform'

O que estou fazendo de errado?

2 Respostas 2

0

Você precisa trabalhar melhor em cima dos seus dados retornados...

class Category{
  Category({this.id, this.nome});
  int id;
  String nome;
  
  factory Category.fromJson(Map<String, dynamic> json) => Category(
    id: json["_categoriaid"],
    nome: json["categorianome"]
  );  
}

class Something extends StatefulWidget {
  @override
  _SomethingState createState() => _SomethingState();
}

class _SomethingState extends State<Something> {
  
  @override
  void initState() {
    super.initState();

  }
  
  Future<dynamic> getData() async{
    
    await Future.delayed(const Duration(seconds: 1));
      /* Exemplo de dados retornados */
    final json = jsonDecode('[{"_categoriaid": 1, "categorianome": "Investimentos"}, {"_categoriaid": 2, "categorianome": "Salário"}]');
    return json;
  }

  List<Category> toList(dynamic json){
    List<Category> list = List<Category>();
    
    list = (json as List).map((item) => Category.fromJson(item)).toList();
    return list;
  }
  
  int _currentItemSelected = 1;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 80,
        width: 200,
        child: FutureBuilder(
        future: getData(),
        builder: (context, snapshot) {
          /* Apenas para desenhar algo enquanto não existir informações pra montar o DropDown */
          print(snapshot.hasData);
          if (!snapshot.hasData)
            return Container();
          
          List<Category> categorias = toList(snapshot.data);
          
          return DropdownButton<int>(
            value: _currentItemSelected,
            isExpanded: true,
            items: categorias.map((item) {
              return DropdownMenuItem(
                value: item.id,
                child: Text(item.nome),
              );
            }).toList(),

            onChanged: (value){
              setState((){
                _currentItemSelected = value;
              });
            },
          );
        },
      ),
      )
    );
   }
}

Explicação

  1. Criamos a classe Category para guardar os dados de cada objeto do seu JSON.
  2. Criamos o método toList() que vai receber o seu JSON e então retornamos uma lista decategorias List<Category>.
  3. Então percorremos a lista e vamos adicionando categoria por categoria no seu ComboBox.

No ComboBox nós utilizamos o campo ID como chave(int) e o campo NOME como exibição(string)

Observação

Tente não utilizar a mesma variável para diversas coisas, ali você estava utilizando a var resultado de forma errada pois ela poderia receber tanto um Map<String, dynamic> quanto uma String, dando brecha para um futuro erro. Estruture bem seus dados para prevenir problemas.

2
  • Consegui fazer funcionar, obrigado, ainda não entendi algumas partes do código vou estudar para compreender.
    – denis
    Commented 29/01/2020 às 21:50
  • Se precisar tire suas dúvidas aqui, que lhe respondo... Só uma observação, o método getData() fiz apenas para simular o seu BD, ele tu pode ignorar. Commented 30/01/2020 às 10:51
0

O FutureBuilder é um widget que se constrói baseado na última interação com um Future.

Quando o seu Future retornado pela função _categorias() ainda não completou, snapshot.data será nulo, impedindo você de continuar.

Não é bem um "erro", só é um estado que enquanto se espera, precisa ter um retorno coerente.

Você tem dois jeitos de corrigir isso:

  • O que você tentou fazer,

resultado = "Algo deu errado.";

Que seria um pensamento equivalente a: enquanto ainda não tenho snapshot.data, eu crio meu próprio "data" falso para manter uma única função de construção

O que não tem nada de errado, se você tiver certeza de que o seu "data" preparado é coerente com o data que vem do snapshot. Acredito que esse foi o erro no seu caso, dado que seu snapshot.data é um mapa que liga "String" a "Dynamic". Se você fizesse no lugar algo do tipo:

if (resultado == null){
                            resultado = {"campo1":0};
                          }

(Ou o equivalente para a estrutura do seu mapa) Seu código deve funcionar.

Ou a outra forma,

  • Verificar antes de tudo se o snapshot tem dados, e caso tenha retornar um Widget, caso não tenha retornar outro. Esse é o modo convencionado de se fazer, inclusive é o modo que o exemplo faz, na página do FutureBuilder apontada acima.

Para fazer isso, pode-se por exemplo fazer:

[...]
builder: (context, snapshot) {
    if (snapshot.hasData) {
        return Dropdown[...]//Seu código e tratamento aqui
    }else{
        return Text('Carregando!'); //Ou uma outra mensagem equivalente.
    }

},
[...]

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .