Flutter Web底部溢出问题：如何添加滚动条适配内容？

当前布局使用Column作为body的直接子项，Column会尝试在无高度约束的情况下容纳所有子组件，当内容总高度超出浏览器视口高度时，就会触发"bottom overflowed"错误，且默认没有滚动机制来显示超出部分。以下是两种针对性解决方案：

方案一：全局滚动（整个页面可滚动） #

将Column包裹在SingleChildScrollView中，当内容超出视口时自动生成滚动条，搭配Scrollbar组件可在Web端显示可视化滚动条：

修改lib/basic_screen.dart中的body部分：

body: Scrollbar(
  child: SingleChildScrollView(
    child: Column(
      children: const [
        AspectRatio(
          aspectRatio: 1.0,
          child: ImmutableWidget(),
        ),
        TextLayout(),
      ],
    ),
  ),
),

说明： #

• SingleChildScrollView提供垂直滚动能力，允许内容超出视口时滚动显示。
• Scrollbar为Web端添加可视化滚动条，提升交互体验。
• AspectRatio会保持1:1的宽高比，其高度由父容器的宽度决定，不会超出滚动范围。

方案二：局部滚动（仅文本区域可滚动） #

如果希望ImmutableWidget始终占满可用宽度（保持1:1比例），仅文本部分在剩余空间内滚动，可使用Expanded配合SingleChildScrollView：

修改lib/basic_screen.dart中的body部分：

body: Column(
  children: const [
    AspectRatio(
      aspectRatio: 1.0,
      child: ImmutableWidget(),
    ),
    Expanded(
      child: Scrollbar(
        child: SingleChildScrollView(
          child: TextLayout(),
        ),
      ),
    ),
  ],
),

说明： #

• Expanded让文本区域占据Column中除AspectRatio外的所有剩余空间。
• 仅文本部分超出时触发滚动，ImmutableWidget始终保持在视口内。

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