Dominando as extensões de contexto - context.watch

Por que isso importa?

Se você utiliza o Bloc como gerenciador de estado já se deparou com a situação na qual você gostaria de deixar seu Widget reativo baseado no estado do seu Bloc porém sem a necessidade de declarar um BlocBuilder. Uma das formas para isso é utilizarmos as extensões de contexto.

Cuidados que você deve tomar

O context.watch é uma função que permite que o nosso widget reaja às mudanças de estado do Cubit. Entretanto, o seu uso incorreto pode levar a erros e comportamentos inesperados. Por exemplo, se você usar context.watch fora do método build, Flutter pode lançar um erro de “contexto inválido”.

Além disso, é importante notar que o context.watch causa a reconstrução do widget sempre que o estado do Cubit muda. Portanto, se você tem uma operação custosa dentro do seu widget, o seu aplicativo pode sofrer de problemas de performance.

Como funciona

O context.watch é um extension method no BuildContext que obtém o estado mais recente do Cubit e reconstrói o widget sempre que esse estado muda.

Quando você chama context.watch<MyCubit>(), você está dizendo ao Flutter para “observar” o MyCubit e reconstruir o widget sempre que o estado do MyCubit mudar.

Exemplo prático

Vamos considerar um simples Cubit que controla a contagem de cliques:

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
 
  void increment() => emit(state + 1);
}

E um widget que utiliza este Cubit:

class CounterButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = context.watch<CounterCubit>();
    return TextButton(
      child: Text('Você pressionou o botão ${counter.state} vezes'),
      onPressed: () => counter.increment(),
    );
  }
}

Neste exemplo, cada vez que o botão é pressionado, o estado do CounterCubit é incrementado e, como o CounterButton está observando o CounterCubit, ele é reconstruído com o novo valor.

Conclusão

Em nosso exemplodemonstramos na prática o uso do context.watch. Saber aplicá-lo tornará seus Widgets mais reativos.

No próximo artigo, falaremos sobre outra extensão de contexto, o context.select. Ele funciona de forma semelhante, mas é mais seletivo na hora de decidir quando o rebuild deve ocorrer.

Até lá!