Flutter CircularProgressIndicator进度指示器/Loading

一种材料设计循环进度指示器，它旋转表示应用程序正在忙。

可用于Loading显示，也可以用作进度显示

参数详解

属性	说明
value	进度值， 进度值在0到1.0之间。 如果为空显示动画，非空显示进度
backgroundColor	背景颜色
valueColor	进度值颜色
strokeWidth	进度值宽度，默认4.0
semanticsLabel	语义
semanticsValue	语义

代码示例

 

• 用作Loading 使用起来非常简单 

child: CircularProgressIndicator(),

• 给定义一个背景颜色 

child: CircularProgressIndicator(
   backgroundColor: Colors.black12,
),

• 给定义一个进度条颜色 

child: CircularProgressIndicator(
  valueColor:new AlwaysStoppedAnimation(Colors.red),
),

• 进度条宽度默认为4.0.我们给加宽，设置为10 看一下效果

child: CircularProgressIndicator(
  strokeWidth:10,
),

• 在示例代码中 我使用了倒计时器展示加载进度条效果 

child: CircularProgressIndicator(
  backgroundColor: Colors.orange[100],
  valueColor: new AlwaysStoppedAnimation(Colors.orange),
  value: _value/ 190,
),

• 倒计时器 示例代码

Timer _timer;
double _value = 0;
void startCountdownTimer() {

  if(_timer != null){
    _timer.cancel(); 
    _timer = null;
  }
  // 50毫秒执行一次
  const oneSec = const Duration(milliseconds: 50);

  var callback = (timer) => {
    setState(() {
      if (_value > 200) {
        _timer.cancel(); 
      } else { 
        _value = _value + 1; 
      } 
    }) 
  }; 
  _timer = Timer.periodic(oneSec, callback);

}

效果图

完整代码

import 'dart:async';

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    home: MyHome(),
  ));
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State {

  bool _offstage = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CircularProgressIndicator'),),
      body: Column(
        children: [
          SizedBox(height: 10,),
          Center(
            child: RaisedButton(
              child: Text('button'),
              onPressed: () async {
                //开始倒计时
                _value = 0;
                startCountdownTimer();
                // 进度指示器   loading  显示
                setState(() {
                  _offstage = false;
                });

                //等待10秒钟
                await Future.delayed(Duration(milliseconds: 10000)); 

                // 进度指示器   loading  隐藏
                setState(() {
                  _offstage = true;
                });
              },
            ),
          ),
          SizedBox(height: 50,),
          Center(
            child: Offstage(
              offstage:_offstage,
              //默认 指示器
              child: CircularProgressIndicator(),
            ),
          ),

          SizedBox(height: 50,),
          Center(
            child: Offstage(
              offstage:_offstage,
              //有背景颜色 指示器
              child: CircularProgressIndicator(
                backgroundColor: Colors.black12,
              ),
            ),
          ),

          SizedBox(height: 50,),
          Center(
            child: Offstage(
              offstage:_offstage,
              //有进度值颜色 指示器
              child: CircularProgressIndicator(
                valueColor:new AlwaysStoppedAnimation(Colors.red),
              ),
            ),
          ),

          SizedBox(height: 50,),
          Center(
            child: Offstage(
              offstage:_offstage,
              //进度值 10个宽 指示器
              child: CircularProgressIndicator(
                strokeWidth:10,
              ),
            ),
          ),

          SizedBox(height: 50,),
          Center(
            child: Offstage(
              offstage:_offstage,
              // 根据 倒计时给定 进度值， 进度值在0到1.0之间。 如果为空显示动画，非空显示进度
              child: CircularProgressIndicator(
                backgroundColor: Colors.orange[100],
                valueColor: new AlwaysStoppedAnimation(Colors.orange),
                value: _value / 190,
              ),
            ),
          ),
        ],
      ),
    );
  }

// 倒计时
  Timer _timer;
  double _value = 0;
  void startCountdownTimer() {

    if(_timer != null){
      _timer.cancel(); 
      _timer = null;
    }
    // 50毫秒执行一次
    const oneSec = const Duration(milliseconds: 50);

    var callback = (timer) => {
      setState(() {
        if (_value > 200) {
          _timer.cancel(); 
        } else { 
          _value = _value + 1; 
        } 
      }) 
    }; 
    _timer = Timer.periodic(oneSec, callback);

  }

}

查看完整代码