flutter如何显示进度条百分比

在Flutter中如何实现带百分比显示的进度条？我尝试使用LinearProgressIndicator，但它只能显示进度，无法直接展示百分比数值。希望在进度条旁边或上方实时显示当前进度的百分比（比如"75%"），请问有什么简单的方法可以实现这个效果？最好能提供完整的代码示例。

2 回复

在Flutter中，使用LinearProgressIndicator或CircularProgressIndicator显示进度条。通过value属性设置百分比，范围0.0到1.0。例如：

LinearProgressIndicator(
  value: 0.5, // 50%进度
)

若需显示百分比文本，可配合Text组件手动计算并显示。

更多关于flutter如何显示进度条百分比的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中显示进度条百分比，可以通过以下几种方式实现：

1. 线性进度条（LinearProgressIndicator）

LinearProgressIndicator(
  value: 0.7, // 进度值，范围0.0-1.0
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

2. 圆形进度条（CircularProgressIndicator）

CircularProgressIndicator(
  value: 0.7,
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  strokeWidth: 4,
)

3. 显示百分比文本的完整示例

class ProgressWithPercentage extends StatelessWidget {
  final double progress;
  
  const ProgressWithPercentage({Key? key, required this.progress}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LinearProgressIndicator(
          value: progress,
          backgroundColor: Colors.grey[300],
          valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
        ),
        SizedBox(height: 8),
        Text(
          '${(progress * 100).toStringAsFixed(1)}%',
          style: TextStyle(fontSize: 14, color: Colors.grey[700]),
        ),
      ],
    );
  }
}

// 使用方式
ProgressWithPercentage(progress: 0.75)

4. 自定义进度条

Container(
  height: 20,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.grey[300],
  ),
  child: Stack(
    children: [
      FractionallySizedBox(
        widthFactor: progress,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.blue,
          ),
        ),
      ),
      Center(
        child: Text(
          '${(progress * 100).toStringAsFixed(0)}%',
          style: TextStyle(
            color: progress > 0.5 ? Colors.white : Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ],
  ),
)

主要参数说明：

  • value: 进度值（0.0到1.0）
  • backgroundColor: 背景颜色
  • valueColor: 进度条颜色
  • 使用toStringAsFixed()控制小数位数

选择适合你应用场景的实现方式即可。

回到顶部