What is the alternative to notifylistners() in flutter_bloc?

Question

I am new to flutter_bloc and need some clarity.

I am developing an app similar to TikTok, that has a PageView with VideoPlayers. I want to toggle Like, Save, and Follow buttons on the screen. The parent widget is wrapped in FeedBloc BlocBuilder already, so how should I handle updating the widgets without using StatefulWidgets?

In Provider, we simply use Selector or Consumer widgets wherever we want and just call notifyListerners(). What is the alternative to notifyListeners() in flutter_bloc?

I just want to update widgets when variable values change and the state remains the same.

score 1 · Answer 1 · answered Jun 16 '23 at 21:44

1

You use emit for that as well. Just make sure that the state is comparable. So two versions of same state can be differentiated using equals and hashcode.

answered Jun 16 '23 at 21:44

Robert Sandberg

6,832
2
12
30

Could you please share a sample of a Switch() getting the value from the BLoC variable isEnabled when the Switch is changed, an Event is called which changes the variable isEnabled, and the Switch rebuilds without affecting the parent widget tree? – Prerak Jun 16 '23 at 22:10
Sorry, that is a separate question and should not be part of this question nor these comments. Please start a new question for that. Make sure you present your best effort with a minimal reproducible example and explain your specific problem. Close this question by accepting the answer – Robert Sandberg Jun 17 '23 at 06:16

score 1 · Answer 2 · answered Jun 17 '23 at 14:52

When you use notifyListeners() in provider so basically, it means that you want to update this value based on different state but bloc is works on stream where you need to emit the state like if your app is in initial state then you emit your initial widget and on loading state you can emit your loading state through bloc.

But if you want to know that is there similar related to Consumer then answer is Yes. Bloc Builder is widget which rebuild the widget based on the different event.

bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';

abstract class TextFormEvent {}

class ChangeImageOnTextForm extends TextFormEvent {}

class LoadingImageEvent extends TextFormEvent {}

abstract class ImageState {
  int get number => 0;
}

class FetchingState extends ImageState {}

class FetchedState extends ImageState {
  @override
  int number;
  FetchedState(this.number);
}

class BLocExample extends Bloc<TextFormEvent, ImageState> {
  BLocExample() : super(FetchingState()) {
    on<LoadingImageEvent>((event, emit) {
      emit(FetchingState());
    });
    on<ChangeImageOnTextForm>((event, emit) {
      emit(FetchedState(state.number));
    });
  }
}

// From UI Side

BlocBuilder<BLocExample, ImageState>(
              builder: (context, state) {
                print(state);
                if (state is FetchingState) {
                  return const CircularProgressIndicator();
                } else if (state is FetchedState) {
                  print(state.number);
                  return SizedBox(
                    height: 200,
                    width: 500,
                    child: Image.network(
                      frameBuilder:
                          (context, image, frame, wasSynchronouslyLoaded) {
                        if (frame == null) {
                          return const LinearProgressIndicator();
                        } else {
                          return image;
                        }
                      },
                      'https://source.unsplash.com/random?sig=${state.number}',
                    ),
                  );
                }

From above sample code you can understand that how bloc is work based on the different state and event.

Thank you @AAJ! In the code above you are emitting different `states`, which would coz other widgets to render different code again. If there are multiple `BlocBuilders` in the same state, how can I `emit` for that specific widget? — Prerak, Jun 18 '23 at 19:57
@Prerak Nop you need to render Widget based on state. Suppose now if I want change condition that if number is even then show image otherwise not then I will go with condition using BlocBuilders like if our count is even and state then show image othe circular indicator. — AJJ, Jun 19 '23 at 18:23

What is the alternative to notifylistners() in flutter_bloc?

2 Answers2