LinearPercentIndicator in Flutter

flutter dart indicator

1,128

As Per your code, this is what I have implemented let me know if it works or you want any:

import 'package:flutter/material.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(child: SampleApp()),
      ),
    );
  }
}

class SampleApp extends StatefulWidget {
  SampleApp({Key key}) : super(key: key);

  @override
  _SampleAppState createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp> {
  String finalD = '';
  double percentage;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //This is you value 10 where you divide by 100 then you get the value
    // between 0 -1 which is expected by the linerprogressindicator
    percentage = 10 /100; //  Here you get your percentage and the assign it to the percentage

     finalD = (percentage*100).toString(); // here you asign to the String 
// or convert it to int as :finalD =(percentage * 100).toInt().toString(); 

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: LinearPercentIndicator(
          width: MediaQuery.of(context).size.width - 50,
          animation: true,
          lineHeight: 25.0,
          animationDuration: 2500,
          percent: percentage,
          center: Text('$finalD'),
          linearStrokeCap: LinearStrokeCap.roundAll,
          progressColor: Colors.yellow,
        ),
      ),
    );
  }
}

1,128

Author by

aLearner

Updated on December 22, 2022

Comments

aLearner over 1 year
I'm planning to display my final score by using indicator.

here's the code :
```
LinearPercentIndicator(
                  width: MediaQuery.of(context).size.width - 50,
                  animation: true,
                  lineHeight: 25.0,
                  animationDuration: 2500,
                  percent: 0.0,
                  center: Text('$finalD'),
                  linearStrokeCap: LinearStrokeCap.roundAll,
                  progressColor: Colors.yellow,
                ),
```
how to change the percent to saved value in $finalD? or is there any other ways to display such that?

:)
- Thepeanut almost 4 years
  
  What is you finalD's min and max?
- aLearner almost 4 years
  
  min = 0, max = 126
- Thepeanut almost 4 years
  
  Sorry for the late reply. If finalD is number by default - then the "percent" for the indicator is " finalD / 126 ", it finalD is string - then it's " number.parse(finalD) / 126 "
aLearner almost 4 years

Thanks, it does help a lot for my understanding. but if the finalD is in int, how could I calculate it into percentage?
Sagar Acharya almost 4 years

It you divide by 100 the you get the value example if 50% the 50/100 = 0.50 or convertion will work though if inbetween value double.parse(value) value is the int value you want to parse
aLearner almost 4 years

follow the code, it shows 0.7/70%, not showing the finalD converted to percentage. okay, for example, finalD value is 10, I change percentage = finalD, but it not working as it shows a value of type 'double' cant be assigned to a variable of type 'String' . How can I change that?
Sagar Acharya almost 4 years

Just check the code I have added the code based on the example for 10 value.
aLearner almost 4 years

I understand and got it now. thanks so much, have a great day ahead sir :)
Sagar Acharya almost 4 years

Just make an upvote so that it would be helpful for others.