Swap effect for a range of values about flutter_animate HOT 4 CLOSED

hmm... swapping through a list of items probably doesn't fit the core goals of the library, but it would be easy enough to do with a CustomEffect. I can see value to adding a CrossfadeEffect though. I might take a stab at that today.

Something like:

foo.animate()
  .crossfade(builder: () => etc, opaque: true)

I also likely won't support animating the size (at least initially), since it seems pretty situational, and I have to imagine it must cause some issues with adaptive layouts. I could look into adding it later behind a flag if there's demand.

from flutter_animate.

Added CrossfadeEffect in 40a5c67

Kept it simple for now, but feedback is welcome.

from flutter_animate.

Wow, that was impressively quick - thanks mate! 🎉

I'm still very interested in the list of things. For example: fading through a list of products based on scroll position.

Just making sure I understood your response correctly.

swapping through a list of items probably doesn't fit the core goals of the library

Do you mean that the common pattern is item.animate().doSomething(), i.e. animations are geared towards individual items rather than sets of items? Or do you mean something else?
In case of the former, I could naively see a similar approach to AnimateList work. Something akin to:

[a,b,c].animate(target: 2).fadeTo()

Anyway, since I'm still interested in lists of things, I took your CustomEffect suggestion to heart and gave it a spin. Were you thinking of something like:

  int value = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container().animate(target: value / 4).custom(
                begin: 0,
                end: 4,
                builder: (context, value, _) {
                  return Stack(
                    children: [
                      Container(height: 40, width: 40, color: Colors.red)
                          .animate(target: value != 0 ? 0 : 1)
                          .fade(),
                      Container(height: 40, width: 40, color: Colors.green)
                          .animate(target: value != 1 ? 0 : 1)
                          .fade(),
                      Container(height: 40, width: 40, color: Colors.blue)
                          .animate(target: value != 2 ? 0 : 1)
                          .fade(),
                      Container(height: 40, width: 40, color: Colors.yellow)
                          .animate(target: value != 3 ? 0 : 1)
                          .fade(),
                    ],
                  );
                },
              ),
          TextButton(
              child: Text('+ ($value)'),
              onPressed: () {
                setState(() {
                  value = (value + 1) % 4;
                });
              }),
        ],
      ),
    );
  }

? It does work, which is nice. I guess, the artisanal arithmetic makes changing the list a bit awful but nothing I couldn't abstract away. I'm mostly curious if you had a more straight forward solution in mind. Thanks!

from flutter_animate.

Right, Animate is really aimed at targeting a widget, and manipulating it visually, whereas this is getting into a more state based feature. You could certainly leverage Animate to do the transitions, or even build something more robust using a CustomEffect (as per your proof of concept) or an Effect subclass, but it's unlikely that this will be rolled into the core library.

from flutter_animate.