Flutter Web实现滚动条显示在页面外侧的方法

我正在使用Flutter开发网页，创建列表组件后，滚动条紧邻列表组件，当前效果如下：

期望将滚动条移至页面外侧，目标效果如下：

当前代码如下：

Scaffold(
      appBar: AppBar(),
      body: SizedBox(
        width: MediaQuery.sizeOf(context).width,
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  constraints: const BoxConstraints(
                    maxWidth: 1200,
                  ),
                  child: Column(
                    children: [
                             //widgets
                    ],
                  ),
                )
                ],
            ),
          ),
        ),
      ),
    );

解决方案 #

问题核心在于当前SingleChildScrollView被Center和固定宽度的Container包裹，导致滚动条仅跟随容器范围显示。要让滚动条移至页面外侧，需让SingleChildScrollView占据整个页面宽度，再将内容居中放置。

修改后的代码：

Scaffold(
  appBar: AppBar(),
  body: SingleChildScrollView(
    child: Center(
      child: Container(
        constraints: const BoxConstraints(maxWidth: 1200),
        child: Column(
          children: [
            // widgets
          ],
        ),
      ),
    ),
  ),
);

说明 #

• SingleChildScrollView直接作为body的子组件，会自动占据整个页面宽度，滚动条自然显示在页面最外侧
• 内部的Center和Container负责将内容限制在1200px宽度内并居中，既保留原有内容布局，又实现了滚动条的位置要求

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