Flutter LinearProgressIndicator

Flutter LinearProgressIndicator is cool for slowly showing animation or progress. It shows animation in a line or in a straight line.

If you have a timer app in Flutter, you may use timer to show progress of the elapsed time. it could be used to show download progress as well.

LinearProgressIndicator Widget

LinearProgressIndicator(
                        minHeight: 10,
                        backgroundColor: Colors.blue[100],
                        value: (state.elapsed!/20).toDouble()//0-1,
)
                      

In general, you need to provide minHeight, backgroundColor and value.

Among all, value is the most important part, it takes values between 0-1 and it has to be double format.

This part is based on the previous part. Previously, we used a timer to do countdown app, and we are using the value from the timer app to use in the value property of LinearProgressIndicator.

Here state.elapsed is the time that’s is used or elapsed since the timer as started. Our total time is 20 seconds. So we divide state.elapsed by 20 and we get value 0-1.

Previously, we used BLoC state management to do the timer countdown app. Just add the above code section inside the body of class.

Learn about Flutter Custom Loader