Flutter 实现胖进度条

Flutter 实现胖进度条

事情是这样的，我碰到一个需求，做一个胖进度条显示任务进度，但是我没有查到flutter有这个功能，只能自己做了

需求&UI

分析

首先胖进度条是有两个颜色，所以我们需要有两个控件分别表示这两个进度条，我们用最简单的方式就是Container，然后把它变成圆角的，然后两个叠在一起，就实现了我们的需求，怎么叠在一起呢？那就要用到Stack组件，这个组件相当于安卓开发中的相对布局（RelativeLayout）

代码

Stack(
  children: [
    ///灰色线进度条
    Container(
      margin: EdgeInsets.only(left: 10),
      height: 13,
      width: 100,
      decoration: BoxDecoration(
        color: Color(0xffD7D7D7),
        borderRadius: BorderRadius.circular(10),
      ),
    ),
    ///蓝色完成任务的进度条
    Container(
      margin: EdgeInsets.only(left: 10),
      height: 13,
      width: 20,
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  ],
),

总结

这里的宽度就是100，就是最大值，你也可以自己写大小，要是想要适应屏幕大小，那么你还可以用Expanded这个组件来控制大小，或者让Container的宽度为double.infinity来决定它的宽度。

实现的结果UI

如果对你有帮助，点个赞吧！！！