Provide an example for custom FlowController

[magicleon94]

Hi, I've been trying to figure out how could I control the flow via BLoC states (I've been working with flutter_bloc).

I tried implementing FlowController and using it from my bloc but I had no luck. Moreover, controlling everything from a bloc will make me lose the "pop" event so I'm not sure of what "Since Flow Builder represents navigation as a function of state, it can be used with whatever state management solution you have chosen" means.

Can you provide an example that shows how I can hook up the navigation accordingly to the state change of a bloc?

Even if not controlling the flow from a bloc it would be great if FlowController could provide some sort of event to listen to in order to update the bloc accordingly to page changes!

Thank you!

[felangel]

Hi @magicleon94 👋 Thanks for opening an issue!

Can you please provide some additional context regarding the current use-case you have? It sounds like you're trying to use FlowBuilder to notify bloc but I would generally recommend setting the FlowState in response to a bloc state. You can achieve this by wrapping FlowBuilder in a BlocBuilder or using context.watch/context.select. Then you can just notify the bloc as usual and changes in the bloc state will update the flow.

I'll create some additional examples shortly but in the meantime you can take a look at https://github.com/felangel/flow_builder/tree/master/example/lib/location_flow.

Let me know if that helps and if not can you please provide additional context and potentially a sample app which illustrates the issue you're facing? Thanks! 🙏

[magicleon94]

Hi! Thank you for your quick response :)

Sorry if I was unclear, what I'm trying to achieve is exactly what you're saying: I'd love to steer the navigation in response to a bloc state. I tried wrapping the FlowBuilder with a BlocBuilder but each time a state is yielded the rebuild causes the navigation to snap without transition (probably I should have tried passing a key in order to preserve the state of the FlowBuilder?). Doing so would be great but it will leave the bloc totally unaware in the case the uses decides to go back in navigation, that's why I've talked about communicating "the other way around", so that I could notify the bloc by saying "hey the user went back, clear the state about the popped page!" or something like this.

I'll take a look to the linked example as well as trying passing a key to the FlowBuilder, and I'll gladly provide a sample app about what I'm talking about as soon as I can (I've tasks at work too so I'm trying to balance "discovering awesome things" and "keep up with deadlines").

Great package by the way, it really does something I've been dreaming about for weeks since Navigator 2.0 came out on stable. I did some tries but couldn't handle the iOS back swipe and the boilerplate so well... great job on this!

I'll be in touch asap, thank you! 🚀

Antonello

[magicleon94]

Hi there, I've published a demo here: https://github.com/magicleon94/flow_builder_bloc_test

I've described the problem in the README but I'll paste it here too:

The TestFlow has three steps, each step adds an event to the bloc and the bloc yields an update state for each action, and a FlowCompleted event to allow the flow to pop away with the final result state.

Issues encoutered

If we go through the process linearly by presisng next in each page, everything behaves as expected. If we go back during the process the bloc has no clue of what's happening so something like this might happen:

• The user taps Next on Step 1 which adds the FlowStep1Done event
• Bloc yields FlowState(feature1:true, feature2:null, feature3: null) (I've explicitly written the null values here)
• The flow navigates to Step 2
• The user hits back, so the flow goes back to Step 1
• The user now taps again Next on Step1 which will add once again the FlorStep1Done event
• The bloc will yield the same state FlowState(feature1:true, feature2:null, feature3: null) which is identical to the previous one, hence no rebuild will happen and the flow will stay the same without navigating to Step 2.

The good thing would be to notify the bloc upon popping the page in order to reset feature1 to null as the beginning, undoing the action that led to navigating to Step 2 in the first place.

Messing with the equality of the state is not an option here, I believe.

The good thing is that by adding the key I was able to rebuild correctly the FlowBuilder obtaining the nice transition, so the last "problem" I'm facing is how "do I undo the popped step upon popping" in a clean way.

Hope that's clearer now, I'm willing to clarify further if needed.

Thank you very much!

[magicleon94]

Hi there, I've submitted #11 to propose what I think it could be of help to identify the pop event.

Initially I thought of passing the popped state as an argument of the callback but since in case of using BlocBuilder rebuilds are not triggered by the update method of FlowController the _history is not consistent and needs to be held on the state management side (on the bloc, in this case).

The callback is totally optional!

Let me know if I can improve this :)