sliding_up_panel组件Footer遮挡面板内容问题求助

问题说明 #

使用sliding_up_panel组件时，通过footer属性添加底部多按钮布局后，遇到两个问题：

• 面板收起状态下，面板内文本被footer按钮遮挡
• 按照文档提示给面板添加底部内边距后，面板展开时底部出现灰色空白区域，文本遮挡问题仍未解决

组件文档提示 #

Footer：可选的持久化组件，悬浮在面板上方并附着于面板底部。面板底部的内容会被该组件遮挡。请为面板底部添加内边距以避免遮挡。

原始代码示例 #

SlidingUpPanel(
  backdropEnabled: true,
  color: Colors.transparent,
  minHeight: 140,
  maxHeight: 300,
  parallaxEnabled: true,
  footer: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {},
              child: Text("Subscribe"),
            ),
          ),
          Row(
            children: [
              Expanded(
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text("Chat"),
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                  child: ElevatedButton(
                onPressed: () {},
                child: Text("Learn More"),
              ))
            ],
          ),
        ],
      ),
    ),
  ),
  panel: Padding(
    padding: const EdgeInsets.only(bottom: 90.0),
    child: Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Padding(
            padding: const EdgeInsets.all(20),
            child: Container(
              width: 40,
              height: 3,
              decoration: const BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Padding(
              padding: const EdgeInsets.only(
                left: 20,
                right: 20,
              ),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: [
                  Text("Main Heading"),
                  Text("Sub Heading"),
                  Text(
                      "Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1"),
                  Text("Text area 2"),
                  Text("Text area 3"),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ),
)

问题效果 #

面板收起状态 #

面板展开状态 #

解决方案 #

问题根源 #

原始代码中把底部内边距加在了panel的外层Padding组件上，而SlidingUpPanel的color设为透明，所以内边距区域显示的是背景色（灰色）；同时，footer悬浮在面板上方，内层白色容器的内容仍会被遮挡。

修改步骤 #

1. 将底部内边距从panel的外层Padding移到白色Container的内部子组件（Column）上，确保内边距在白色容器范围内，避免灰色区域。
2. 调整内边距值为footer的实际高度（包含其内部padding和控件高度），确保内容完全避开footer遮挡。

修改后的核心代码 #

panel: Container(
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(30),
      topRight: Radius.circular(30),
    ),
  ),
  child: Padding(
    // 内边距值匹配footer的实际高度（含内部padding）
    padding: const EdgeInsets.only(bottom: 110.0),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
          padding: const EdgeInsets.all(20),
          child: Container(
            width: 40,
            height: 3,
            decoration: const BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.all(
                Radius.circular(10),
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment.topLeft,
          child: Padding(
            padding: const EdgeInsets.only(
              left: 20,
              right: 20,
            ),
            child: Column(
              crossAxisAlignment:
                  CrossAxisAlignment.start,
              children: [
                Text("Main Heading"),
                Text("Sub Heading"),
                Text(
                    "Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1"),
                Text("Text area 2"),
                Text("Text area 3"),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),

补充说明 #

• footer的实际高度计算：内部Padding的all(10)占20高度，加上两个按钮（各约48高度）及默认间距，总高度约110，可根据实际布局调整内边距值。
• 若footer高度动态变化，可使用LayoutBuilder或GlobalKey获取footer的实际高度，再动态设置内边距，确保适配所有场景。

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