Inicialmente, preicisei mudar a forma como a lista é exibida na tela, alterando para um SliverList()
, já que é preciso definir a altura na tela para adicionar um TextField()
na mesma "coluna":
[...]
RefreshIndicator(
onRefresh: () {
return refresh();
},
child: Padding(
padding: const EdgeInsets.fromLTRB(32, 32, 32, 0),
child: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 16,
),
child: TextField(
onChanged: (value) => refresh(search: value),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
label: Text(
'Pesquise aqui...',
),
suffixIcon: Icon(
Icons.search,
),
),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
Listin listin = listListins[index];
return HomeListinItem(
listin: listin,
showOptionModal: showOptionModal,
);
},
childCount: listListins.length,
),
),
],
),
),
),
[...]
Utilizei o método onChanged para notificar as mudanças na barra de pesquisa.
Não vi necessidade em fazer outra consulta no banco de dados já que a lista já havia sido previamente carregada na memória, portanto só precisei alterar a função refresh()
, informando o parâmetro opcional search
:
refresh({String? orderBy, String? search}) async {
// Basta alimentar essa variável com Listins que, quando o método for
// chamado, a tela sera reconstruída com os itens.
List<Listin> listaListins = [];
orderBy == 'name'
? listaListins = await _appDatabase.findAllOrderedByName()
: orderBy == 'updateDate'
? listaListins = await _appDatabase.findAllOrderedByUpdateDate()
: listaListins = await _appDatabase.findAll();
if (search != null) {
listaListins =
listaListins.where((listin) => listin.name.contains(search)).toList();
}
setState(() {
listListins = listaListins;
});
}