Flutter圆形进度条中间添加商品图片及计数器实现问题

因为sleek_circular_slider本身没有内置添加中间内容的API，你可以通过Stack组件将进度条和自定义的中间内容（图片+计数器）叠加在一起，实现需求效果。

以下是完整的实现代码：

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

class RewardProgressWidget extends StatelessWidget {
  final int currentCount;
  final int totalCount;

  const RewardProgressWidget({
    super.key,
    required this.currentCount,
    required this.totalCount,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        // 圆形进度条
        SleekCircularSlider(
          appearance: CircularSliderAppearance(
            customWidths: const CustomSliderWidths(progressBarWidth: 10),
            customColors: CustomSliderColors(
              progressBarColor: Colors.brown,
              trackColor: Colors.grey.shade200,
            ),
          ),
          min: 10,
          max: 28,
          initialValue: currentCount.toDouble(),
          // 隐藏默认百分比文本，避免和自定义内容冲突
          innerWidget: (_) => const SizedBox.shrink(),
        ),
        // 中间的商品图+计数器
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 替换为你的商品图片路径/网络地址
            Image.asset(
              'assets/images/coffee.png',
              width: 60,
              height: 60,
            ),
            const SizedBox(height: 8),
            // 已收集数量计数器
            Text(
              '$currentCount/$totalCount',
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.brown,
              ),
            ),
            const Text(
              '已收集咖啡',
              style: TextStyle(fontSize: 14, color: Colors.grey),
            ),
          ],
        ),
      ],
    );
  }
}

// 调用示例
// RewardProgressWidget(currentCount: 14, totalCount: 28)

关键细节说明： #

• Stack布局：通过alignment: Alignment.center确保中间内容精准覆盖在进度条中心。
• 隐藏默认文本：设置innerWidget为空容器，去掉sleek_circular_slider自带的百分比显示，避免视觉冲突。
• 自定义内容：用Column垂直排列图片和计数器，mainAxisSize: MainAxisSize.min防止内容撑满整个进度条区域。
• 图片适配：根据实际资源类型，把Image.asset替换成Image.network（网络图）或其他图片组件即可。

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