Barra de búsqueda y filtro en Flutter Dart

Tiempo de lectura: < 1 minuto

Realizar una barra de búsqueda e ir filtrando una lista, es muy sencillo siguiendo los siguientes pasos:

La lista de elementos que vamos a mostrar y filtrar es la siguiente

List<dynamic> datosTutores = [
  {
    "name": "Maria",
    "email": "ejemplo1_devcodelight@email.com",
    "phone": "1234567890"
  },
  {
    "name": "Laura",
    "email": "ejemplo2_devcodelight@email.com",
    "phone": "1234567890"
  },
  {
    "name": "Isma",
    "email": "ejemplo3_devcodelight@email.com",
    "phone": "1234567890"
  },
];

List<dynamic> listaFiltrar = [];
TextEditingController _controller = TextEditingController();

A continuacón hay que crear el diseño de la barra de búsqueda.

TextField(
  controller: _controller,
  cursorColor: Colors.black,
  decoration: InputDecoration(
    prefixIcon: Icon(
      CupertinoIcons.search,
      color: Colors.black,
    ),
    border: InputBorder.none,
    hintText: Traducir.of(context)!.translate('buscar'),
  ),
  onChanged: (texto) {
    filtrarLista(texto); // Llama a la función de filtrado cuando el texto cambia
  },
)

Por último agregamos el método que realizar el filtro en este caso se llama filtrarLista.

void filtrarLista(String texto) {
  setState(() {
    datosTutores = listaFiltrar
        .where((tutor) => tutor['name']
            .toString()
            .toLowerCase()
            .contains(texto.toLowerCase()))
        .toList();
  });
}

Espero que les sirva de ayuda, feliz día.