Flutter Circular Progress Indicator Animation BLoC

Here we will carry on from the first part, where we learned how to make a timer app using BLoC pattern. Then in part two we learned how to make a linear progress indicator.

In this part we will see how to make circular progress indicator.

As usual we will use elapsed time to do the animation.

Here, it we will use CircularProgressIndicator and AlwaysStoppedAnimation Widget to do it.

Stack(
                      alignment: const Alignment(0, 0),
                      children: [
                        Center(
                          child: SizedBox(
                            height: 220,
                            width: 220,
                            child: CircularProgressIndicator(
                              valueColor: AlwaysStoppedAnimation<Color>(
                                stats['isPrelude']?Colors.red:Colors.blue
                              ),
                              strokeWidth: 25,
                              value: stats['exerciseProgress'],
                            ),
                          ),
                        ),
                        Center(
                          child: SizedBox(
                            height: 300,
                            width: 300,
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 20),
                              child: Image.asset('stopwatch.png'),
                            ),
                          ),
                        )
                      ],
                    ),