1
resposta

[Sugestão] Possível solução para o desafio

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;
    });
  }
1 resposta

Olá, Cleiton, como vai?

Sua solução está muito bem elaborada! Gostei especialmente da forma como você integrou o SliverList e ajustou o layout para incluir o TextField na interface de forma dinâmica. A implementação do onChanged no campo de pesquisa, juntamente com o filtro na função refresh, ficou super prática e eficiente para o contexto apresentado.

Você economizou recursos ao não realizar novas consultas no banco, aproveitando os dados já carregados na memória. Isso é uma abordagem bem otimizada, especialmente para listas pequenas ou moderadas.

Continue compartilhando suas soluções! Além de ajudar outros colegas, é uma ótima forma de consolidar seu aprendizado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)