CODEWITHSUNDEEP
flutterdart
thomas.s
thomas.s

Reputation: 348

How to change text according to percent indicator

I have a percent indicator and I want to show its percent in a text widget with percent type(like 90%) when its property is 9.0 something like this. As you can see its percent is out of its area and it shows the current percent

enter image description here

Here is my indicator:

  child: LinearPercentIndicator(
              width: MediaQuery.of(context).size.width - 50,
              animation: true,
              lineHeight: 6.0,
              animationDuration: 2000,
              percent: 0.6,
              linearStrokeCap: LinearStrokeCap.roundAll,
              backgroundColor: Color(0xffD2D9EC),
            ),

I want to convert percent: 0.6, to an int. And then show it in a text widget and I want to do exactly the opposite of that. It means I want to convert an int to a double and show it in indicator percent. I want to change it once, like when the user is coming to the page. Take it from API and show it in there.

Upvotes: 0

Views: 1596

Answers (3)

August Kimo
August Kimo

Reputation: 1771

var percentValue = 0.6;

child: LinearPercentIndicator(
              width: MediaQuery.of(context).size.width - 50,
              animation: true,
              lineHeight: 6.0,
              animationDuration: 2000,
              percent: percentValue,
              linearStrokeCap: LinearStrokeCap.roundAll,
              backgroundColor: Color(0xffD2D9EC),
            ),


Text(_determineText(percentValue), style: TextStyle(color: Colors.black))


_determineText(percentValue){
 var value = percentValue * 100; //0.6 -> 60
 return (‘%’+(value.toString());
}

Upvotes: 1

Tanuj
Tanuj

Reputation: 2270

Here is the sample code to convert decimal to percent to an Int and display it on the Text widget. The idea is to bind the percentage to a common value and the convert it to display into a text. I am using a Stateful Widget and a Slider to change percentage value but you can always bind to any source like AOI response time or something like that.

Here is the sample code -

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

void main() {
  //Run the App Widget
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Demo App",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Demo App"),
        ),
        body: Demo(),
      ),
    );
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '${(_value * 100.0).toInt()}%',
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(
              height: 10.0,
            ),
            LinearPercentIndicator(
              alignment: MainAxisAlignment.center,
              width: MediaQuery.of(context).size.width - 50,
              lineHeight: 50.0,
              animationDuration: 2000,
              percent: _value,
              linearStrokeCap: LinearStrokeCap.butt,
              backgroundColor: Color(0xffD2D9EC),
            ),
            SizedBox(
              height: 10.0,
            ),
            Slider(
              min: 0.0,
              max: 1.0,
              value: _value,
              onChanged: (value) => {
                setState(() {
                  _value = value;
                })
              },
            )
          ],
        ),
      ),
    );
  }
}

And the output -

Demo App Ouput

This will give you an idea of how to proceed towards the solution you want.

Upvotes: 1

Ishika Vaghasiya
Ishika Vaghasiya

Reputation: 38

In This You use SeekBar,And use SeekBar Listner in Listner You Can Change Text on Textview.

// sbVolum is id of seekbar

this.sbVolume.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            public void onStartTrackingTouch(SeekBar see`enter code here`kBar) {
            }

            public void onStopTracki`enter code here`ngTouch(SeekBar seekBar) {
            }

            public void onProgressChanged(SeekBar seekBar, int i, boolean z) {
              // in this you can change text
            }
        });
```

Upvotes: -1

Related Questions