Flutter Worm Like Button Movement Transition

Worm Movement Like Button Transition Animation

We can implement animation using SingleTickerProviderStateMixin mixin in Flutter. But simple_animation package provides a clean way to make animations.

The animation will look like

Button Animation

When the button is pressed, two things will happen

1. Button (the gray area) will move
2. The width of the button will increase and decares to give the feeling of a Warm shrinking and expanding

Mr. Flexi

The construction of the button is very simple. This is nothing but a Stack of

a. Border

b. Text

c. The translucent button

Button Construction

Now let's look at the simple_animation package. Here CustomAnimation widget is used. From the official documentation —

CustomAnimation<Color>(
  tween: Colors.red.tweenTo(Colors.blue),
  builder: (context, child, value) {
    return Container(color: value, width: 100, height: 100);
  },
  animationStatusListener: (AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      print("Animation completed!");
    }
  },
);

If we look at the properties that CustomAnimation takes

Animatable<dynamic> tween

CustomAnimationControl control = CustomAnimationControl.PLAY

Curve curve = Curves.linear

Duration duration = const Duration(seconds: 1)

Duration delay = Duration.zero

double startPosition = 0.0

Widget child

void Function(AnimationStatus) animationStatusListener

int fpsKey key

Here we can see if we provide a Tween to CustomAnimation class, it will provide a value. Using this value we can create animation. For example, If we give a Tween(begin:0, end:50) and a duration of 1 second, CustomAnimation will provide values like 0,1,2,3…50 within 1 second.

Now coming to our animation, we want to animation the left padding as well as the width of the button. Here we can use MultiTween. But we will reuse the value to determine the width.

For example: Let’s assume our animation will take 400 milliseconds

1. Left Padding Animation

Button Left Padding Animation

2. Button Width Animation

Button Width Animation

Remember, the animation will happen not on time, but the left padding value i.e. Tween(begin:0, end: width/2).

The width can be determined as below

Animation Curve

Any curve can be used depending on the requirement. Here we can simply deduce the animation curve

button_width =

left_padding + w/2 if left_padding ≤w/4

w -left_padding else

Here we are taking button width = screen width * 0.8

Here full code:

main.dart

worm_animation_button.dart

That’s it ✌.