Skip to content

Consider adding a delay effect #159

@loic-sharma

Description

@loic-sharma

Let's say I'd like to make a square that spins once every 3 seconds, forever:

class SpinningSquarePage2 extends StatelessWidget {
  const SpinningSquarePage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Animate(
      onPlay: (controller) => controller.repeat(),
      effects: [
        RotateEffect(duration: Duration(seconds: 2)),

        // Sleep for 3 seconds.
        CustomEffect(
          duration: Duration(seconds: 3),
          builder: (context, value, child) => child,
        ),
      ],
      child: const ColoredBox(
        color: Colors.green,
        child: SizedBox.square(dimension: 100),
      ),
    );
  }
}

It'd be nice if I could do something like this instead:

class SpinningSquarePage2 extends StatelessWidget {
  const SpinningSquarePage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Animate(
      onPlay: (controller) => controller.repeat(),
      effects: [
        RotateEffect(duration: Duration(seconds: 2)),

        // Force the animation to run for 3 seconds
        // before it repeats again. 
        DelayEffect(duration: Duration(seconds: 3)),

        // DelayEffect does not establish a new baseline time,
        // so you should use `ThenEffect` if needed.
      ],
      child: const ColoredBox(
        color: Colors.green,
        child: SizedBox.square(dimension: 100),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions