Flutter实现多色线性进度指示器的可用组件及包咨询

可直接复用的第三方包 #

以下两个包都可以零额外开发快速实现你要的效果，按需选择即可：

• percent_indicator：是目前Flutter生态内使用量最高的进度条组件包，完全匹配动图效果。支持圆角、平滑过渡动画、自定义高度，你只需要给progressSegments参数传入对应占比、对应颜色的分段配置即可，最简实现代码如下：

LinearPercentIndicator(
  width: MediaQuery.of(context).size.width - 40,
  lineHeight: 16,
  barRadius: const Radius.circular(8),
  animation: true,
  animationDuration: 800,
  percent: 1,
  progressSegments: [
    LinearProgressSegment(0.3, Colors.red),
    LinearProgressSegment(0.2, Colors.orange),
    LinearProgressSegment(0.2, Colors.yellow),
    LinearProgressSegment(0.3, Colors.green),
  ],
)

• custom_linear_progress_indicator：专门面向多段线性进度场景做的组件，如果你需要段与段之间留空隙、单独给某段加点击事件、实现段内渐变色效果，选这个灵活度更高。

不想引入第三方依赖的原生实现方案 #

不需要安装任何包，用Flutter内置组件10行代码就能写出一模一样的静态效果，要动画的话套一层动画组件即可，最简代码：

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: SizedBox(
    height: 16,
    width: double.infinity,
    child: Row(
      children: const [
        Expanded(flex: 3, child: ColoredBox(color: Colors.red)),
        Expanded(flex: 2, child: ColoredBox(color: Colors.orange)),
        Expanded(flex: 2, child: ColoredBox(color: Colors.yellow)),
        Expanded(flex: 3, child: ColoredBox(color: Colors.green)),
      ],
    ),
  ),
)

如果要做进度加载动画，外面套AnimatedFractionallySizedBox控制总宽度，或者用AnimationController驱动各段的flex占比就行，逻辑非常简单。

内容的提问来源于stack exchange，提问作者Jeryn Immanuel