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),
),
),
);
}
}
