Dominando as extensões de contexto - context.select

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 em um atributo no estado do seu Bloc. Uma das formas para isso é utilizarmos as extensões de contexto.

Cuidados que você deve tomar

Enquanto usa o context.select, é crucial prestar atenção ao que seu widget está ouvindo. Se você tem um estado com várias propriedades, como neste exemplo com count e message, e seu widget só precisa ser reconstruído para uma dessas propriedades, use context.select.

Como funciona

O context.select permite que você ouça mudanças específicas no estado. No código de exemplo abaixo, MyWidget só vai ser reconstruído quando count mudar. Mesmo se message mudar, MyWidget não se reconstruirá porque está apenas ouvindo a count através do context.select.

Exemplo prático

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter/material.dart';
 
class MyCubit extends Cubit<MyState> {
  MyCubit() : super(MyState(count: 0, message: 'Olá'));
 
  void increment() => emit(state.copyWith(count: state.count + 1));
  void changeMessage(String newMessage) => emit(state.copyWith(message: newMessage));
}
 
class MyState {
  final int count;
  final String message;
 
  MyState({required this.count, required this.message});
 
  MyState copyWith({int? count, String? message}) {
    return MyState(
      count: count ?? this.count,
      message: message ?? this.message,
    );
  }
}
 
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('${context.select((MyCubit cubit) => cubit.state.count)}');
  }
}

Conclusão

Entender o uso correto do context.select no gerenciamento de estado do Cubit pode fazer uma grande diferença no desempenho do seu aplicativo Flutter.

Esse é o nosso último post sobre as extensões de contexto, espero que você tenha gostado até aqui!