what is the method to achieve a page indicator is filled with color based on calculating percentage?

Question

it is page indicator ,which is filled with a color in specific percent, based on completing each section, and the percentage is show there ](https://i.stack.imgur.com/Tghlx.jpg)

I am working with flutter. My problem is ,i want the page indicators and the percent as shown in the picture. Each one is filled with specific percent value. And sometimes more than one page is depended in one page indicator.so that, there is a need to fill the indicator according to the pages.

Answer 1

Create a variables int totalScreen= 14; and create an method that calculates the current progress:

 double calculateProgress() {
      int currentScreen=  13;

      return currentScreen/ totalScreen;
    }

And then use it according to your code, for my scenario i have used LinearProgressIndicator and passed my method to the value field.

 LinearProgressIndicator(
                  value: calculateProgress(),
                  valueColor: const AlwaysStoppedAnimation<Color>(Majorella),
                  backgroundColor: Colors.grey.withOpacity(0.3),
                ),