CODEWITHSUNDEEP
flutterdartindicator
aLearner
aLearner

Reputation: 25

LinearPercentIndicator in Flutter

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?

:)

Upvotes: 2

Views: 4930

Answers (1)

Sagar Acharya
Sagar Acharya

Reputation: 3777

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,
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions