Flutter自定义信用分展示Widget实现求助

兄弟我太懂你这种刚接触Flutter，想做定制化UI却找不到参考的憋屈了！别慌，我来给你拆解怎么实现这个信用分展示组件，结合你的需求一步步来～

先拆解需求&UI结构 #

虽然看不到你的截图，但结合信用分组件的常见设计，核心元素肯定包含这些：

• 环形进度条（对应分数在区间内的占比）
• 居中的大字体信用分数
• 分数对应的等级标签（比如优秀/良好）
• 可能还有分数范围的辅助说明

一步步实现的核心代码 #

我给你写了一个可直接复用的基础版本，你可以根据自己的截图UI调整细节：

class CreditScoreWidget extends StatefulWidget {
  const CreditScoreWidget({super.key});

  @override
  State<CreditScoreWidget> createState() => _CreditScoreWidgetState();
}

class _CreditScoreWidgetState extends State<CreditScoreWidget> {
  int? _creditScore;
  String? _creditGrade;
  bool _isLoading = true;

  // 模拟API请求，实际开发替换成你的真实API调用逻辑
  Future<void> _fetchCreditScore() async {
    try {
      // 这里替换为你的真实API请求，比如用http/dio包发起请求
      // final response = await Dio().get('你的信用分API地址');
      // 解析返回的JSON数据拿到分数和等级

      // 模拟网络请求延迟
      await Future.delayed(const Duration(seconds: 1));
      setState(() {
        _creditScore = 780; // 替换为API返回的真实分数
        _creditGrade = "信用优秀"; // 替换为API返回的真实等级
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
        // 处理请求错误，比如打印日志、显示错误提示
        debugPrint("获取信用分失败：$e");
      });
    }
  }

  @override
  void initState() {
    super.initState();
    // 组件初始化时请求API
    _fetchCreditScore();
  }

  @override
  Widget build(BuildContext context) {
    // 加载状态显示加载指示器
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }

    // 数据获取失败时显示提示
    if (_creditScore == null) {
      return const Center(
        child: Text(
          "获取信用分失败，请稍后重试",
          style: TextStyle(color: Colors.grey),
        ),
      );
    }

    // 假设信用分范围是300-850，计算环形进度值
    const minScore = 300;
    const maxScore = 850;
    final progress = (_creditScore! - minScore) / (maxScore - minScore);

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 6,
            offset: Offset(0, 2),
          )
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 环形进度条+中心分数等级的组合
          Stack(
            alignment: Alignment.center,
            children: [
              SizedBox(
                width: 130,
                height: 130,
                child: CircularProgressIndicator(
                  value: progress,
                  strokeWidth: 10,
                  valueColor: const AlwaysStoppedAnimation<Color>(Colors.green),
                  backgroundColor: Colors.grey.shade200,
                ),
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    "$_creditScore",
                    style: const TextStyle(
                      fontSize: 36,
                      fontWeight: FontWeight.w700,
                      color: Colors.black87,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    _creditGrade ?? "",
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: _getGradeColor(_creditGrade),
                    ),
                  ),
                ],
              ),
            ],
          ),
          const SizedBox(height: 16),
          // 分数范围说明
          const Text(
            "信用分范围：300-850，分数越高信用资质越好",
            style: TextStyle(
              fontSize: 12,
              color: Colors.grey.shade600,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  // 根据信用等级返回对应颜色
  Color _getGradeColor(String? grade) {
    switch (grade) {
      case "信用优秀":
        return Colors.green;
      case "信用良好":
        return Colors.blue.shade600;
      case "信用一般":
        return Colors.orange;
      case "信用较差":
        return Colors.red;
      default:
        return Colors.grey;
    }
  }
}

新手必看的细节调整建议 #

• 如果你的截图里的环形是多分段颜色（比如不同分数段对应红/黄/绿），自带的CircularProgressIndicator满足不了的话，可以用CustomPaint自定义绘制环形，或者用percent_indicator这类第三方包（不过推荐先试试CustomPaint，能更快理解Flutter的自定义UI逻辑）
• 可以根据你的截图调整容器的背景色、环形的粗细、文字的字体样式这些细节，代码里的参数都可以随便改
• 实际开发时，记得把API请求的逻辑抽成单独的Service类，别直接写在Widget里，这样代码更整洁，也方便复用

备注：内容来源于stack exchange，提问作者Rohit269