Bloc: [Example Request] Page animations per transition

[matanshukry]

I started by following the login example https://felangel.github.io/bloc/#/flutterlogintutorial, and I wanted to add a transition animation (fade in/out) when going from splash screen to the login screen.

It took me some time to find an actual way to do it, since most results online were about using routing and MaterialPageRoute, but I ended up using AnimatedSwitcher.

Now I'm stuck figuring out how to animate only when a specific transition occur; from splash screen to login page. I can make sure it happens when the transition goes to the login page, but I can't find a way to get the previous (or current vs future) state, so I can make sure both match.

Either way, I think we should to the site pages about:

1. Routing. Explaining the various methods one can use to route while using Bloc. Currently, I think the examples all follow a single "routing" method with BlocBuilder in 'home' property in MaterialApp, returning different rendered widget depending on state.

1. Previous/current or current/future states. I'm not even sure if it's possible, let alone if it's considered good practice, but either way I think it should be noted.

[felangel]

Hi @matanshukry 👋
Thanks for opening an issue!

Regarding your question, I would recommend using BlocListener in order to animate only when a specific state change occurs. You can check out the SnackBar Recipe for more information.

Thanks for the feedback! I will definitely add additional documentation about routing.

Regarding accessing the previous and current state, BlocListener only passes the current state but you can use a StatefulWidget to keep track of the previous state and then decide whether you want to fade in or not. Hope that helps!

[matanshukry]

@felangel - like this?
builder: (context, state) { final prevState = _prevState; _prevState = state; return _buildContent(context, state, prevState); }

It feels a bit weird though:

1. should I use setState() ? I see no reason to use it, the rendering is updating in that place, but I'm not that sure.
2. are there any constraints things one should know about the builder() callback? Such as will it always be called, or will it be only be called when a state is different than the previous one? If so, how is the check made?

[felangel]

@matanshukry yeah you can just set prevState to state in BlocBuilder's builder method.

1. You don't need to use setState because it doesn't need to trigger a re-render.
2. the builder callback will be called whenever the widget needs to be rebuilt. This is decided by the flutter framework and as a developer you should just worry about returning the correct widget given the BuildContext and state. It may be called many times with the same state by flutter so you shouldn't expect it to be called once per state change. If you want a callback that is executed only once per state change, then you should use BlocListener.

I created a Navigation Recipe to document different ways to do navigation based on "business logic".

Hope that helps and great questions! 👍

[felangel]

Closing this for now but feel free to comment with additional comments/concerns and I'm happy to continue the conversation.

[matanshukry]

I really liked the documentation recipe, awesome! and yeah I can feel we can close this too.

As a side note though, I couldn't find a navigation item in the left side menu. that is, the only way to reach the navigation recipe is through the link you just wrote.

Also, there's something a bit weird with the navigation recipe page. If I'll refresh the page, I'll see the page again. if I do a non-cached refresh (shift+f5 in chrome in windows), I'm getting 404 - not found. I can also do regular refresh again and it will work, order doesn't seem to matter.

[felangel]

@matanshukry thanks!

Can you try again and let me know if you’re still having the same problem. The docs get cached so you sometimes need to do a refresh of the page several times before getting the latest version.

[matanshukry]

@felangel Yeah everything looks great now. there's a link to it from the side navigation, and either refresh works. Great!