DEV Community

Cover image for Como implementar uma busca com filtro no Jetpack Compose
Alex Felipe
Alex Felipe

Posted on

Como implementar uma busca com filtro no Jetpack Compose

Uma funcionalidade muito comum em diversos Apps, é permitir que os usuários façam buscas. A busca pode ser feita a partir de textos, categorias ou alguma informação que permita filtrar dados do App.

Dessa forma, melhoramos a experiência do usuário que tende a encontrar o que ele busca com mais facilidade, concorda? Agora vem a questão:

"Como podemos implementar uma busca com filtro no Jetpack Compose?"


TL;DR

Se o seu objetivo é verificar o código final sem entender as motivações, você pode visualizar abaixo:

App em execução apresentando um campo de texto e uma lista de produtos em coluna. Ao digitar no campo de texto, aparece apenas os produtos que contém o nome ou descrição com o valor do campo de texto

O mais importante de todos é o ViewModel que mantém a lógica para filtrar, nesse caso, filtrar produtos:

class ProductsListViewModel : ViewModel() {

    private val products = MutableStateFlow(emptyList<Product>())
    private val _filteredProducts = MutableStateFlow(emptyList<Product>())
    val filteredProducts = _filteredProducts.asStateFlow()

    fun searchProducts(text: String) {
        _filteredProducts.value = if (text.isEmpty()) {
            products.value
        } else {
            products.value.filter {
                it.name
                    .contains(
                        text,
                        ignoreCase = true
                    ) || it.description
                    .contains(
                        text,
                        ignoreCase = true
                    )
            }
        }

    }

    init {
        products.value = List(10) {
            Product(
                name = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                price = BigDecimal(Random.nextInt(10, 1000))
            )
        }
        _filteredProducts.value = products.value
    }

}
Enter fullscreen mode Exit fullscreen mode

Então temos o código da tela para implementar o campo de texto e lista de produtos:

val viewModel by viewModels<ProductsListViewModel>()
val products by viewModel.filteredProducts.collectAsState(initial = emptyList())
Column {
    var searchText by remember {
        mutableStateOf("")
    }
    OutlinedTextField(
        value = searchText,
        onValueChange = {
            searchText = it
            viewModel.searchProducts(searchText)
        },
        Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        label = {
            Text(text = "Buscar")
        },
        leadingIcon = {
            Icon(Icons.Default.Search, "search icon")
        },
        placeholder = {
            Text(text = "O que você procura?")
        },
        shape = RoundedCornerShape(10.dp)
    )
    ProductsListScreen(
        products = products
    )
}
Enter fullscreen mode Exit fullscreen mode

E o código do composable que representa a lista de produtos:

@Composable
fun ProductsListScreen(
    products: List<Product> = emptyList()
) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(products) { p ->
            Column(
                Modifier
                    .clip(RoundedCornerShape(10.dp))
                    .padding(8.dp)
                    .fillMaxWidth()
                    .border(
                        1.dp,
                        Color.Gray.copy(alpha = 0.5f),
                        RoundedCornerShape(10.dp)
                    )
                    .padding(8.dp)
            ) {
                Text(text = p.name, fontWeight = FontWeight.Bold, fontSize = 24.sp)
                Text(text = p.description)
                Text(
                    text = p.price.toBrazilianCurrency(),
                    fontWeight = FontWeight.Bold,
                    style = TextStyle.Default.copy(color = Color(0xFF4CAF50)),
                    fontSize = 18.sp
                )
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Caso você queira ver o formatador de moeda também:

private fun BigDecimal.toBrazilianCurrency(): String =
    NumberFormat.getCurrencyInstance(
        Locale("pt", "br")
    ).format(this)
Enter fullscreen mode Exit fullscreen mode

Agora, se a sua intenção é entender os passos para chegar nesse código, é só seguir com a leitura.


Projeto de exemplo

Para exemplificar a implementação, vamos utilizar um App que tem um campo de texto e uma lista de produtos:

App em execução apresentando um campo de texto e uma lista de produtos em coluna. Ao digitar no campo de texto, não modifica os items da lista de produtos. A lista de produtos é rolável com até 10 itens

Um App simples para focar apenas na funcionalidade de filtrar os produtos.

Código da tela

Se você quer replicar exatamente o mesmo resultado, você pode acessar o código da tela também:

Column {
    val products by remember {
        mutableStateOf(List(10) {
            Product(
                name = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                price = BigDecimal(Random.nextInt(10, 1000))
            )
        })
    }
    var searchText by remember {
        mutableStateOf("")
    }
    OutlinedTextField(
        value = searchText,
        onValueChange = {
            searchText = it
        },
        Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        label = {
            Text(text = "Buscar")
        },
        leadingIcon = {
            Icon(Icons.Default.Search, "search icon")
        },
        placeholder = {
            Text(text = "O que você procura?")
        },
        shape = RoundedCornerShape(10.dp)
    )
    ProductsListScreen(
        products = products
    )
}
Enter fullscreen mode Exit fullscreen mode

E aqui está o composable para representar a lista de produtos e o formatador de moeda:

@Composable
fun ProductsListScreen(
    products: List<Product> = emptyList()
) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(products) { p ->
            Column(
                Modifier
                    .clip(RoundedCornerShape(10.dp))
                    .padding(8.dp)
                    .fillMaxWidth()
                    .border(
                        1.dp,
                        Color.Gray.copy(alpha = 0.5f),
                        RoundedCornerShape(10.dp)
                    )
                    .padding(8.dp)
            ) {
                Text(text = p.name, fontWeight = FontWeight.Bold, fontSize = 24.sp)
                Text(text = p.description)
                Text(
                    text = p.price.toBrazilianCurrency(),
                    fontWeight = FontWeight.Bold,
                    style = TextStyle.Default.copy(color = Color(0xFF4CAF50)),
                    fontSize = 18.sp
                )
            }
        }
    }
}

