如何让SVG图片利用可用空间并避免硬编码尺寸？

你的问题核心在于FractionallySizedBox的约束传递和SVG的fit属性搭配不当。BoxFit.scaleDown仅在SVG原始尺寸超过容器时缩小，不会主动放大填充空间，再加上Flexible没有给FractionallySizedBox明确的宽度约束，导致SVG无法利用分配的空间。

修改方案一：调整布局结构+更换fit属性 #

把Flexible换成Expanded，确保FractionallySizedBox能拿到明确的宽度约束，同时将BoxFit.scaleDown改为BoxFit.contain（保持图片比例的同时最大化填充容器）：

Row(
  children: [
    Expanded(
      child: FractionallySizedBox(
        widthFactor: 0.65,
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: SvgPicture.asset(
            'assets/image.svg',
            fit: BoxFit.contain,
            alignment: Alignment.center,
          ),
        ),
      ),
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            item.name,
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.left,
          ),
          Text(
            item.type,
            textAlign: TextAlign.left,
          ),
        ],
      ),
    ),
  ],
)

修改方案二：用flex比例直接分配空间（更简洁） #

完全去掉FractionallySizedBox，通过Expanded的flex属性直接分配Row内的空间比例，布局逻辑更清晰：

Row(
  children: [
    Expanded(
      flex: 65,
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: SvgPicture.asset(
          'assets/image.svg',
          fit: BoxFit.contain,
          alignment: Alignment.center,
        ),
      ),
    ),
    Expanded(
      flex: 35,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            item.name,
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.left,
          ),
          Text(
            item.type,
            textAlign: TextAlign.left,
          ),
        ],
      ),
    ),
  ],
)

说明 #

• BoxFit.contain会保持SVG的原始宽高比，尽可能填满容器空间，不会拉伸变形
• 如果需要图片完全覆盖容器（允许裁剪），可以换成BoxFit.cover
• 加上alignment: Alignment.center可以确保SVG在容器内居中显示

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