Bloc: Provide a documentation on how to make animations with bloc

[mateusfccp]

It would be nice to have a section on homepage/documentation about animations. No matter how I tried, I couldn't use bloc with Animation, as Animations, by default, requires setState, which defeats the purpose of using bloc.

I managed to make some simple thinks with the "pre-made" animation widgets, like AnimatedContainer etc, but it does not have the same flexibility that using Animation and Animation Controller.

What do you think?

[bigworld12]

using setState isn't "prohibited" because you use bloc, it's simply only used for changing the UI state THAT ISN'T RELATED TO DATA.
it's ok to use setState for animations, since you are still in the UI layer.

[felangel]

Hi @mateusfccp 👋
Thanks for opening an issue!

As @bigworld12 mentioned, blocs should be used for business logic. When it comes to animations, you likely don't need a bloc since there is no logic and can simply use an AnimationController and setState within a StatefulWidget.

If you do need to trigger animations based on some business logic you can use BlocListener to listen for state changes and then use your AnimationController in response to different state changes:

class _MyAppState extends State<MyApp> {
  final AnimationController _animationController = AnimationController(...);

  @override
  Widget build(BuildContext context) {
    return BlocProvider<MyBloc>(
      builder: (context) => MyBloc(),
      child: BlocListener<MyBloc, MyState>(
        listener: (context, state) {
          if (state is MyStateA) {
            _animationController.animateTo(...);            
          }
          if (state is MyStateB) {
            _animationController.animateTo(...);            
          }
        },
        child: ...
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

Hope that helps! 👍

[mateusfccp]

I appreciate your help and the provided _snippet_.

As @bigworld12 mentioned, blocs should be used for business logic. When it comes to animations, you likely don't need a bloc since there is no logic and can simply use an AnimationController and setState within a StatefulWidget.

I may be wrong, but I though BLoC was also a way to avoid using setState so the entire widget tree won't be redrawn, which would result on better performance. Considering this, won't use setState with animation less performatic?

Thanks, in advance.

[tenhobi]

@mateusfccp BLoC also makes widget tree redrawn, using BlocBuilder for example. Check for example how StreamBuilder works, this is very similar.

The purpose is not to not use setState, we use BLoC or some other state management to keep things separated (UI vs logic), so we can use advanced methods for managing state, run logic code, testing, etc.

Animation, on the other hand, is not necessarily a part of business logic, and therefore it might not require BLoC to manage drawing and you might be good to handle the animation using setState and other methods w/o using BLoC at all. It all depends on your needs.