如何在Flutter中实现顶部带双文本、底部为类进度条的自定义Widget

实现思路 #

• 整体采用Column组件做垂直布局，分为顶部文本区域、底部进度条区域两部分
• 顶部文本区域用Row实现，通过MainAxisAlignment.spaceBetween让两段文本分别对齐左右两端
• 底部进度条用Stack层叠实现：底层是灰色背景轨道，上层是带圆角的进度指示条，宽度根据当前进度值动态计算

完整示例代码 #

import 'package:flutter/material.dart';

class CustomProgressBar extends StatelessWidget {
  // 左侧展示文本
  final String leftText;
  // 右侧展示文本
  final String rightText;
  // 当前进度 取值范围0~1
  final double progress;
  // 进度条高度
  final double barHeight;
  // 进度条背景色
  final Color backgroundColor;
  // 进度条前景色
  final Color progressColor;

  const CustomProgressBar({
    super.key,
    required this.leftText,
    required this.rightText,
    required this.progress,
    this.barHeight = 8,
    this.backgroundColor = const Color(0xFFE0E0E0),
    this.progressColor = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 顶部文本区域
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(leftText, style: const TextStyle(fontSize: 14)),
            Text(rightText, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500)),
          ],
        ),
        const SizedBox(height: 8),
        // 底部进度条区域
        LayoutBuilder(
          builder: (context, constraints) {
            final progressWidth = constraints.maxWidth * progress.clamp(0, 1);
            return Stack(
              children: [
                // 背景轨道
                Container(
                  height: barHeight,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: backgroundColor,
                    borderRadius: BorderRadius.circular(barHeight / 2),
                  ),
                ),
                // 进度条
                Container(
                  height: barHeight,
                  width: progressWidth,
                  decoration: BoxDecoration(
                    color: progressColor,
                    borderRadius: BorderRadius.circular(barHeight / 2),
                  ),
                )
              ],
            );
          },
        )
      ],
    );
  }
}

// 调用示例
// CustomProgressBar(
//   leftText: "已完成进度",
//   rightText: "70%",
//   progress: 0.7,
// )

效果调整说明 #

• 如果需要进度条加载动画，可以将组件改为StatefulWidget，配合AnimationController给进度条宽度添加过渡动画
• 文本样式、圆角尺寸、进度条配色都可以根据设计需求扩展入参自定义

内容的提问来源于stack exchange，提问作者Aditya Patil