如何在Flutter中为Container外侧实现环形进度条？

核心思路 #

通过容器的padding预留环形进度条的宽度，外层容器利用CSS的conic-gradient实现环形进度的渐变效果；内层容器覆盖中间区域，用于展示进度百分比，同时通过border-radius: 50%保持整体圆形外观。

React组件示例 #

import React from 'react';
import './CircularProgressContainer.css';

const CircularProgressContainer = ({ progress = 0 }) => {
  // 限制进度在0-100的合理范围
  const clampedProgress = Math.max(0, Math.min(100, progress));
  const percentage = `${clampedProgress}%`;

  return (
    <div 
      className="circular-progress-container"
      style={{ background: `conic-gradient(#4CAF50 ${percentage}, #e0e0e0 ${percentage})` }}
    >
      <div className="progress-content">
        {clampedProgress}%
      </div>
    </div>
  );
};

export default CircularProgressContainer;

对应CSS样式（CircularProgressContainer.css） #

.circular-progress-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  padding: 8px; /* 控制环形进度条的粗细 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-content {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff; /* 中间区域背景色，与页面背景保持一致即可 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #333333;
}

使用方式 #

// 在其他组件中引入使用
<CircularProgressContainer progress={75} />

自定义调整项 #

• 修改.circular-progress-container的width和height可以调整组件整体大小
• 调整padding值可改变环形进度条的宽度
• 替换conic-gradient中的#4CAF50（完成色）和#e0e0e0（未完成色）可自定义进度条配色
• 修改.progress-content的字体、颜色属性可调整中间百分比文本样式

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