Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to reload the animation on notify #132

Open
Nico3652 opened this issue Nov 20, 2021 · 3 comments
Open

How to reload the animation on notify #132

Nico3652 opened this issue Nov 20, 2021 · 3 comments

Comments

@Nico3652
Copy link

First thanks for this great package. I'm using it a lot in my app.

In this use case, I want to implement a basic video recording animation, where the start-to-record action should trigger the circular animation, otherwise the circle should be always full (percent = 1)

Here is my code :

ValueListenableBuilder(
                    valueListenable: cameraViewModel.isRecording,
                    builder: (context, _, child) => AnimatedScale(
                          scale: cameraViewModel.isRecording.value ? 1.3 : 1,
                          duration: const Duration(
                            milliseconds: 200,
                          ),
                          child: CircularPercentIndicator(
                            radius: 70,
                            percent: 1,
                            circularStrokeCap: CircularStrokeCap.round,
                            lineWidth: 3,
                            startAngle: cameraViewModel.isRecording.value ? 0 : 90,
                            animation: cameraViewModel.isRecording.value
                                ? true
                                : false,
                            restartAnimation: cameraViewModel.isRecording.value
                                ? true
                                : false,
                            animationDuration:
                                cameraViewModel.isRecording.value ? 15000 : 0,
                            backgroundColor: Colors.white.withOpacity(0.3),
                            progressColor: Colors.white,
                            center: AnimatedContainer(
                              duration: const Duration(milliseconds: 250),
                              curve: Curves.decelerate,
                              width:
                                  cameraViewModel.isRecording.value ? 50 : 60,
                              height:
                                  cameraViewModel.isRecording.value ? 50 : 60,
                              child: Container(
                                decoration: BoxDecoration(
                                    gradient:
                                        ThemeProvider.instance.getGradientApp(),
                                    shape: BoxShape.circle),
                              ),
                            ),
                          ),
                        )
                )

The problem is the animation is never triggered with this logic . Looking into your class I can see that the animation controller call forward() in the initState() and also inside didUpdateWidget() according this condition :

if (oldWidget.percent != widget.percent ||
        oldWidget.startAngle != widget.startAngle)

In my case I'm not updating the percent because in both situation it must be 1 . Then I tried to fake the 'startAngle' change but nothing happen.

What I am suppose to do ? Going to be crazy sounds like I am missing something in global logic

Thanks in advance for any help

@Nico3652 Nico3652 changed the title How to reload the animation on demand How to reload the animation on notify Nov 20, 2021
@diegoveloper
Copy link
Owner

PRs are welcome

@AbirAhsan
Copy link

Same issue here

@ilyosbekkk
Copy link

any updates on this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants