Bloc: Using animation when BlocBuilder state changes

[samramez]

Is your feature request related to a problem? Please describe.
Not really. I just can't figure out a clean way to solve my problem.

Describe the solution you'd like
As a states changes inside BlocBuildder, I wish to be able to change the state using animations such as "fade animation". Normally without using flutter_bloc, AnimatedSwitcher is used for this purpose but I wasn't able to find a clean way to achieve it.

Describe alternatives you've considered
I tried calling setState() each time the state is changed but that's not a clean way to do it.

Additional context
Let me know if I can provide further context.

[felangel]

Hi @samramez 👋
Thanks for opening an issue!

I would highly recommend using BlocListener to manage animations (as long as there's business logic involved). If there's no business logic involved then I don't recommend creating a bloc just for animation state (you can use a StatefulWidget for that). If you do have business logic and it makes sense to use a bloc, then you can interact with an AnimationController in the BlocListener's listener callback to manage the animation.

Let me know if that helps! If you still have questions, it'd be great if you could put together a simple sample app which illustrates the problem you're facing 👍

[samramez]

Thanks @felangel for always being responsive.

good to know.
Do you happen to have access to an example for this which you can share here?

For example in the simple example below:

              BlocConsumer<OwnerCubit, OwnerState>(builder: (context, state) {

                    if (state is Success) {
                      return OwnerWidgets();
                    } 

                    else if (state is Loading) {
                      return CircularProgressIndicator();
                    } 

                   else {
                      // initial state. We will return empty view.
                      return Container();
                    }
                  },
                   listener: (context, state) {      

                   }
                 )

Are you suggesting that I wrap my OwnerWidget() with AnimatedSwitcher inside the listener ?

listener: (context, state) {      
       if (state is Success) {
            return AnimatedSwitcher(
                   child: OwnerWidget(),
            )            
        }
 }           

[narcodico]

Hi @samramez 👋

In case of an implicitly animated widget like AnimatedSwitcher you can make use of the builder instead.

BlocBuilder<OwnerCubit, OwnerState>(
      builder: (context, state) {
        return AnimatedSwitcher(
          child: state is Success
              ? OwnerWidget()
              : const CircularProgressIndicator(),
        );
      },
    )

[samramez]

thanks @RollyPeres and @felangel