Progress Flutter basic components of the indicator

Progress Indicator

Material component library provides two progress indicators: LinearProgressIndicator and CircularProgressIndicator, they can be used for precise indication of progress and vague indication of progress at the same time. Exact schedule is typically used when the task can be calculated and projected progress, such as file downloads; and the progress of the case of fuzzy user tasks progress can not be accurately obtained, the following pull to refresh, and other data submitted.
LinearProgressIndicator
LinearProgressIndicator is a linear, progress bar strip, defined as follows:

LinearProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  ...
})

• value: value indicates the current progress in the range [0,1]; if the value is a pointer executes animation loop (blur progress) is null; When the value is not null, the progress indicator is a specific progress bar.
• backgroundColor: background color of the indicator.
• valueColor:
  indicator of the progress bar color; It is worth noting that the value type is Animation, which allows us the color of the progress bar can also specify the animation. If we do not need to perform color animated progress bar, in other words, we want the progress bar to apply a solid color, then we can be specified by AlwaysStoppedAnimation.
  Example:

// 模糊进度条(会执行一个动画)
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

Run results as shown:

a first execution cycle progress bar animation: blue bar has been moved, while the second progress bar is stationary, stopped at the position of 50%.
CircularProgressIndicator
CircularProgressIndicator progress bar is a circular, defined as follows:

 CircularProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  this.strokeWidth = 4.0,
  ...   
})

The first three parameters and LinearProgressIndicator same, is omitted. strokeWidth circular progress bar indicates the thickness. Examples are as follows:

// 模糊进度条(会执行一个旋转动画)
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%，会显示一个半圆
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

Run results as shown:

first performs a rotation animation progress bar, and the second progress bar is stationary, it is stopped at the position of 50%.
Custom sizes
we can find LinearProgressIndicatorand CircularProgressIndicator, and no argument circular progress bar to set the size of the offer; if we want to LinearProgressIndicator the line carefully, or want CircularProgressIndicatora larger circle how to do?

In fact, LinearProgressIndicatorand CircularProgressIndicatorsize are taken as the boundary of the parent container plotted. Knowing this, we can, as restricted by the size of Widget ConstrainedBox, SizedBoxto specify the dimensions, such as:

// 线性进度条高度指定为3
SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),
// 圆形进度条直径指定为100
SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

As shown in FIG operation effect:

note that if the width and height of the display space CircularProgressIndicator different, is displayed as an ellipse. Such as:

// 宽高不等
SizedBox(
  height: 100,
  width: 130,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

Operating results as shown:

progress color animation
as I said before you can make animated progress bar color by valueColor, here to give an example, the reader in understanding the Flutter animated chapter and then look back.

We achieve a progress bar within 3 seconds of animation from gray to blue:

import 'package:flutter/material.dart';

class ProgressRoute extends StatefulWidget {
  @override
  _ProgressRouteState createState() => _ProgressRouteState();
}

class _ProgressRouteState extends State<ProgressRoute>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    //动画执行时间3秒  
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
            Padding(
            padding: EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                .animate(_animationController), // 从灰色变成蓝色
              value: _animationController.value,
            ),
          );
        ],
      ),
    );
  }
}

Custom style progress indicator
customize the progress indicator styles, you can customize by drawing logical CustomPainter Widget, in fact LinearProgressIndicator and CircularProgressIndicator is also to achieve the appearance drawn by CustomPainter. About CustomPainter, we will "Custom Widget" is described in detail in a later chapter.

flutter_spinkit package provides a variety of styles of fuzzy progress indicator, if the interested reader can refer to.