Flutter - Using LinearProgressIndicator Examples

This tutorial shows you how to create determinate and indeterminate LinearProgressIndicator in Flutter.

If your application has to do something that takes some time to finish, you may need to display a progress indicator. In Flutter, one of the suitable widget for that purpose is LinearProgressIndicator. Below I'm going to show you how to use the widget. The progress is displayed in a linear bar. If you want to display the progress in a circular shape, you can consider to use CircularProgressIndicator.

Creating LinearProgressIndicator

To create a new LinearProgressIndicator, just use the constructor.

  const LinearProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation valueColor,
    String semanticsLabel,
    String semanticsValue,
  })

There are two types of progress indicator: determinate and indeterminate. Determinate means the completion progress is shown at every time. For example, copying a certain number of files into another folder can use the number of file already copied to determinate the progress. On the contrary, indeterminate doesn't show the completion progress. It's suitable for cases when the completion progress cannot be known or if you don't want the users to know the completion percentage.

Creating Indeterminate LinearProgressIndicator

The basic usage is very simple, you don't need to pass anything in the constructor.

  LinearProgressIndicator()

Output:

 

Creating Determinate LinearProgressIndicator

For determinate progress indicator, you need to pass value property whose value ranges from 0.0 until 1.0. If the value is 0.0, it means the progress is 0%. If the value is 1.0, the progress is 100%. A value of 0.2 means the progress is at 20%, you can see it from the area covered by the progress indicator's color.

For example, there is a variable _progress whose value meets the above rules. Then, pass the variable as value when calling the constructor.

  LinearProgressIndicator(
    value: _progress,
  )

Output:

 

Customizing Color

It's also possible to set colors. For background colors, you need to set backgroundColor (Color) property. For the color of the progress indicator, what you need to set is valueColor (Animation<Color>)

  LinearProgressIndicator(
    backgroundColor: Colors.cyanAccent,
    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
  )

Output:

 

Full Code

Below is a full code example that uses determinate LinearProgressIndicator along with customized background and indicator colors.

  import 'dart:async';
  
  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Tutorial by Woolha.com',
        home: _LinearProgressIndicatorApp(),
      );
    }
  }
  
  class _LinearProgressIndicatorApp extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
      return _LinearProgressIndicatorAppState();
    }
  }
  
  class _LinearProgressIndicatorAppState
      extends State<_LinearProgressIndicatorApp> {
    double _progress = 0;
  
    void startTimer() {
      new Timer.periodic(
        Duration(seconds: 1),
        (Timer timer) => setState(
          () {
            if (_progress == 1) {
              timer.cancel();
            } else {
              _progress += 0.2;
            }
          },
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                LinearProgressIndicator(
                  backgroundColor: Colors.cyanAccent,
                  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  value: _progress,
                ),
                RaisedButton(
                  child: Text('Start timer'),
                  onPressed: () {
                    setState(() {
                      _progress = 0;
                    });
                    startTimer();
                  },
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  

Output:

 

LinearProgressIndicator Properties

Below is the list of available properties you can pass as the constructor parameters.

• Key key: The widget key, used to control if it's should be replaced.
• double value: A value from 0.0 to 1.0 representing the completion progress (for determinate).
• Color backgroundColor: The background color of the widget.
• Animation<Color> valueColor: The progress indicator's color as an animated value.
• String semanticsLabel: Semantics.label for the widget.
• String semanticsValue: Semantics.value for the widget.