Question 188441 in Flutter Question posted in
The official Flutter documentation can be found here.

What is the alternative to notifylistners() in flutter_bloc?

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search