Flutter 进度条组件

Flutter 进度条组件

条形进度条

value：表示当前进度，取值范围为[0,1]。如果value为null则进度条会执行循环动画（模糊进度）；如果value不为null，则进度条有具体进度。

valueColor：进度条颜色。可以通过AlwaysStoppedAnimation指定。

backgroundColor：进度条背景颜色。

minHeight：进度条高度。

模糊进度条

const LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  backgroundColor: Colors.grey,
)

具体进度条

const LinearProgressIndicator(
  value: 0.5,
  minHeight: 10,
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation(Colors.blue),
)

环形进度条

strokeWidth：设置弧线宽度。

其他属性与LinearProgressIndicator基本类似。

模糊进度条

const CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.red),
  backgroundColor: Colors.grey,
)

具体进度条

const CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation(Colors.red),
  value: 0.5,
  strokeWidth: 4.0,
  backgroundColor: Colors.grey,
)

设置尺寸

LinearProgressIndicator和CircularProgressIndicator没有提供设置尺寸的参数，它们是去父容器的尺寸作为绘制的边界，这时可以借助SizedBox、ConstrainedBox限制指定尺寸。

条形进度条设置尺寸

const SizedBox(
  height: 3,
  width: 100,
  child: LinearProgressIndicator(
    value: 0.5,
    backgroundColor: Colors.grey,
    valueColor: AlwaysStoppedAnimation(Colors.blue),
  ),
)

环形进度条设置尺寸

const SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    value: 0.5,
    backgroundColor: Colors.grey,
    valueColor: AlwaysStoppedAnimation(Colors.blue),
  ),
)

进度条动画

3秒内进度条颜色由灰色变为蓝色。

import 'package:flutter/material.dart';

class ProgressPage extends StatefulWidget {
    const ProgressPage({Key? key}) : super(key: key);

    @override
    State createState() {
        return _ProgressPageState();
    }
}

class _ProgressPageState extends State
    with SingleTickerProviderStateMixin {
    late AnimationController _animationController;

    @override
    void initState() {
        _animationController =
            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 Scaffold(
            appBar: AppBar(
                title: Text("进度条组件"),
            ),
            body: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                    children: [                       
                        Text("3秒由灰色变蓝色动画"),
                        LinearProgressIndicator(
                            backgroundColor: Colors.grey,
                            valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                            .animate(_animationController),
                            value: _animationController.value,
                        ),
                    ],
                ),
            ),
        );
    }
}

iOS风格

const CupertinoActivityIndicator(
  radius: 10,
  animating: true,
)