1# A powerful Flutter package for building complex animation step by step

flutter_animation step by step

a powerful flutter package for building complex animation step by step.

example

depend on it

add this to your package’s pubspec.yaml file:

dependencies:
  flutter_steps_animation: ^1.0.0

getting started

using stepsanimation is more of a normal animation:

class animationpagestate extends state<animationpage>
    with singletickerproviderstatemixin {
  stepsanimation stepsanimation;

  @override
  widget build(buildcontext context) {
    return scaffold(
      body: container(
        color: colors.white,
        child: gesturedetector(
          ontap: () {
            _playanimation(stepsanimation.controller);
          },
          child: center(
            child: animatedbuilder(
              animation: stepsanimation.controller,
              builder: stepsanimation.builder,
            ),
          ),
        ),
      ),
    );
  }

  @override
  void initstate() {
    super.initstate();
    stepsanimation = stepsanimationbuilder()
        .addstepbuilder(_timeanimation(1))
        .addstepbuilder(_timeanimation(2))
        .addstepbuilder(_timeanimation(3))
        .addstepbuilder(_multipleanimation())
        .addstepbuilder(_waitstep(2))
        .addstepbuilder(_morestepsanimation())
        .animation(this);
  }

  future<null> _playanimation(animationcontroller controller) async {
    try {
      await controller.forward().orcancel;
//      await controller.reverse().orcancel;
      controller.reset();
    } on tickercanceled {}
  }

  @override
  void dispose() {
    stepsanimation.controller.dispose();
    super.dispose();
  }

}

add steps for stepsanimation

stepsanimation = stepsanimationbuilder()
        .addstepbuilder(_timeanimation(1))
        .addstepbuilder(_timeanimation(2))
        .addstepbuilder(_timeanimation(3))
        .addstepbuilder(_multipleanimation())
        .addstepbuilder(_waitstep(2))
        .addstepbuilder(_morestepsanimation())
        .animation(this);

whole code of animations

singleanimationbuilder _timeanimation(int number) {
    final duration = duration(milliseconds: 500);
    return singleanimationbuilder(
      duration: duration,
      buildinfo: singleanimationbuildinfo(
          animatable: tween<double>(begin: 25, end: 100),
          from: duration.zero,
          duration: duration),
      buildanimation: (context, data) {
        return text(
          '$number',
          style: textstyle(fontsize: data.value),
        );
      },
    );
  }

  multipleanimationbuilder _multipleanimation() {
    final duration = duration(seconds: 10);
    final builder = multipleanimationbuilder(
        duration: duration,
        buildanimation: (context, map) {
          final color color = map['color'].value;
          final complementarycolor = color(0xffffff ^ color.value);
          return cliprrect(
            borderradius:
                borderradius.all(radius.circular(map['radius'].value)),
            child: container(
              height: map['height'].value,
              width: map['width'].value,
              color: color,
              child: center(
                child: text(
                  '${map['color'].value}',
                  style: textstyle(color: complementarycolor),
                ),
              ),
            ),
          );
        });
    builder
        .addanimatable(
            animatable: tween<double>(begin: 100, end: 400),
            from: duration(seconds: 1),
            duration: duration(seconds: 4),
            key: 'height')
        .addanimatable(
            animatable: tween<double>(begin: 400, end: 100),
            from: duration.zero,
            duration: duration(seconds: 4),
            key: 'width')
        .addanimatable(
            animatable:
                colortween(begin: colors.green, end: colors.yellowaccent),
            from: duration(seconds: 2),
            duration: duration(seconds: 4),
            key: 'color')
        .addanimatable(
            animatable: tween<double>(begin: 400, end: 100),
            from: duration(seconds: 5),
            duration: duration(seconds: 5),
            key: 'height')
        .addanimatable(
            animatable: tween<double>(begin: 100, end: 400),
            from: duration(seconds: 5),
            duration: duration(seconds: 5),
            key: 'width')
        .addanimatable(
            animatable: colortween(begin: colors.yellowaccent, end: colors.red),
            from: duration(seconds: 4),
            duration: duration(seconds: 3),
            key: 'color')
        .addanimatable(
            animatable: colortween(begin: colors.red, end: colors.black),
            from: duration(seconds: 7),
            duration: duration(seconds: 3),
            key: 'color')
        .addanimatable(
            animatable: tween<double>(begin: 0, end: 200),
            from: duration(seconds: 3),
            duration: duration(seconds: 2),
            key: 'radius')
        .addanimatable(
            animatable: tween<double>(begin: 200, end: 0),
            from: duration(seconds: 5),
            duration: duration(seconds: 5),
            key: 'radius');
    return builder;
  }

  noneanimationbuilder _waitstep(int second) {
    return noneanimationbuilder(
        duration: duration(seconds: second),
        builder: (context) {
          return container(
            color: colors.black,
            height: 100,
            width: 400,
            child: center(
              child: text(
                'just wait ${second}s',
                style: textstyle(color: colors.white),
              ),
            ),
          );
        });
  }

  singleanimationbuilder _morestepsanimation() {
    return singleanimationbuilder(
      duration: duration(seconds: 10),
      buildanimation: (context, animation) {
        return container(
          color: colors.black,
          height: animation.value,
          width: 400,
          child: center(
            child: text(
              'more steps',
              style: textstyle(color: colors.white),
            ),
          ),
        );
      },
      buildinfo: singleanimationbuildinfo(
        animatable: tween<double>(begin: 100, end: 1000),
        from: duration.zero,
        duration: duration(seconds: 8),
      ),
    );
  }