如何在Flutter中搭建网站页脚？现有实现遇阻求解决方案

我想参照下图实现Flutter页脚，但目前的代码无法达到预期效果，恳请帮忙分析并给出解决思路。

我的现有代码：

Container(
              color: Colors.grey[600],
              child: Row(children: [
                const Padding(
                  padding: EdgeInsets.all(30.0),
                ),
                BottomAppBar(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                    ],
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.all(30.0),
                ),
                BottomAppBar(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                    ],
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.all(30.0),
                ),
                BottomAppBar(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                    ],
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.all(30.0),
                ),
                BottomAppBar(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                      Text('Escort'),
                    ],
                  ),
                ),
              ]),
            )

问题分析 #

1. 组件选择错误：BottomAppBar是专为底部导航栏设计的组件，用来做页脚容器会自带不必要的样式（比如默认背景、阴影），还会干扰布局逻辑。
2. 间距与宽度分配不合理：用空Padding做列间距灵活性差，且Row未给内容列分配合理宽度，易导致布局溢出或排列不均。
3. Column布局失效：Column的mainAxisAlignment: MainAxisAlignment.spaceAround需要指定容器高度才能生效，默认情况下Column会随子组件高度收缩，这个属性起不到垂直间距作用。

优化后的实现代码 #

Container(
  color: Colors.grey[600],
  padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
  child: Row(
    // 让四个内容列水平均匀分布
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      // 用Expanded让每个列平均分配Row宽度
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('关于我们', style: TextStyle(color: Colors.white)),
            SizedBox(height: 8),
            Text('服务介绍', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('隐私政策', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('联系我们', style: TextStyle(color: Colors.white70)),
          ],
        ),
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('热门服务', style: TextStyle(color: Colors.white)),
            SizedBox(height: 8),
            Text('陪同服务', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('专属顾问', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('定制方案', style: TextStyle(color: Colors.white70)),
          ],
        ),
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('关注我们', style: TextStyle(color: Colors.white)),
            SizedBox(height: 8),
            Text('微信公众号', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('官方微博', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('抖音账号', style: TextStyle(color: Colors.white70)),
          ],
        ),
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('下载APP', style: TextStyle(color: Colors.white)),
            SizedBox(height: 8),
            Text('iOS版本', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('安卓版本', style: TextStyle(color: Colors.white70)),
            SizedBox(height: 8),
            Text('PC客户端', style: TextStyle(color: Colors.white70)),
          ],
        ),
      ),
    ],
  ),
)

优化说明 #

• 移除BottomAppBar，直接用Column承载文本，避免不必要的样式干扰。
• 用Expanded让四个内容列平均分配Row宽度，适配不同屏幕尺寸。
• 用SizedBox控制文本垂直间距，比空Padding更直观易维护。
• 通过文本颜色区分标题和子项，符合常见页脚的视觉层级设计。
• 给外层Container设置统一内边距，避免内容贴边，提升美观度。

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