How can I call the method of one StateNotifier from another StateNotifier? I want to call addNewHabit (in the top class) from submitData (in the lower class).
Here are the bodies of the classes:
class HabitStateNotifier extends StateNotifier<List<Habit>> {
HabitStateNotifier(state) : super(state ?? []);
void startAddNewHabit(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (_) {
return NewHabit();
});
}
//this one right here
void addNewHabit(String title) {
final newHabit = Habit(title: title);
state.add(newHabit);
}
void deleteHabit(String id) {
state.removeWhere((habit) => habit.id == id);
}
}
and
class TitleControllerStateNotifier
extends StateNotifier<TextEditingController> {
TitleControllerStateNotifier(state) : super(state);
void submitData() {
if (state.text.isEmpty) {
return;
} else {
//call 'addNewHabit' from above class
}
}
}
What is the correct way to do this?
Technically, not a recommended pattern to use as StateNotifiers are controllers and you shouldn't really be calling controllers inside controllers.
But this is pretty easy to accomplish as you can read other providers inside a provider.
final habitProvider = StateNotifierProvider((ref) => HabitStateNotifier());
final userControllerProvider = StateNotifierProvider((ref) {
return UserController(
habitProvider : ref.read(habitProvider),
);
});
And then use the reference and call
class TitleControllerStateNotifier
extends StateNotifier<TextEditingController> {
TitleControllerStateNotifier(state, HabitStateNotifier habitProvider) :
habit = habitProvider,
super(state);
final HabitStateNotifier habit;
void submitData() {
if (state.text.isEmpty) {
return;
} else {
habit.addNewHabit(state.text);
}
}
}
Set up a StateNotifierProvider (from Riverpod), which will give you back a StateNotifier after running the create callback. This callback has a (ref) parameter on which you can call ref.read and ref.watch to fetch other providers in either non-depending or depending mode.
Related
I need to call the fetchProfile() method and get the profileState.user data in the initState method right after the page opens. Tell me, how can I write this correctly, how can I correctly call Cubit inside the initState method?
#override
void initState() {
SchedulerBinding.instance.addPostFrameCallback((_) {
_emailDialog();
});
super.initState();
}
cubit
class ProfileCubit extends Cubit<ProfileState> {
final UserRepository _repository;
ProfileCubit(this._repository) : super(ProfileInitial());
Future fetchProfile() async {
try {
final User? user = await _repository.me();
if(user != null) {
emit(ProfileLoaded(user));
} else {
emit(ProfileError());
}
} catch (_) {
emit(ProfileError());
}
}
state
abstract class ProfileState {}
class ProfileInitial extends ProfileState {}
class ProfileLoaded extends ProfileState {
final User? user;
ProfileLoaded(this.user);
}
class ProfileError extends ProfileState {}
If your intention is to run the method fetchProfile directly when the widget (page in this case) will be built, I'd run the method when providing the bloc using cascade notation as such:
home: BlocProvider(
create: (_) => ProfileCubit()..fetchProfile(),
child: YourPageOrWidget(),
),
The fetchProfile() method will be called as soon as the Bloc/Cubit is created.
Note that by default, the cubit is created lazily, so it will be created when needed by a BlocBuilder or similar. You can toggle that so it isn't created lazily.
You can check the Readme of flutter_bloc. There is a full tutorial and you can learn a lot.
#override
void initState() {
super.initState();
context.read<ProfileCubit>().fetchProfile()
}
Wrap BlocListener for your widget tree. You can listen to ProfileLoaded state here and get the user data immediately.
BlocListener<ProfileCubit, ProfileState >(
listener: (context, state) {
// Do whatever you want.
},
child: Container(),
)
I have two controllers using the changenotifiers in my app and I want to notify listeners of A from B. I have be trying two different methods for the same.
Method 1
(Controller A):
class DrawController extends ChangeNotifier {
void clearCanvas() {
selectedText = '';
shouldClearCanvas = true;
currentDrawPoints.initialPoint = null;
currentDrawPoints.endPoint = null;
print(currentDrawPoints.initialPoint);
notifyListeners();
}
}
Calling it from (Controller B):
class GameController extends ChangeNotifier {
DrawController drawController = DrawController();
void someFunction(){
drawController.clearCanvas();
notifyListeners();
}
}
The above method doesn't work. It does execute the function and changes the value but it does not change the UI (does not rebuild the widget).
Method 2:
(Controller A):
class DrawController extends ChangeNotifier {
void clearCanvas() {
selectedText = '';
shouldClearCanvas = true;
currentDrawPoints.initialPoint = null;
currentDrawPoints.endPoint = null;
print(currentDrawPoints.initialPoint);
notifyListeners();
}
}
Calling it from (Controller B):
class GameController extends ChangeNotifier {
DrawController drawController = DrawController();
void someFunction(BuildContext context){
Provider.of<DrawController>(context, listen: false).clearCanvas();
}
}
This second method works and it updates the UI too but I think this is the wrong method of doing it.
As using it after async await gives the warning "Do not use BuildContexts across async gaps."
class GameController extends ChangeNotifier {
DrawController drawController = DrawController();
void someFunction(BuildContext context) async {
User? userData = await localStorage.getUserData();
Provider.of<DrawController>(context, listen: false)
.clearCanvas(); //Gives warning "Do not use BuildContexts across async gaps."
}
}
Can anyone tell me the correct way of doing it.
since one cannot extend an extension of a class such as class MyBloc extends Bloc<MyEvent, MyState>, what is a cleanest way to get some functions out of my bloc file? Since the logic is a bit more complex, I would like to get some sub functions out like in
#override
Stream<MyState> mapEventToState(MyEvent event) async* {
yield* event.map(
loadRequested: (e) => _mapLoadRequestedToState(),
dataEntered: (e) => _mapDataEnteredToState(),
);
}
Stream<LogicChainState> _mapLoadRequestedToState() async* {
final dataRaw = loadData();
final dataProc = initData(dataRaw);
yield doSomeMore(dataProc);
}
I don't like the idea of using global functions. I could create a class
class MyBlocUtils {
MyData initData(MyData dataRaw) {
...
}
MyData doSomeMore(MyData dataProc) {
...
}
}
which still isn't as nice as using a function defined within the class MyBloc.
Any advice?
If all you want is to separate your methods into multiple files, but keep them in the same class, you could use extension methods.
my_bloc.dart
part 'my_bloc_utils.dart';
class MyBloc extends Bloc<MyEvent, MyState> {
Stream<LogicChainState> _mapLoadRequestedToState() async* {
final dataRaw = loadData();
final dataProc = initData(dataRaw);
yield doSomeMore(dataProc);
}
}
my_bloc_utils.dart
part of 'my_bloc.dart';
extension MyBlocUtils on MyBloc {
#override
Stream<MyState> mapEventToState(MyEvent event) async* {
yield* event.map(
loadRequested: (e) => _mapLoadRequestedToState(),
dataEntered: (e) => _mapDataEnteredToState(),
);
}
}
You can access the methods in just the same way as you keep everything in a single file:
import 'my_bloc.dart';
final myBloc = MyBloc();
final stream = myBloc.mapEventToState(MyEvent());
I am trying to find solution to manage async queries. For example, i have internet shop and i want to update all products and categories when city is changed. And i don't want to keep all async logic on ui. In order to achieve this result, i've created this bloc:
class AppEvent {
String message;
AppEvent({this.message = ''});
}
class EventsBlock extends Bloc<AppEvent, AppEvent> {
EventsBlock() : super(AppEvent());
#override
Stream<AppEvent> mapEventToState(AppEvent event) async* {
yield event;
}
}
final events = EventsBlock();
Then, i can use it like this:
class CityCubit() {
CityCubit() : super(CityState());
Future<void> changeCity() async {
await api.changeCity();
events.add(AppEvent(message: 'cityChanged'));
}
}
class CategoryCubit extends Cubit<CategoryState> {
CategoryCubit() : super(CategoryEmptyState()) {
events.stream.listen((e) {
if(e.message == 'cityChanged') {
fetchCategories();
}
});
};
Future<void> fetchCategories() async {
//fetch categories
}
}
class ProductCubit extends Cubit<ProductState> {
ProductCubit() : super(ProductEmptyState()) {
events.stream.listen((e) {
if(e.message == 'cityChanged') {
fetchProducts();
}
});
};
Future<void> fetchProducts() async {
//fetch products
}
}
It's something like eventBus pattern. But i am not sure that it's a correct way to use bloc. I've tried to use redux + redux saga, but it has a lot of boilerplate and i believe that flutter has better solution to manage things like that.
Your general idea is ok, but I can't see a real need for the EventsBloc class. In fact, it is kinda strange that you use the same class for the events and for the states of this bloc, and simply yield the event you receive. It's like EventsBloc could be a simple stream.
Here's a way to go, turning CityCubit into an actual bloc (and also with some error handling, which is something you can do gracefully with bloc):
abstract class CityState {}
class CityInitial extends CityState {}
class CityLoadingCities extends CityState {}
class CityCitiesLoaded extends CityState {}
class CityLoadError extends CityState {}
abstract class CityEvent {}
class CityLoadCities extends CityEvent {}
class CityBloc<CityEvent, CityState> {
CityBloc() : super(CityInitial());
#override
Stream<AppEvent> mapEventToState(CityEvent event) async* {
if(event is CityLoadCities) {
yield CityLoadingCities();
try {
await api.changeCity();
yield CityCitiesLoaded();
} catch (error) {
yield CityLoadError();
}
}
}
void changeCity() {
add(CityLoadCities());
}
}
Now you can do this inside any other bloc:
instanceOfCityBloc.listen((cityState) {
if(cityState is CityCitiesLoaded){
// do stuff
}
});
I ended up with this code:
class CityChangedEvent {
int cityId;
CityChangedEvent(this.cityId);
}
EventBus eventBus = EventBus();
mixin EventBusMixin {
StreamSubscription<T> listenEvent<T>(void Function(T) subscription) =>
eventBus.on<T>().listen(subscription);
void shareEvent<S>(S event) => eventBus.fire(event);
}
class CityCubit extends CityCubit<CityState> with EventBusMixin {
CityCubit() : super(CityInitialState());
Future<void> changeCity(cityId) async {
try {
emit(ChangeCityLoadingState());
final result = await api.changeCity(cityId);
if(result.success) {
emit(ChangeCitySuccessState());
shareEvent(CityChangedEvent(cityId));
}
} catch (_) {
emit(ChangeCityErrorState());
}
}
}
class CategoryCubit extends Cubit<CategoryState> with EventBusMixin {
CategoryCubit() : super(CategoryEmptyState()) {
listenEvent<CityChangedEvent>((e) {
fetchCategories(e.cityId);
);
}
Future<void> fetchCategories(cityId) async {
try {
emit(CategoryLoadingState());
final categoriesList = await fetchCategoriesApi();
emit(CategoryLoadedState(categories: categoriesList));
} catch (_) {
emit(CategoryErrorState());
}
}
}
Now, i can communicate between blocs without the need to instantiate or inject their instances. Thanks to this library https://pub.dev/packages/event_bus
I have a cubit that listens to a stream of messages, and emits a state which holds the messages.
In the screen, I am using a BlocProvider to access the cubit, and a BlocBuilder to display
the messages.
In instances like below, do I need to close the StreamSubscription created on listen()? Is there a clean way to do it?
class MessageCubit extends Cubit<MessageState> {
final GetMessagesUseCase getMessagesUseCase;
MessageCubit({this.getMessagesUseCase}) : super(MessageInitial());
Future<void> getMessages({String senderId, String recipientId}) async {
emit(MessageLoading());
try {
final messagesStreamData = getMessagesUseCase.call();
//This is where I listen to a stream
messagesStreamData.listen((messages) {
emit(MessageLoaded(messages: messages));
});
} on SocketException catch (_) {
emit(MessageFailure());
} catch (_) {
emit(MessageFailure());
}
}
}
You don't need to close the subscription, but you should as good practice to avoid potential memory leaks. Since it is so straightforward it's not any sacrifice.
Create a class variable of type StreamSubscription<your type>. Let's say it's named sub.
In getMessages before listen: await sub?.cancel()
Then sub = messagesStreamData.listen(...
Override the Cubit's close method and run the same command as in bullet 2.
Full code:
class MessageCubit extends Cubit<MessageState> {
final GetMessagesUseCase getMessagesUseCase;
// Added
StreamSubscription<YOUR_MESSAGES_TYPE> sub;
MessageCubit({this.getMessagesUseCase}) : super(MessageInitial());
Future<void> getMessages({String senderId, String recipientId}) async {
emit(MessageLoading());
try {
final messagesStreamData = getMessagesUseCase.call();
// Added
await sub?.cancel();
//This is where I listen to a stream
sub = messagesStreamData.listen((messages) {
emit(MessageLoaded(messages: messages));
});
} on SocketException catch (_) {
emit(MessageFailure());
} catch (_) {
emit(MessageFailure());
}
}
// Added
#override
Future<void> close() async {
await sub?.cancel();
return super.close();
}
}