private fun BigDecimal.toBrazilianCurrency(): String =
    NumberFormat.getCurrencyInstance(
        Locale("pt", "br")
    ).format(this)
Enter fullscreen mode Exit fullscreen mode

Pronto! Isso é o suficiente para iniciarmos a implementação do filtro.

ViewModel para buscar as informações da tela

A primeira coisa que precisamos pensar, é que o filtro trata-se de uma lógica de manipulação de dados, ou seja, o ideal é que essa lógica fique em algum outro lugar que não seja a tela.

Portanto, precisamos criar um ViewModel para manter essa lógica pra gente e ele pode começar contendo uma lista de produtos que vai representar a fonte de dados, ou seja, todos os produtos da tela:

class ProductsListViewModel : ViewModel() {

    private val products = MutableStateFlow(emptyList<Product>())

    init {
        products.value = List(10) {
            Product(
                name = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                description = LoremIpsum(Random.nextInt(1, 10)).values.first(),
                price = BigDecimal(Random.nextInt(10, 1000))
            )
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

Geralmente a fonte de dados é representada por um banco de dados ou comunicação via uma REST API.

A partir desse momento, temos tudo que precisamos para começar a manipulação dos dados.

Adicionar os dados para representar o filtro

No caso do filtro, precisamos que exista uma outra lista para representar os produtos filtrados, afinal, a lista de produtos representa a fonte de dados e não deve ser modificada:

class ProductsListViewModel : ViewModel() {

    private val products = MutableStateFlow(emptyList<Product>())
    private val _filteredProducts = MutableStateFlow(emptyList<Product>())
    val filteredProducts = _filteredProducts.asStateFlow()

    fun searchProducts(text: String) {
        _filteredProducts.value = if (text.isEmpty()) {
            products.value
        } else {
            products.value.filter {
                it.name
                    .contains(
                        text,
                        ignoreCase = true
                    ) || it.description
                    .contains(
                        text,
                        ignoreCase = true
                    )
            }
        }

    }

    init {
        // ...
        _filteredProducts.value = products.value
    }

}
Enter fullscreen mode Exit fullscreen mode

Se esse código pareceu complexo, vamos entender o que ele faz:

  • init: inicializa as properties necessárias:
    • lista de produtos que vai representar a fonte de dados que não pode ser modificada
    • lista de produtos filtrados com o mesmo valor da fonte, pois no estado inicial (sem ter um texto para buscar), apresentam todos os produtos.
  • searchProducts(): método para fazer a busca a partir de um texto:
    • primeiro verificamos se o valor do texto é ou não vazio, caso seja vazio, precisamos indicar que os produtos filtrados tenham o mesmo valor da fonte de dados, caso contrário, aplicamos a lógica de filtro.
    • O filtro é feite com o filter() de collection que permite adicionar condições, nesse caso, devolver apenas os produtos com nome ou descrição que contenham o texto recebido via parâmetro.
    • a fonte da busca sempre vai ser a fonte dos dados, pois, além de ter todos os produtos, nunca é alterada.
  • a property filteredProducts é a única que deve ser pública para realizar a leitura na tela.

Agora que temos o código do ViewModel, é só conectar na tela.

Realizando o filtro a partir do evento de mudança de texto

No código de tela, precisamos apenas criar o ViewModel, fazer a leitura dos produtos filtrados e chamar o método de busca de produtos no evento de mudança de texto:

val viewModel by viewModels<ProductsListViewModel>()
val products by viewModel.filteredProducts.collectAsState(initial = emptyList())
Column {
    var searchText by remember {
        mutableStateOf("")
    }
    OutlinedTextField(
        value = searchText,
        onValueChange = {
            searchText = it
            viewModel.searchProducts(it)
        },
        // ...
    )
    ProductsListScreen(
        products = products
    )
}
Enter fullscreen mode Exit fullscreen mode

App em execução apresentando um campo de texto e uma lista de produtos em coluna. Ao digitar no campo de texto, aparece apenas os produtos que contém o nome ou descrição com o valor do campo de texto

Pronto! Implementamos um código para realizar filtros em um App com o Jetpack Compose. É válido ressaltar que essa foi uma implementação simples, mas podem haver mais etapas dependendo do escopo, como busca por diversas fontes, tratamentos etc.

O que você achou desta implementação? Faz de uma maneira diferente? Aproveite e deixe um comentário 😄

Top comments (0)