Play & pause a Flutter animation

Issue

I was trying to add a button to this page that will (play or pause) the waves animation in the background.
code link: https://github.com/apgapg/flutter_profile/blob/master/lib/page/intro_page.dart

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

Thanks in advance.

Solution

Short answer:

AnimationController _controller = ...;

// To stop animation
_controller.stop();

// To start from beginning
_controller.forward();

// 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 {
  @override
  _HomePageState createState() => _HomePageState();
}

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

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      lowerBound: 0.3,
      duration: Duration(seconds: 3),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Animation")),
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          _buildCircularContainer(200),
          _buildCircularContainer(250),
          _buildCircularContainer(300),
          Align(child: CircleAvatar(backgroundImage: AssetImage("assets/images/profile.png"), radius: 72)),
          Align(
            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: BoxShape.circle),
        );
      },
    );
  }
}

Answered By – CopsOnRoad

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.