Search code examples
flutterbloc

Two flutter cubits on one screen


I have a screen (a stateless widget) in which I have two buttons, one to check if Firebase account is verified and the second for resending verification email. These two processes are obviously separate and I need to separate them in two cubits.

So, my question is how can I do it?

I guess I can do that with MultiBlocProvider, but I am not sure how can I get states from those two cubits in this scenario? Is there a best practice defined for this type of scenario?


Solution

  • First, it is no problem to run a MultiBlocProvider to the screen and then have two BlocBuilders in parallel, e.g. one for each button or nest two BlocBuilders (which is essentially what .watch() would be if it is in another BlocBuilder).

    But I have an opinionated answer as well. The two buttons will as you say run two separate processes, but I wouldn't separate them into two cubits as they are so tightly linked to the same feature and essentially the same state of that feature. I think a clean solution will be one cubit with separate methods, a HandleFirebaseVerificationCubit with a resendEmail()-method and a checkVerification()-method. Because I guess you'd want to either hide or disable buttons depending on a common state (e.g. NotVerified/Verified) etc.

    I'd compare this to a form where you have a backend handling e.g. some validation which is triggered by a buttonpress and another button fetching some data to assist with populating textfields (e.g some address) You'd probably have one cubit for the entire form.