Flutter布局报错：RenderPadding获无限尺寸，求解决方案

问题描述 #

在Flutter页面添加组件时，RadarChart.light触发渲染库错误：

════════ Exception caught by rendering library ═════════════════════════════════
RenderPadding object was given an infinite size during layout.
The relevant error-causing widget was
Padding
════════════════════════════════════════════════════════════════════════════════

相关代码 #

SafeArea(
 child: Scaffold(
   body: AppBackground(
    child: SingleChildScrollView(               
     child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 9.0),
      child: Column(
          // crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const HeadWidget(title: "Computer Science"),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                RadarChart.light(
                  ticks: ticks,
                  features: features,
                  data: data,
                ),
                Text(
                  "PERFORMANCE BY COURSE",
                  style: GoogleFonts.roboto(
                      color: Kwhite, fontWeight: FontWeight.w700),
                ),
                const PerformanceByCourseCard(),
                SizedBox(
                  height: MediaQuery.of(context).size.height / 20,
                ),
                Text(
                  "PERFORMANCE SUMMARY",
                  style: GoogleFonts.roboto(
                      color: KRedOrange, fontWeight: FontWeight.w700),
                ),
                const PerformanceSummaryCards(),
                Text(
                  "PERFORMANCE BY PLO",
                  style: GoogleFonts.roboto(
                      color: KRedOrange, fontWeight: FontWeight.w700),
                ),
                const PerformanceByPLOCard(),
                Text(
                  "PERFORMANCE BY GA",
                  style: GoogleFonts.roboto(
                      color: KRedOrange, fontWeight: FontWeight.w700),
                ),
                const PerformanceByGACard(),
              ],
            ),
            RoundedButton(
              text: "DOWNLOAD YOUR TRANSCRIPT",
              press: (context) {},
              fontSize: 12,
              margin: 0,
              paddingHorizontal: 0,
              paddingVertical: 0,
              borderRadius: 5,
            ),
          ]),
    )))));

解决方案 #

1. 给RadarChart添加固定尺寸约束 #

用SizedBox包裹RadarChart，明确指定宽高，让布局系统能计算出确定的空间：

SizedBox(
  width: MediaQuery.of(context).size.width * 0.9, // 适配屏幕宽度的90%
  height: 300, // 固定高度，可根据需求调整
  child: RadarChart.light(
    ticks: ticks,
    features: features,
    data: data,
  ),
)

2. 使用AspectRatio保持宽高比 #

如果需要雷达图保持固定宽高比例，用AspectRatio包裹：

AspectRatio(
  aspectRatio: 1, // 正方形比例，可按需修改
  child: RadarChart.light(
    ticks: ticks,
    features: features,
    data: data,
  ),
)

错误原因 #

SingleChildScrollView会为子组件提供无限的垂直空间，而RadarChart.light本身没有内置尺寸约束，会试图占用无限空间，导致包裹它的Padding组件无法完成布局计算，最终触发渲染错误。给RadarChart添加明确的尺寸约束后，布局系统就能正确分配空间，解决问题。

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