Flutter: Adding A Progress Bar Animation In Page View

In this post we will build a page view widget that has a animated progress bar. When user moves from one page to another, the progress bar gets updated with animation.

Introduction

A PageView is a useful widget which can be used to create a scrollable list of pages. We can build the widgets in a book-like manner with the help of a page view.

Basic Setup Of PageView Widget

A simple implementation of PageView can look like this:

Our app will look as below:

Page View Setup
Page View Setup

Cool. Now that we have a working PageView, we want to add an animated progress bar here.

Adding A Progress Bar

We will show the progress bar in the top most section of our app. Let’s add an application bar to the Scaffold widget for this purpose.

If you look at the children inside the Row widget, you can see that there are two items. The first one has a fixed width while the second one is wrapped in an Expanded widget with maximum possible width. The Expanded widget ensures to take the remaining space of the Row container.

Since these two children have the same height but different colors (white and cyanAccent), the first child will appear as a progress indicator.

Progress Bar Setup In Page View
Progress Bar Setup In Page View

All that we need to do now is update the value of the width for the first child with animation!

Setup For Animation

For animating the progress bar, we will make use of Animation, Animation Controller and Animated Widget. If you are new to the topic of animation in Flutter, you should first read our previous post.

It will be helpful to understand the core concepts of the animation framework.

Convert To StatefulWidget

To add the animation, let’s change our “MyPages” widget into a Stateful widget first.

Become A Flutter Expert With This Course

Add The Animation, Animation Controller And Animated Widget

Now that we have defined the animation and animation controller, it’s time to create the animated widget.

Create a class called “AnimatedProgressBar” that will listen to the progress animation.

The AnimatedProgressBar class looks pretty much same like the container that we built inside the Row earlier. Just that the widget’s width is now set to animation.value.

Next, we will replace the progress bar that we created previously with this AnimatedProgressBar.

Animating The Progress Bar

Now we are almost ready to animate our Progress Bar!

Next we will calculate the amount of progress that should be animated to on each page changed event. Based upon the calculation, we will be updating animation object and running the animation.

Call the _setProgressAnim function on the initState event and then again during the onPageChanged event of the PageView.

Our final code:

And our final output of progress animation in pageview application:

Final Page View With Progress Animation
Final Page View With Progress Animation

About the author