-1

Descrição

Meu App é composto por dois widgets:

  • O primeiro (AutocompleteInput) é composto por um campo autocomplete (AutocompleteTextField) e um botão ao lado conforme a imagem a seguir: Widget AutocompleteInput
  • Quando uma opção é selecionada e o botão pressionado, a opção é listada no segundo componente (SubstancesList), conforme a imagem a seguir: Exibindo os dois Widgets da aplicação

O AutocompleteTextField presente no primeiro widget precisa ter o hintText (texto com a mesma funcionalidade do "placeholder" do html) dinâmico. O hint deve ser: "Informe o Xº produto", na qual "X" deve ser a quantidade de itens listados no outro widget + 1.

A maneira que consigo a quantidade de itens listados é através de uma variável final int que é atribuída no construtor da classe AutocompleteInput, chamada "nextSub".

Problema

O valor de "nextSub" está sendo atualizado corretamente (a medida que itens são inseridos e removidos da lista do outro widget), mas sua mudança não está sendo refletida na interface, ou seja, o hintText sempre é: "Informe o 1º produto", independente da quantidade de itens listados no segundo componente.

O hint correto neste print deveria ser "Informe o 3º produto": Exibindo o erro na interface.

Acredito ser um problema relacionado ao setState() (não foi utilizado para atribuir a string "hintText"), uma vez que o widget AutocompleteInput é statefull, mas não estou sabendo onde devo colocar este método para que o widget funcione corretamente.

Pergunta

O que fazer para que o valor de "nextSub" apareça corretamente no hintText do AutocompleteTextField?

Código main.dart (aonde é feita a importação do componente AutocompleteInput):

class _MyHomePageState extends State<MyHomePage> {
  
  final List<SubstanciaAutocompleteOption> _substanciasAutocompleteOptions = new List<SubstanciaAutocompleteOption>();
  final List<SubstanciaAutocompleteOption> _substanciasSelecionadas = new List<SubstanciaAutocompleteOption>();
  int _nextSub = 1;

