Play & pause a Flutter animation


I was trying to add a button to this page that will (play or pause) the waves animation in the background.
code link:

I’ve tried many things but since I still bad with flutter animations I still without result.

Thanks in advance.


Short answer:

AnimationController _controller = ...;

// To stop animation

// To start from beginning

// To start from a point other than the very beginning.
_controller.forward(from: 0.8);

Long answer:

I wasn’t aware of that code, here is how I did. All you need is Controller.reset() to stop the animation and Controller.repeat() to start it.

However if you need to start the animation just once, use Controller.forward() and Controller.reverse().

enter image description here

void main() => runApp(MaterialApp(home: Scaffold(body: HomePage())));

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _isPlaying = true;

  void initState() {
    _controller = AnimationController(
      vsync: this,
      lowerBound: 0.3,
      duration: Duration(seconds: 3),

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Animation")),
      body: Stack(
        children: <Widget>[
          Align(child: CircleAvatar(backgroundImage: AssetImage("assets/images/profile.png"), radius: 72)),
            alignment: Alignment(0, 0.5),
            child: RaisedButton(
              child: Text(_isPlaying ? "STOP" : "START"),
              onPressed: () {
                if (_isPlaying) _controller.reset();
                else _controller.repeat();
                setState(() => _isPlaying = !_isPlaying);

  Widget _buildCircularContainer(double radius) {
    return AnimatedBuilder(
      animation: CurvedAnimation(parent: _controller, curve: Curves.fastLinearToSlowEaseIn),
      builder: (context, child) {
        return Container(
          width: _controller.value * radius,
          height: _controller.value * radius,
          decoration: BoxDecoration(color: Colors.black54.withOpacity(1 - _controller.value), shape:,

Answered By – CopsOnRoad

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.