close

How to work with progress indicator in flutter?

There are 2 devoted gadgets in Flutter that can help you show progress in your Flutter applications, specifically LinearProgressIndicator and CircularProgressIndicator. You can utilize the two of them simply the manner in which you utilize some other gadget and you can situate them anyway you need.

Step by step instructions to utilize LinearProgressIndicator in Flutter

A LinearProgressIndicator is essentially an advancement bar that shows the advancement in a line. Of course, all properties are discretionary, which implies that the pointer will be a vague advancement bar. That implies that we don’t generally have a clue when the cycle will be done, instead of a determinate LinearProgressIndicator of which the worth property should be refreshed.

The accompanying code shows a straightforward utilization of (uncertain) LinearProgressIndicator that reenacts a download (yet we don’t have the foggiest idea when it will be done). A catch basically changes the state from not downloading to downloading. At the point when we are not downloading, we show a book training the client and else we show the advancement pointer:

bool _loading;

  @override
  void initState() {
    super.initState();
    _loading = false;
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LinearProgressIndicator"),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: _loading ? LinearProgressIndicator() : Text("Press button to download"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _loading = !_loading;
          });
        },
        tooltip: 'Download',
        child: Icon(Icons.cloud_download),
      ),
    );
  }

Imagine a scenario in which you need to show gain a determinate ground pointer, that implies you need to show the amount we have advanced or what amount of time it will require for additional to complete the process of downloading something. We can mimic a download that takes a specific measure of time and updates the estimation of LinearProgressIndicator as follows:

  bool _loading;
  double _progressValue;

  @override
  void initState() {
    super.initState();
    _loading = false;
    _progressValue = 0.0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LinearProgressIndicator"),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: _loading
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    LinearProgressIndicator(
                      value: _progressValue,
                    ),
                    Text('${(_progressValue * 100).round()}%'),
                  ],
                )
              : Text("Press button to download"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _loading = !_loading;
            _updateProgress();
          });
        },
        tooltip: 'Download',
        child: Icon(Icons.cloud_download),
      ),
    );
  }

  // we use this function to simulate a download
  // by updating the progress value
  void _updateProgress() {
    const oneSec = const Duration(seconds: 1);
    new Timer.periodic(oneSec, (Timer t) {
      setState(() {
        _progressValue += 0.2;
        // we "finish" downloading here
        if (_progressValue.toStringAsFixed(1) == '1.0') {
          _loading = false;
          t.cancel();
          _progressValue: 0.0;
          return;
        }
      });
    });
  }

Step by step instructions to utilize CircularProgressIndicator in Flutter

CircularProgressIndicator works the very same route as LinearProgressIndicator, so we can simply supplant that initial one with the last mentioned:

  bool _loading;
  double _progressValue;

  @override
  void initState() {
    super.initState();
    _loading = false;
    _progressValue = 0.0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LinearProgressIndicator"),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: _loading
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(
                      value: _progressValue,
                    ),
                    Text('${(_progressValue * 100).round()}%'),
                  ],
                )
              : Text("Press button to download"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _loading = !_loading;
            _updateProgress();
          });
        },
        tooltip: 'Download',
        child: Icon(Icons.cloud_download),
      ),
    );
  }

  // we use this function to simulate a download
  // by updating the progress value
  void _updateProgress() {
    const oneSec = const Duration(seconds: 1);
    new Timer.periodic(oneSec, (Timer t) {
      setState(() {
        _progressValue += 0.2;
        // we "finish" downloading here
        if (_progressValue.toStringAsFixed(1) == '1.0') {
          _loading = false;
          t.cancel();
          _progressValue: 0.0;
          return;
        }
      });
    });
  }

In the event that you couldn’t care less about how much advancement is left and need to have a vague one, simply eliminate the worth property and the _updateProgress work. Have a great time creating with Flutter.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment