ValueNotifier: O que é e como usar?

Edson Melo Souza
Flutter Brasil
Published in
2 min readJul 25, 2024

--

No Flutter, há várias formas de atualizar a tela e fornecer uma resposta ao usuário. Entre essas abordagens, o ValueNotifier é uma das opções eficazes que exploraremos neste post. Vamos detalhar como o ValueNotifier funciona e como utilizá-lo para gerenciar estados.

Motivos para usar:

  • Facil
  • Versatilidade
  • Nativo
final counter = ValueNotifier(0)

Como mostrado acima, essa é uma sintaxe muito limpa e objetiva. Aqui temos value notifier de inteiro que é nosso contador, entao aqui é só consumir o nosso value notifier.

Como o ValueNotifier é simplesmente atribuído a uma variável, podemos usá-lo tanto diretamente na tela quanto extraí-lo para dentro de um controller.


class _HomePageState extends State<HomePage> {
final counter = ValueNotifier(0);

@override
Widget build(BuildContext context) {
return const Scaffold();
}
}

Ou

class HomeController {
final counter = ValueNotifier(0);
final itens = ValueNotifier<List<String>>([]);

void increment() {
counter.value++;
}

void loadItens() {
itens.value = ['Item 1', 'Item 2', 'Item 3'];
}
}

Esse segundo exemplo é mais interessante porque, dentro do controller, podemos organizar a lógica de negócio e gerenciar vários ValueNotifiers. Em uma tela, por exemplo, podemos ter diferentes funcionalidades, como listar itens na página inicial e manter um contador separado. Dessa forma, cada ValueNotifier pode operar de maneira independente, sem interferir entre si, e a lógica de cada um fica bem organizada.

Embora a facilidade de uso possa dar a impressão de que o ValueNotifier não é uma solução nativa, ele é, na verdade, completamente nativo. O ValueNotifier estende o ChangeNotifier, que, por sua vez, é uma implementação do padrão Observer, a base da programação reativa.

Espero ter despertado seu interesse pelo ValueNotifier e também ter ajudado você a construir muitos projetos com o Flutter. Para ter acesso a mais conhecimentos sobre Flutter você pode entrar no FlutterBrasil no Discord.

No próximo artigo teremos ValueNotifier e Pattern state.

Prazer, meu nome é Edson. Fico muito feliz em saber que você quer conhecer mais sobre o Flutter, Bye.

Minhas redes:

Linkedin: https://www.linkedin.com/in/edson-souza-flutter/

Github: https://github.com/EdsonMello-code

--

--

Edson Melo Souza
Flutter Brasil

Programador Mobile flutter, react native, kotlin para android e typescript. Apaixonado pelas melhores tecnologias do mercado.