How to use progress indicators in Flutter

How to use progress indicators in Flutter

There are 2 dedicated widgets in Flutter which will assist you display progress in your Flutter apps, namely LinearProgressIndicator and CircularProgressIndicator. you’ll use both of them just the way you employ the other widget and you’ll position them however you would like .

How to use LinearProgressIndicator in Flutter

A LinearProgressIndicator is essentially a progress bar that shows the progress during a line. By default, all properties are optional, which suggests that the indicator are going to be an indeterminate progress bar. meaning that we don’t really know when the method are going to be finished, as against a determinate LinearProgressIndicator of which the worth property should be updated.


The following code shows an easy usage of (indeterminate) LinearProgressIndicator that simulates a download (but we don’t know when it’ll be finished). A button simply changes the state from not downloading to downloading. once we aren’t downloading, we show a text instructing the user and otherwise we show the progress indicator:

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


This is how it’ll look:

How to use progress indicators in Flutter, How to use LinearProgressIndicator in Flutter, How to use CircularProgressIndicator in Flutter

What if you would like to point out make a determinate progress indicator, meaning you would like to point out what proportion we’ve progressed or how long it’ll take more to end downloading something. we will simulate a download that takes a particular amount of your time and updates the worth 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;
        }
      });
    });
  }


And it’ll appear as if this:

How to use progress indicators in Flutter, How to use LinearProgressIndicator in Flutter, How to use CircularProgressIndicator in Flutter

How to use CircularProgressIndicator in Flutter

CircularProgressIndicator works precisely the same way as LinearProgressIndicator, so we will just replace that first one with the latter:

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

Which seems like this:

How to use progress indicators in Flutter, How to use LinearProgressIndicator in Flutter, How to use CircularProgressIndicator in Flutter

If you don’t care about what proportion progress is left and need to possess an indeterminate one, just remove the worth property and therefore the _updateProgress function. celebrate developing with Flutter

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

TypeError: this.getOptions is not a function in vue.js

Leave a Comment

x