Flutter : how to create a percent tracker

Question

I have 10 field on a form and I want have a status tracker similar to the image below..

Basically , I will pass the percent and the widget should be updated

So if 4 items are completed then it will be 40% complete,, Can you give me some hints on how to create this widget

Follow my answer : https://stackoverflow.com/questions/57534160/how-to-add-a-border-corner-radius-to-a-linearprogressindicator-in-flutter/57534339#57534339 — Amit Prajapati, Aug 24 '19 at 04:48

score 0 · Answer 1 · answered Aug 24 '19 at 10:35

I think this is somehow weird but may help!

you need a validator

You could make a function called checkProgress() and assign it to the onChanged of the textformfield:

void checkProgress() {
   if(textformfieldcontroller.isValid) {
      setstate(() {
         progressbar = progressbar + 10;
      });
   } else if (textformfieldcontroller.isNotValid) {
      setstate(() {});
   }
}

It may work, but if not the concept is using if statements with setstate.

Nikolay · Answer 2 · 2021-02-23T06:47:18.063

0

You can use the library percent_indicator

 LinearPercentIndicator(animation: true,
 lineHeight: 15,
 animationDuration: 5000,
 percent: 0.4,
 backgroundColor: Colors.blue,
 progressColor: Colors.orange,
 center: Text(
  'Text',
  style: TextStyle(
  color: Theme.of(context).primaryColorDark,
  fontSize: 15,
  fontWeight: FontWeight.w500),
),
linearStrokeCap: LinearStrokeCap.roundAll,
),

the parameter "percent" shows the progress in the indicator

edited Feb 23 '21 at 06:47

answered Feb 17 '21 at 06:10

Nikolay

603
1
6
13

Add some explanation/example with your answer please – YLR Feb 17 '21 at 06:55

Flutter : how to create a percent tracker

2 Answers2