0

Boa tarde/noite,

Estou desenvolvendo um aplicativo onde em uma da telas quero fazer um "chat" igual do WhatsApp. Em questão de funcionalidade, o meu chat se diferencia do WhatsApp por ser totalmente offline e ao invés do usuário ter um "TextFild" para digitar e enviar mensagens, fiz um "DropDown" para ele escolher uma possível resposta e enviar.

Mas ao clicar no botão de enviar, além de enviar a mensagem, quero trocar esse DropDown, ou seja, gostaria de alterar a 'List' desse dropdown para uma nova e dar novas opções de resposta.

Segue meu código:

_enviarMensagem(
      ){
    if(valueChoose != null){
      print(valueChoose);
      listaMensagens.add(valueChoose);
      listItem.remove(listItem[0]);
      listItem.add(listItem2[0]);
      setState(() {
        tamanhoLista = tamanhoLista + 1;
      });
    }
}
List <String>listItem2 = ['item5','item6'];

String valueChoose;

  List <String>listItem = [


'item 1',
'item 2',
'item 3',
'item 4',


 ];

int tamanhoLista = 0;

 List<String> listaMensagens=[];
 
 
  Widget build(BuildContext context) {


var listView = Expanded(child: ListView.builder(
  itemCount: tamanhoLista,
    itemBuilder: (context, indice){

    double larguraContainer = MediaQuery.of(context).size.width * 0.8;

    Color corTexto = Colors.grey;
    Alignment alinhamento = Alignment.centerRight;
    if( indice % 2 == 0){
      alinhamento = Alignment.centerLeft;
      corTexto = Colors.white;
    }

    return Align(
      alignment: alinhamento,
      child: Padding(padding:EdgeInsets.all(8),
      child: Container(
        width: larguraContainer,
        padding: EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: corTexto,
          borderRadius: BorderRadius.all(Radius.circular(30))
        ),
        child: Text(listaMensagens[indice],
        style: TextStyle(
          fontSize: 14,
        ),),
      ),),

    );
    }
));

var caixaMensagem = Container(
  padding: EdgeInsets.all(8),
  child: Row(
    children: [
      Expanded(child: Padding(
        padding: EdgeInsets.only(right: 8),
        child:
          Padding(
            padding: const EdgeInsets.all(5),
            child: Container(
              height: 40,
              padding: EdgeInsets.only(left: 16, right: 16),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.white, width: 1),
                borderRadius: BorderRadius.circular(30)
              ),
              child: DropdownButton(

                hint: Text('Selecione sua resposta...',
                style: TextStyle(color: Colors.black),),
              dropdownColor: Colors.white,
              icon: Icon(Icons.arrow_drop_down,
              color: Colors.black),
              iconSize: 36,
              isExpanded: true,
              underline: SizedBox(),
              style: TextStyle(
                color: Colors.black,
                fontSize: 16,
              ),
              value: valueChoose,
                onChanged: (newValue){
                setState(() {
                  valueChoose = newValue;
                });
                },
                items: listItem.map<DropdownMenuItem<String>>((String valueItem){
                  return DropdownMenuItem<String>(
                    value: valueItem,
                    child: Text(valueItem),

                  ) ;
                }).toList()
              ),
            ),
          )
      )),
      FloatingActionButton(
        backgroundColor: Colors.white,
        child: Icon(Icons.send, color: Colors.blue,),
        mini: true,
        onPressed: _enviarMensagem,
      )
    ],
  ),
);

Para exemplificar como meu código funciona na prática:

inserir a descrição da imagem aqui

até aqui está perfeito, mas quando coloco as seguintes linhas de comando dentro de _enviarMensagem, tudo começa a dar errado:

   listItem.remove(listItem[0]);
      listItem.add(listItem2[0]);

Ao meu ver, elas servem para tirar o primeiro item do listItem e depois adicionar o primeiro item do listItem2, isso tudo após enviar a mensagem, mas olha o que acontece ao tentar selecionar um item que vou excluir após o envio...

inserir a descrição da imagem aqui

E acontece exatamente o mesmo erro se eu tentar enviar o novo item que adicionei:

inserir a descrição da imagem aqui

ERRO:

There should be exactly one item with [DropdownButton]'s value: item5. 
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 834 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

Desde já, sou grato a todas as respostas e tentativas de ajuda. Falta apenas isso para eu conseguir acabar meu APP.

1 Resposta 1

1

Acredito que o erro aconteça pelo seguinte motivo. O value do DropDownButton está settado como sendo a variável valueChoose. Até aí tudo certo pois ela inicia com valor null. Caso ela não seja null, o valor dela tem que existir dentro da lista que está populando o DropDownButton. Acontece que quando você remove o item da lista, a variável ainda está settada com aquele valor, então o DropDownButton fica com o value com um valor que não existe na lista.

Uma tentativa seria deixar a variável valueChoose nula antes de remover o item da lista

 if(valueChoose != null){
      print(valueChoose);
      listaMensagens.add(valueChoose);

      valueChoose = null; //Faz com que o value do DropDownButton seja null;

      listItem.remove(listItem[0]);
      listItem.add(listItem2[0]);
      setState(() {
        tamanhoLista = tamanhoLista + 1;
      });
    }
1
  • Perfeito! Muitíssimo obrigado! Era realmente isso, eu estava quebrando a cabeça com isso! Agora funciona perfeitamente! Muito obrigado!
    – Whackings
    23/12/2020 às 7:07

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 .