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:
- Quando uma opção é selecionada e o botão pressionado, a opção é listada no segundo componente (SubstancesList), conforme a imagem a seguir:
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": .
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
}
}
),
),
],
);
}
}
subsIndex
vem de fora do WidgetAutocompleteInput
exemplificado na pergunta, então provavelmente você precisa incrementar ela na função passada nosubmitHandler
, colocando ai osetState()
. Se possível nos mostre onde você está utilizando esse Widget.