  void _addSubstanceToList(SubstanciaAutocompleteOption sub) {
    setState(() {
      _substanciasSelecionadas.add(sub);
      _nextSub += 1;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final pageBody = SafeArea(
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[

            Container(
                height: mediaQuery.size.height * 0.1,
                  padding: EdgeInsets.all(10),
                  child: AutocompleteInput(
                    options: _substanciasAutocompleteOptions,
                    submitHandler: _addSubstanceToList,
                    nextSub: _nextSub,
                  ),
                ),
                ...

Código do widget AutocompleteInput

class AutocompleteInput extends StatefulWidget {
  final List<SubstanciaAutocompleteOption> options; //lista de opções para autocomplete
  final Function submitHandler; // o que fazer quando clicar no botão
  final int nextSub; // quantidade de itens presentes no segundo componente

  AutocompleteInput({
    this.options,
    this.submitHandler,
    this.nextSub
  });

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

class _AutocompleteInputState extends State<AutocompleteInput> {
  AutoCompleteTextField searchTextField;
  GlobalKey<AutoCompleteTextFieldState<SubstanciaAutocompleteOption>> key = new GlobalKey();
  SubstanciaAutocompleteOption selectedOption;

  Widget custonListTile(SubstanciaAutocompleteOption option) {
    return Card(
      elevation: 5,
      margin: EdgeInsets.only(
        top: 6,
      ),
      child: Container(
        padding: EdgeInsets.only(left: 33, top: 5, bottom: 5, right: 5),
        height: 45,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              option.descricao.capitalize(),
              style: TextStyle(
                fontSize: 16,
              ),
            ),
            if(option.descricao != option.principioAtivo)
              Text(
                option.descricao.capitalize(),
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.black45
                ),
              )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    print('nextSub: ${widget.nextSub}');
    return Row(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: searchTextField  = AutoCompleteTextField<SubstanciaAutocompleteOption> (
            itemSubmitted: (item) {
              setState(() {
                searchTextField.textField.controller.text = item.descricao;
                selectedOption = new SubstanciaAutocompleteOption(
                  subsId: item.subsId,
                  principioAtivo: item.principioAtivo,
                  comercialId: item.comercialId,
                  descricao: item.descricao
                );
              });
            },
            key: key, 
            clearOnSubmit: false,
            suggestions: widget.options, 
            itemBuilder: (context, item) {
              SubstanciaAutocompleteOption opAux = new SubstanciaAutocompleteOption(
                subsId: item.subsId, 
                principioAtivo: item.principioAtivo, 
                descricao: item.descricao,
                comercialId: item.comercialId
                );
              return custonListTile(opAux);
            }, 
            itemSorter: (a, b) {
              return a.descricao.compareTo(b.descricao);
            }, 
            itemFilter: (item, query) {
              return item.descricao.toLowerCase().startsWith(query.toLowerCase());
            },
            decoration: InputDecoration(
              contentPadding: EdgeInsets.only(top: 10.0),
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).primaryColor
                )
              ),
              hintText: 'Informe o ${widget.nextSub}º produto',
              labelText: 'Adicionar Produto à Mistura',
              prefixIcon: Icon(Custom.beaker),
            ),
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Container(
          height: double.infinity,
          margin: EdgeInsets.only(left: 5),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            boxShadow: [
              BoxShadow(color: Colors.green, spreadRadius: 1),
            ],
          ),
          child: IconButton(
            color: Colors.white,
            icon: Icon(Icons.add), 
            onPressed: () {
              if(selectedOption != null) {
                searchTextField.textField.controller.clear();
                widget.submitHandler(selectedOption);
                selectedOption = null;
              }
              else {
                // TO DO
              }
            }  
          ),
        ),
      ],
    );
  }
} 
5
  • Opa beleza? Edita a sua pergunta e coloca as imagens diretamente nela. 30/06/2020 às 14:15
  • O valor da tua propriedade subsIndex vem de fora do Widget AutocompleteInput exemplificado na pergunta, então provavelmente você precisa incrementar ela na função passada no submitHandler, colocando ai o setState(). Se possível nos mostre onde você está utilizando esse Widget. 30/06/2020 às 14:29
  • 1
    @MatheusRibeiro , fiz as edições, acredito que o erro está na hora de atribuir o hintText, deve ter algum lugar correto para colocar o setState() mas não estou conseguindo identificar onde 30/06/2020 às 14:47
  • Fiz uns testes aqui, e não consegui reproduzir o problema (Mas não usei o autocomplete), aparentemente esta certo o teu controle... 30/06/2020 às 15:10
  • @MatheusRibeiro ai que ta o problema, o autocomplete ta sendo armazenado na variável "searchTextField", na qual não está sofrendo atualização quando o botão é clicado, tem algum jeito de forçar o widget AutocompleteTextField, dentro dessa várial "searchTextfield", executar o método build novamente? Pois uma vez que essa variável tem um valor atribuído, o hintText é setado e como consequência dessa variável não sofrer atualização, o hintText também não muda. Já tentei colocar o setState no onPressed do button mas n funcionou: prnt.sc/t98r71 30/06/2020 às 15:40

1 Resposta 1

1

Cara não faz muito sentido você armazenar o widget numa variável só pra pegar o texto dele se você pode criar um TextEditingController que serve para esta finalidade. Como você disse no teu comentário, eu não tinha me atentado que você armazenava numa variável....

Tente a seguinte mudança:

class _AutocompleteInputState extends State<AutocompleteInput> {
  AutoCompleteTextField searchTextField;
  GlobalKey<AutoCompleteTextFieldState<SubstanciaAutocompleteOption>> key = new GlobalKey();
  SubstanciaAutocompleteOption selectedOption;

  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    
    print('nextSub: ${widget.nextSub}');
    return Row(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: AutoCompleteTextField<SubstanciaAutocompleteOption> (
            controller: controller,
            itemSubmitted: (item) {
              setState(() {
                controller.text = item.descricao;
                selectedOption = new SubstanciaAutocompleteOption(
                  subsId: item.subsId,
                  principioAtivo: item.principioAtivo,
                  comercialId: item.comercialId,
                  descricao: item.descricao
                );
              });
            },
            key: key, 
            clearOnSubmit: false,
            suggestions: widget.options, 
            itemBuilder: (context, item) {
              SubstanciaAutocompleteOption opAux = new SubstanciaAutocompleteOption(
                subsId: item.subsId, 
                principioAtivo: item.principioAtivo, 
                descricao: item.descricao,
                comercialId: item.comercialId
                );
              return custonListTile(opAux);
            }, 
            itemSorter: (a, b) {
              return a.descricao.compareTo(b.descricao);
            }, 
            itemFilter: (item, query) {
              return item.descricao.toLowerCase().startsWith(query.toLowerCase());
            },
            decoration: InputDecoration(
              contentPadding: EdgeInsets.only(top: 10.0),
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).primaryColor
                )
              ),
              hintText: 'Informe o ${widget.nextSub}º produto',
              labelText: 'Adicionar Produto à Mistura',
              prefixIcon: Icon(Custom.beaker),
            ),
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Container(
          height: double.infinity,
          margin: EdgeInsets.only(left: 5),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6),
            boxShadow: [
              BoxShadow(color: Colors.green, spreadRadius: 1),
            ],
          ),
          child: IconButton(
            color: Colors.white,
            icon: Icon(Icons.add), 
            onPressed: () {
              if(selectedOption != null) {
                controller.clear();
                widget.submitHandler(selectedOption);
                selectedOption = null;
              }
              else {
                // TO DO
              }
            }  
          ),
        ),
      ],
    );
  }
}
6
  • Ainda não funcionou, aqui o print de um teste: prnt.sc/t9akt9, o texto deveria ser "Informe o 4º produto". Utilizei este código: pastebin.com/J3tunRd5 (que foi o sugerido acima) 30/06/2020 às 17:19
  • Será que transformar este widget para statefull resolveria ? 30/06/2020 às 17:25
  • Ele já é Statefull , mas acredito que da na mesma. 30/06/2020 às 17:36
  • Perdão, stateless 30/06/2020 às 17:42
  • Acredito que encontrei a origem do erro: A maneira como a key do widget é utilizada. Dei uma pesquisada aqui e vi que keys preservam estados dos widgets, logo para solucionar este problema provavelmente deverá ser feito alguma correção na GlobalKey do AutocompleteTextField. Tentei declarar a GlobalKey no main.dart e passar no construtor da classe AutocompleteInput , mas não funcionou, no terminou apareceu o erro: prnt.sc/t9c44y 30/06/2020 às 18:45

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 .