How to play lottie animation on a button click flutter

user_17862723 0
Viewed 322

How do I play lottie animation by a button click.What I want is the lottie animation should play until I press the button to stop it

Here is my code:

class _DashboardState extends State<Dashboard> with TickerProviderStateMixin{

      late AnimationController _animationController;
      @override
      void initState() {
        super.initState();
        _animationController =
            AnimationController(vsync: this, duration: const Duration(milliseconds: 500));
      }

      // ...

            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children:[
                  SizedBox(
                    height: 300,
                    child: Lottie.asset('assets/animation_soundwave.json',
                        controller: _animationController,
                        height: 180,
                        repeat: false,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      _animationController.forward();
                    },
                    child:IconButton()
                  ),
dart flutter animation
1 Answers

Try This:

class _DashboardState extends State<Dashboard> with TickerProviderStateMixin{

  late AnimationController _animationController;
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this);
  }

child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children:[
              SizedBox(
                height: 300,
                child: Lottie.asset('assets/animation_soundwave.json',
                    controller: _animationController,
            onLoaded: (composition) { // changes here
            // Configure the AnimationController with the duration of the
            // Lottie file and start the animation.
            _animationController
              ..duration = composition.duration
              ..forward();
          },
                    height: 180,
                    repeat: false,
                ),
              ),
              
               IconButton(
            icon : Icon(Icons.play_arrow),
            onPressed:() { // start animation
             _animationController.forward(from: __animationController.value);
                }
              ),
            SizedBox(
              width: screenSize.width / 2.50,
              child: new Text(
                ((_user?.name == null) ? "" : _user?.name),
                style: new TextStyle(
                  fontSize: 18.0,
                  fontFamily: "Roboto",
                  fontWeight: FontWeight.w500,
                  color: Colors.white,
                ),
                maxLines: 1,
                textAlign: TextAlign.left,
              ),
            ), 
          ],
        )

user_169189790
Related