animate_to 0.1.0

Animates widgets to a target widget as an overlay

---

Basic usage

1- Create an AnimateToController

final _animateToController = AnimateToController();

copied to clipboard

2- Wrap the target widget ( the one to animate to) with an AnimateTo widget and pass it the controller

AnimateTo(
    controller: _animateToController,
    child: const Text('Target'),
 ),

copied to clipboard

3- Wrap the widgets you wish to animate with AnimateFrom widget. The AnimateFrom widget requires a global key which you can create an pass the normal way or have the AnimateToController generate it for you from a given tag.

AnimateFrom(
   key: _animateToController.tag('animate1'), // regularGlobalKey
   child: const Text('Animatable'),
 ),

copied to clipboard

now trigger the animation by calling

_animateToController.animateTag('animate1');
// or by key 
_animateToController.animate(regularGlobalKey);

copied to clipboard

complete code

Scaffold(
 body: SizedBox(
   height: 300,
   child: Column(
     children: [
       AnimateTo(
         controller: _animateToController,
         child: const Text('Target'),
       ),
       const SizedBox(height: 100),
       AnimateFrom(
         key: _animateToController.tag('animate1'),
         child: const Text('Animatable'),
       ),
       const SizedBox(height: 24),
       ElevatedButton(
         onPressed: () {
           _animateToController.animateTag('animate1');
         },
         child: const Text('Animate'),
       ),
     ],
   ),
 ),
)

copied to clipboard

Result

Animating The target widget (the child of AnimateTo)

AnimateTo provides a builder property to animate it's child on new arrivals (On Single animation completion)

AnimateTo(
   controller: _animateToController,
   child: MyCartIcon(),
   builder: (context, child, animation) {
     return Transform.translate(
       offset: Offset(sin(animation.value * 3 * pi) * 3, 0),
       child: child,
     );
   }
),

copied to clipboard

Transporting data along with the animation

It's possible to have AnimateFrom widget carry data to the target widget by assigning the data you need to transport to the AnimateFrom.value property and receive it inside AnimateTo.onArrival callback

SizedBox(
   height: 320,
   width: 240,
   child: Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: [
       AnimateTo<Color>(
         controller: _animateToController,
         child: Circle(size: 100, color: targetColor),
         onArrival: (color) { // called on animation complete
           setState(() {
             targetColor = Color.lerp(targetColor, color, .5)!;
           });
         },
       ),
       Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           for (int i = 0; i < 3; i++)
             AnimateFrom<Color>(
              /// whatever is passed here is received inside of `AnimateTo.onArrival`
               value: [Colors.red, Colors.green, Colors.orange][i],
               key: _animateToController.tag(i),
               child: InkWell(
                 borderRadius: BorderRadius.circular(24),
                 onTap: () => _animateToController.animateTag(i),
                 child: Circle(
                   size: 50,
                   color: [Colors.red, Colors.green, Colors.orange][i].withOpacity(.85),
                 ),
               ),
             ),
         ],
       ),
     ],
   ),
 )

copied to clipboard

Support animate_to

You can support animate_to by liking it on Pub and staring it on Github, sharing ideas on how we can enhance a certain functionality or by reporting any problems you encounter and of course buying a couple coffees will help speed up the development process.