How to use multiple Blocs for different UIs?

user_12326975 0
Viewed 300

I have a Landing UI that doesn't have any Blocs, a Register UI with it's Bloc, a Verification UI with it's Bloc, and a Home UI with it's Bloc. In each one I defined the BlocProvider.of. In the main I defined at the Home of Material App a Multiple Bloc Provider with each has it's child and the main child of the provider is the landing Page like this :

 home: MultiBlocProvider(
        providers: [
           BlocProvider<UserBloc>(
             create: (context) => UserBloc(UsRepoImp()),
              child: RegisterUi(),
           ),
           BlocProvider<VerificationBloc>(
             create: (context) => VerificationBloc(VerRepoImp()),
               child: VerificationUi(),
         ),
           BlocProvider<HomeBloc>(
             create: (context) => HomeBloc(HomeRepoImp()),
               child: HomeUi(),
         ),
        ],
        child: LandingUi(),
      ),

and one more thing the Verification UI is returned from a Register Bloc state like so :

 BlocBuilder<UserBloc, UserState>(
                    builder: (context, state) {
                      if (state is UserLoading) {
                        return CircularProgressIndicator(
                          valueColor:
                              AlwaysStoppedAnimation<Color>(Color(0xff7b68ee)),
                        );
                      } else if (state is UserRegistered) {
                        return VerifyAccount();
                      } else if (state is UserError) {
                        return Text('Error');
                      }
                      return SizedBox(
                        height: 10.0,
                      );
                    },
                  ),

But when I run I have an error that the Bloc shouldn't have an ancestor. How am I supposed to make these Blocs to communicate with UI changings correctly?

bloc flutter state-management builder widget
1 Answers

I think you are using MultiBlocProvider in a wrong way. you should not provide child there, instead only provide the argument of the create function there, and then in your widget tree below this MultiBlocProvider you can use BlocBuilder to listen to any of the provided blocs above in the tree, and if you need to listen to multiple blocs in the same widget, you need to nest BlocBuilders.

example:

  @override
  Widget build(BuildContext context) => MultiBlocProvider(
        providers: [
          BlocProvider<RecorderBloc>(
            create: (context) => myFirstBloc(),
          ),
          BlocProvider<PermissionBloc>(
            create: (context) => mySecondBloc(),
          )
        ],
        child:myChild()
      );

Then inside my_child.dart :

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MyFirstBloc, MyFirstBlocState>(
      builder: (context, myFirstBlocState) =>
          BlocBuilder<MySecondBloc, MySecondBlocState>(
        builder: (context, secondBlocState) {
          //return widget based on the states of both blocs...
        },
      ),
    );
  }
user_91422790
Related