Flutter Progress Indicator examples

If  you want to express that your Flutter App is making progress or working on something? Flutter has widgets for that!  Use CircularProgressIndicator() if you want to indicate progress in a roundabout fashion, and LinearProgressIndicator() if you like lines. The APIs are almost identical. Both progress indicators have determinate and indeterminate formats.

Use the determinate version if you want to indicate the actual amount of progress that the app is making on a task. Use the indeterminate version if you just want to show that the app is working on the task without making any promises about the remaining length of time. 

Change Color

By default, the progress indicators will use the color from your theme’s accentColor. You can also set a custom color with the valueColor parameter.

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
        padding: EdgeInsets.all(8.0),
        child: is_loading
            ? LinearProgressIndicator(
          backgroundColor: Colors.blue,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow),
              )
            : Text("Press button to save"),
      )),

This value can be animated, so if you just want a single color, use AlwaysStoppedAnimation. By setting the backgroundColor parameter for a secondary color that your progress indicator will fill on completion.

Progressbar Animation

But you can achieve some really neat effects bypassing in color animations.

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  bool is_loading = false;

  AnimationController controller;
  Animation<Color> colorTween;

  @override
  void initState() {
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200));
    colorTween = controller.drive(new ColorTween(begin: Colors.greenAccent, end: Colors.deepOrange));
    controller.repeat();
    super.initState();
  }

  void _progress_state() {
    setState(() {
      is_loading = !is_loading;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
        padding: EdgeInsets.all(8.0),
        child: is_loading
            ? LinearProgressIndicator(
                valueColor: colorTween,
              )
            : Text("Press button to save"),
      )),

      floatingActionButton: FloatingActionButton(
        onPressed: _progress_state,
        tooltip: 'Save Content',
        child: Icon(Icons.save),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 Determinate Progressbar

For a determinate progress bar, set the value parameter to indicate the fraction of completion. Depending on your situation, you may need to call setState or wrap your indicator in an AnimatedBuilder, StreamBuilder, or similar, to rebuild with updated values.

Set Stroke

CircularProgressIndicator() has one unique parameter, which is the strokeWidth, to make your progress indicator skinnier or fatter.

CircularProgressIndicator(
                valueColor: colorTween,
                strokeWidth: 4.0,
              )