Flutter中如何使Stack内Column中的Row宽度匹配文件夹图标宽度

开发Flutter页面时使用CustomScrollView组件嵌套SliverGrid，SliverGrid中渲染的自定义组件代码如下：

return Stack(
  children: [
    Image.asset("assets/icons/folder_icon.png"),
    Positioned(
      top: 30,
      left: 10,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(
                child: Icon(Icons.add),
                onTap: onTapSync,
              ),
              InkWell(
                child: Icon(Icons.sync),
                onTap: onTapSync,
              ),
            ],
          ),
          Text(
            title,
            style: TextStyle(fontSize: 16),
          ),
        ],
      ),
    )
  ],
);

当前代码运行效果：

需要实现的效果是让Row组件宽度适配底层文件夹图标的宽度，使得Row内的两个图标分别对齐文件夹图片的左右两侧。
约束要求：实现过程中禁止使用以下两种方案：

• 在两个图标之间添加固定宽度的SizedBox(width: xx)
• 将图标移出Column组件

问题出在Positioned的约束设置上：你只给组件设置了left: 10的左偏移，没有设置右侧边界，默认情况下Positioned的子组件会按内容自适应宽度，因此外层包裹的Column和内部Row只会收缩到两个图标加文本的最小内容宽度，MainAxisAlignment.spaceBetween没有多余空间分配，自然无法实现两端对齐。

你只需要给Positioned补充和左侧偏移对应的right属性，就能强制Positioned下的子组件（即Column）宽度撑满「Stack可用宽度 - 左偏移值 - 右偏移值」的范围，刚好匹配文件夹图标的内容宽度，内部Row的两端对齐规则会自动生效，两个图标会分别贴到对应左右两侧。

修改后的核心代码片段：

Positioned(
  top: 30,
  left: 10,
  right: 10, // 新增右侧偏移，和left值保持一致即可
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.min, // 可选配置，避免Column占满多余垂直高度
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          InkWell(
            child: Icon(Icons.add),
            onTap: onTapSync,
          ),
          InkWell(
            child: Icon(Icons.sync),
            onTap: onTapSync,
          ),
        ],
      ),
      Text(
        title,
        style: TextStyle(fontSize: 16),
      ),
    ],
  ),
)

如果你使用的文件夹图标本身带有设计上的内置左右留白，只需要微调right的数值匹配视觉效果即可，全程不需要写固定宽度组件，也不需要调整现有组件的层级结构。

内容的提问来源于stack exchange，提问作者Cyrus the Great