flutter 自定义进度条progress

系统自带进度条

有一定局限性，只能设置背景色，前景色要设置动画的颜色值，且不能自定义是否圆角等属性

// 2表示当前的值，10表示最大值
LinearProgressIndicator(
    value: 2 /10,
    backgroundColor: Constants().grayBgColor,
),

自定义进度条类

import 'package:flutter/material.dart';
import 'package:zetc_app/constants.dart';

/**
 * 自定义进度条
 */
class ProgressComp extends StatelessWidget {
  ProgressComp(
      {Key key,
      this.width,
      this.height,
      this.bgColor,
      this.frColor,
      this.borderRaius,
      this.value=1})
      : super(key: key);
  // 宽度-必填
  final double width;
  // 高度-必填
  final double height;
  // 背景色
  final Color bgColor;
  // 前景色
  final Color frColor;
  // 圆角
  final double borderRaius;
  // 当前比例(当前值/总数值)-必填
  final double value;
  @override
  Widget build(BuildContext context) {
    return Container(
        width: width ?? Constants().w120,
        height: height ?? Constants().h12,
        child: Stack(
          children: <Widget>[
            Container(
              width: width ?? Constants().w120,
              height: height ?? Constants().h12,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(
                      Radius.circular(height ?? Constants().h6)),
                  color: bgColor ?? Constants().inputBorderColor),
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(
                      Radius.circular(height ?? Constants().h6)),
                  color: frColor ?? Constants().defaultBtnBgColor),
              child: new AspectRatio(
                aspectRatio:
                    width != null && height != null && value!=null ? value*width / height : value*(Constants().w120 / Constants().h12),
              ),
            ),
          ],
        ));
  }
}

使用方式：

import 'package:demo_app/components/progress.dart';
child: ProgressComp(
     value:datalist[index - 1]['current'] /datalist[index - 1]['total'],
     width:Constants().w100,
     height:Constants().h10,
     frColor:Constants().defaultBtnBgColor,
     bgColor: Constants().grayBgColor,
),

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群