CODEWITHSUNDEEP
flutteranimationflutter-circularprogressindicator
Bn Minki
Bn Minki

Reputation: 185

How to make my CircularProgressIndicator run smoothly(Update smoother and not every second so there is flow + glow on sides?)

So I made a timer and was wondering how can I add a "glow" that animates/grows slightly bigger , then back to a smaller glow. Another issue is that when I start the timer it updates every second (Sort of jumps instead of flowing)

Not sure how to go ahead with this as tried to google for a few hours now without luck.

Thank you for helping!

Here is my code

  var maxSeconds = 900;
  late int seconds = maxSeconds;
  Timer? timer;

  void resetTimer() {
    setState(() => seconds = maxSeconds);
    timer = null;
  }

  void startTimer({bool reset = true}) {
    if (reset) {
      resetTimer();
    }
    timer = Timer.periodic(Duration(seconds: 1), (_) {
      if (!mounted) // Putting this line of code with return under, fixed my issue i been having about mounted
        return;
      else if (seconds > 0) {
        setState(() => seconds--);
      } else {
        stopTimer(reset: false);
      }
    });
  }


Widget buildTimer() => SizedBox(
            width: 200,
            height: 200,
            child: Stack(
              fit: StackFit.expand,
              children: [
                CircularProgressIndicator(
                  value: seconds / maxSeconds,
                  valueColor: AlwaysStoppedAnimation(Colors.white),
                  strokeWidth: 12,
                  backgroundColor: Colors.greenAccent,
                ),
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    if (timer == null) {
                      HapticFeedback.heavyImpact();
                    } else {
                    }
                  },
                  child: Center(child: buildTime()),
                ),
              ],
            ),
          );

Upvotes: 7

Views: 5989

Answers (1)

Gábor
Gábor

Reputation: 10274

If you need to respond to a value change, to follow some progress, then you can use AnimatedBuilder. The animation you supply to it makes sure that it will be rebuilt more frequently, just as needed.

But in this special case when you know up front how long you want to display, and also know that – unlike, for instance, a file copy or an upload that doesn't always have the same speed – time will elapse in a completely regular way, you can simply create a progress indicator for the predetermined time.

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: 1),
  duration: Duration(seconds: 25),
  builder: (context, value, _) => CircularProgressIndicator(value: value),
),

This is the simplest way by far. You create a tween animation that goes from zero to one, give it a duration and use it to build the progress indicator.

Upvotes: 12

Related Questions