Flutter移动端双向进度条实现：求推荐第三方包及示例代码

推荐使用dual_progress_indicator包，它专门为Flutter设计，可快速创建用于对比数值的双向进度条，完全适配移动端场景。

步骤1：添加依赖 #

在项目的pubspec.yaml中引入依赖：

dependencies:
  dual_progress_indicator: ^1.0.0

执行flutter pub get完成依赖安装。

步骤2：实现示例代码 #

以下是完整的页面示例，包含基础版和带标签的双向进度条，用于展示两个分数的对比：

import 'package:flutter/material.dart';
import 'package:dual_progress_indicator/dual_progress_indicator.dart';

class ScoreComparisonScreen extends StatelessWidget {
  // 示例分数，可替换为实际业务数据
  final int firstScore = 75;
  final int secondScore = 25;
  final int totalPossible = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分数对比')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 分数头部展示
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('分数1: $firstScore', style: const TextStyle(fontSize: 16)),
                  Text('分数2: $secondScore', style: const TextStyle(fontSize: 16)),
                ],
              ),
              const SizedBox(height: 16),
              // 基础双向进度条
              DualProgressIndicator(
                valueLeft: firstScore / totalPossible,
                valueRight: secondScore / totalPossible,
                height: 24,
                radius: 12,
                colorLeft: Colors.blueAccent,
                colorRight: Colors.orangeAccent,
                backgroundColor: Colors.grey[200],
              ),
              const SizedBox(height: 24),
              // 带标签的增强版进度条
              DualProgressIndicator(
                valueLeft: firstScore / totalPossible,
                valueRight: secondScore / totalPossible,
                height: 32,
                radius: 16,
                colorLeft: Colors.green,
                colorRight: Colors.redAccent,
                backgroundColor: Colors.grey[300],
                // 左侧标签
                childLeft: Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 8),
                    child: const Text('选手A', style: TextStyle(color: Colors.white, fontSize: 12)),
                  ),
                ),
                // 右侧标签
                childRight: Align(
                  alignment: Alignment.centerRight,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 8),
                    child: const Text('选手B', style: TextStyle(color: Colors.white, fontSize: 12)),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义说明 #

• 通过valueLeft和valueRight传入0-1之间的占比值（分数除以总分即可得到）
• 可自定义进度条的height、radius、colorLeft、colorRight等属性
• 支持添加childLeft和childRight来嵌入文本或其他组件作为标签

内容的提问来源于stack exchange，提问作者Rayyan Maqsood