Flutter 进度指示器

Flutter 进度指示器分为两种：LinearProgressIndicator 和 CircularProgressIndicator 可以同时用于精确的进度指示和模糊的进度指示

精确的进度通常可以用于任务进度可以计算和预估的情况，比如文件下载

模糊进度则用户任务进度无法准确获得的情况，如下拉刷新，数据提交等。

效果图：

代码如下：

import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

/*

*  LinearProgressIndicator 线性，条状进度条

*  CircularProgressIndicator 圆形进度条

*/

class LinearProgressPage extends StatefulWidget {

@override

  _LinearProgressPageState createState() =>_LinearProgressPageState();

}

class _LinearProgressPageState extends State {

@override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar:AppBar(

            title:Text('指示器'),

        ),

        body:Column(

        children: [

            _linearProgressIndicator(),

            _circleProgressIndicator(),

          ],

        ));

  }

/*

* 线性进度条 设置宽和高通过 ConstrainedBox、SizedBox 进行设置

*/

  _linearProgressIndicator() {

return Container(

margin:EdgeInsets.fromLTRB(20, 100, 20, 0),

      child:SizedBox(

        width: double.infinity,

        height:10,

        child:LinearProgressIndicator(

         value:0.9,

          backgroundColor: Colors.grey,

          valueColor:AlwaysStoppedAnimation(Colors.blue),

        ),

      ),

    );

  }

/*

* 圆形进度条 设置宽和高通过 ConstrainedBox、SizedBox 进行设置

*/

  _circleProgressIndicator() {

return Container(

margin:EdgeInsets.only(top:100),

      child:SizedBox(

width:100,

        height:100,

        child:CircularProgressIndicator(

value:.5,

          backgroundColor: Colors.grey,

          valueColor:AlwaysStoppedAnimation(Colors.red),

        ),

      ),

    );

  }

}