Flutter中ListView内卡片按钮无法铺满宽度的报错问题

问题场景 #

在Flutter开发中，尝试让OnBoardingPage页面ListView组件内AwardsSection中每个Card里的OutlinedButton铺满卡片宽度时，触发断言错误：BoxConstraints forces an infinite width。

报错详情 #

执行布局时抛出以下断言：
BoxConstraints forces an infinite width.
违规约束为：
BoxConstraints(w=Infinity, 40.0<=h<=Infinity)
相关错误组件：
OutlinedButton
OutlinedButton:file:///C:/Users/krisarya/My%20Profile/Github-krishnaacharya-official/flutter-landing-page/app/lib/onboarding/presentation/widgets/award_section.dart:40:27
award_section.dart:40
抛出异常时的调用栈：
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:49 throw
packages/flutter/src/rendering/box.dart 519:9 throwError
packages/flutter/src/rendering/box.dart 569:11
packages/flutter/src/rendering/box.dart 576:14 debugAssertIsValid
packages/flutter/src/rendering/object.dart 2386:23 layout
packages/flutter/src/rendering/box.dart 2382:11 layout
packages/flutter/src/rendering/proxy_box.dart 279:7 performLayout
packages/flutter/src/rendering/object.dart 2493:7 layout
packages/flutter/src/rendering/box.dart 2382:11 layout
抛出异常时正在处理的RenderObject：RenderConstrainedBox#f151b relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
creator: ConstrainedBox ← _InputPadding ← Semantics ← OutlinedButton ← Column ← Padding ← Semantics
← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#ddc19 ink renderer] ←
NotificationListener ← CustomPaint ← ⋯
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(unconstrained)
size: MISSING
additionalConstraints: BoxConstraints(w=Infinity, 40.0<=h<=Infinity)
该RenderObject的以下子节点（显示深度最多5层）：
child: RenderPhysicalShape#51eaf NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: RenderCustomPaint#a155c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: _RenderInkFeatures#7a4e5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: RenderSemanticsAnnotations#1ca50 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: RenderMouseRegion#7191b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
════════════════════════════════════════════════════════════════════════════════════════════════════

问题原因 #

Row组件本身在水平方向没有固定宽度限制，内部的Card因此也没有明确的宽度约束。当试图让OutlinedButton铺满宽度时，由于父级没有给出宽度上限，Button会尝试占用无限宽度，触发Flutter的布局断言错误。

解决方案 #

通过两步修改解决问题：

1. 用Expanded包裹每个Card，让Card在Row中均分可用宽度，给Card明确的宽度上限；
2. 开启Column的crossAxisAlignment: CrossAxisAlignment.stretch，让子组件（包括Button）铺满Column的宽度。

修改后的代码 #

class AwardsSection extends StatelessWidget {
  const AwardsSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: awards
              .map((award) => Expanded(
                    child: Card(
                      elevation: 3,
                      surfaceTintColor: Colors.white,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 8, vertical: 16.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Image.asset(award.imageUrl),
                            const SizedBox(height: 16),
                            ResponsiveText(
                                text: award.title,
                                textStyle: getResponsiveTextStyle(
                                    context, AppTextTheme.title)),
                            const SizedBox(
                              height: 32,
                            ),
                            OutlinedButton(
                                style: OutlinedButton.styleFrom(
                                    minimumSize: const Size.fromHeight(48)),
                                onPressed: () {},
                                child: const Text("Hello"))
                          ],
                        ),
                      ),
                    ),
                  ))
              .toList(),
        ),
      ],
    );
  }
}

补充说明 #

如果需要Card之间保留间距，可以在Expanded内部给Card添加margin，或者在Row的子组件之间插入SizedBox(width: 16)（根据需求调整间距大小）。

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