Flutter响应式文件夹标签布局求助：按钮换行适配小屏

我是Flutter新手，正在为作品集网站实现带标签的文件夹效果：点击顶部标签按钮，切换文件夹中心区域的显示内容。目前标签按钮通过Row组件动态生成，但在小屏幕宽度下，按钮文字要么被过度缩小，要么直接截断。我尝试让按钮自动换行（超出父容器宽度时移至新行），但直接把包裹FolderButton的Row替换为Wrap后，按钮文字直接消失了。当前只能通过缩小文字比例保证可见，希望找到能让所有标签完整显示、文字不过度缩小的方案，且实现依赖文件夹为完美正方形。

问题核心是FolderButton外层的Flexible组件——Wrap的子组件不能使用Flexible（Flexible仅适配Row/Column这类线性布局），它会导致子组件无限扩展，最终挤压文字空间使其消失。只需两步修改即可实现自动换行：

1. 将Row替换为Wrap #

在Folder组件的build方法中，把原来的Row替换为Wrap，并设置间距和对齐方式：

// 替换原来的Row部分
Flexible(
  flex: 1,
  child: Padding(
    padding: const EdgeInsets.only(left: 7.0),
    child: Wrap(
      spacing: 4.0, // 标签之间的水平间距
      runSpacing: 0.0, // 换行后的垂直间距
      alignment: WrapAlignment.start,
      children: Folder.generateTabs(_selectedTab, _setTab),
    ),
  ),
),

2. 移除FolderButton中的Flexible #

修改FolderButton的build方法，去掉外层的Flexible组件：

@override
Widget build(BuildContext context) {
  return Container(
    height: 100,
    decoration: BoxDecoration(
      color: FolderButton.getTabShading(widget.selected),
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(5),
        topRight: Radius.circular(5),
      ),
    ),
    child: Padding(
      padding: FolderButton.getTabPadding(widget.selected),
      child: TextButton(
        onPressed: () {
          widget.setTab(widget.count);
        },
        style: FolderButton.theme["button"]?["picked"][widget.selected],
        child: Text(
          widget.title,
          textAlign: TextAlign.center,
          textScaleFactor: ScaleSize.textScaleFactor(context, maxTextScaleFactor: 1.5),
          style: TextStyle(
            color: Colors.deepPurpleAccent.shade100,
            fontSize: 10,
            height: 1,
          ),
        ),
      ),
    ),
  );
}

• 类型安全优化：把staticTabs的Map结构改成enum或者自定义TabItem类，避免字符串硬编码；将setTab的Function类型改为void Function(int)，明确参数类型。
• 主题样式优化：把FolderButton.theme的嵌套Map改成单独的ButtonStyle常量，或者集成到ThemeData中，提升代码可读性。
• 响应式适配：把固定大小的SizedBox(750,750)改成AspectRatio(aspectRatio: 1)，配合MediaQuery限制最大宽高，保证在不同屏幕上都能保持正方形比例。
• 字体适配：避免使用固定fontSize:10，改用Theme.of(context).textTheme.bodySmall这类系统字体样式，适配用户的系统字体设置。
• 路由管理：页面切换用Navigator.pushNamed替代直接创建MaterialPageRoute，在MaterialApp中配置路由表，更便于维护。

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