【原】Flutter 加载过渡指示器

如进入页面时请求网络加载数据，这里最好是在页面上显示一个加载中的小圆圈。

https://dartpad.dartlang.org/flutter?id

1 线性指示器LinearProgressIndicator

LinearProgressIndicator是一个线性进度指示器 Widget，当 value为null时，进度条是一个线性的循环模式，表示正在加载；当 value 不为空时，可设置 0.0 到 1.0 之间的非空值，用来表示加载进度，如图4-1所示，基本使用代码如下：

Widget buildLinearProgress() {  //Container 来约束大小  return const SizedBox(    width: 300, height: 10,//会覆盖 进度条的 minHeight    child: LinearProgressIndicator(      // value: 0.3,      //进度高亮颜色      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),      //总进度的颜色      backgroundColor: Color(0xff00ff00),      //设置进度条的高度      minHeight: 10,    ),  );  }

2 圆形指示器 CircularProgressIndicator

Material风格的圆形小圆圈，未设置指定值时，一直顺时针旋转，设置值后，可用来指定具体的进度，效果如下图所示，基本使用代码如下

Widget buildCircularProgress() {    //通过Container或者SizeBox来限制大小    return const SizedBox(      width: 55, height: 55,      child: CircularProgressIndicator(        // value: 0.3,        //进度高亮颜色        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),        //总进度的颜色        backgroundColor: Color(0xff00ff00),        strokeWidth: 6.0, //圆圈的厚度      ),    );  }

3 小菊花CupertinoActivityIndicator

CupertinoActivityIndicator是一个顺时针旋转的iOS风格的活动指示器，效果如下图所示，基本使用代码如下：

Widget buildCupertinoIndicator() {    //通过Container或者SizeBox来限制大小    return const SizedBox(      width: 85, height: 85,      child: CupertinoActivityIndicator(        radius: 30, //半径        color: Colors.red,//颜色        animating: true,//是否转动 默认为 true 开启转动      ),    );  }

CupertinoActivityIndicator 需要结合 

CupertinoApp 与 CupertinoPageScaffold 来实现使用。