Flutter双向Dismissible组件滑动超出容器问题修复求助

我实现了一个基于Stack的双向Dismissible组件，初始效果如下：

实现代码如下：

Container(
      color: AppColors.greyColor.withOpacity(0.3),
      child: Padding(
        padding: const EdgeInsets.only(
            left: Dimension.paddingM,
            right: Dimension.paddingM,
            top: Dimension.paddingS,
            bottom: Dimension.paddingM),
        child: Stack(
          children: [
            Container(
              height: 69,
              decoration: const BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.all(
                      Radius.circular(Dimension.borderRadiusAll))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: Dimension.padding),
                    child: Text(
                      'Start',
                      style: const TextStyle(
                          color: AppColors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.w500),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: Dimension.padding),
                    child: Text(
                      'End',
                      style: const TextStyle(
                          color: AppColors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.w500),
                    ),
                  ),
                ],
              ),
            ),
            Dismissible(
                key: Key('badgeBidirectional'),
                confirmDismiss: (direction) {
                  return Future.value(false);
                },
                onDismissed: (direction) {},
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      margin: const EdgeInsets.all(4),
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius:
                            BorderRadius.circular(Dimension.borderRadiusAll),
                      ),
                      child: Center(
                          child: Icon(
                        Icons.compare_arrows,
                        color: AppColors.white,
                      )),
                    ),
                  ],
                )),
          ],
        ),
      ),
    );

目前遇到的问题是：双向滑动红色按钮时，该按钮会超出黑色容器范围，效果如下：

怀疑问题出在Stack或Row布局上，但未找到有效解决方案，且无现成插件可实现该效果，请问该如何修复？

问题核心是Stack默认不会裁剪子元素的超出部分，同时Dismissible的滑动范围没有被限制在黑色容器的边界内。可以通过以下两种方式解决：

方式一：给Stack添加裁剪行为 #

直接给Stack设置clipBehavior: Clip.hardEdge，让Stack裁剪掉超出自身范围的子元素。由于Stack的尺寸和黑色容器一致，滑动时红色按钮就不会超出黑色容器：

修改后的Stack代码片段：

Stack(
  clipBehavior: Clip.hardEdge, // 添加裁剪行为
  children: [
    // 原黑色容器代码保持不变
    // 原Dismissible代码保持不变
  ],
)

方式二：将Dismissible嵌套进黑色容器，约束滑动边界 #

把Dismissible放到黑色容器内部，作为Stack的子元素和原有Row同级，这样Dismissible的滑动范围会被黑色容器的边界天然约束，同时配合裁剪行为彻底解决超出问题：

修改后的完整布局代码：

Container(
  color: AppColors.greyColor.withOpacity(0.3),
  child: Padding(
    padding: const EdgeInsets.only(
        left: Dimension.paddingM,
        right: Dimension.paddingM,
        top: Dimension.paddingS,
        bottom: Dimension.paddingM),
    child: Container(
      height: 69,
      decoration: const BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.all(
              Radius.circular(Dimension.borderRadiusAll))),
      child: Stack(
        clipBehavior: Clip.hardEdge, // 添加裁剪
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: Dimension.padding),
                child: Text(
                  'Start',
                  style: const TextStyle(
                      color: AppColors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.w500),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right: Dimension.padding),
                child: Text(
                  'End',
                  style: const TextStyle(
                      color: AppColors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.w500),
                ),
              ),
            ],
          ),
          Dismissible(
              key: Key('badgeBidirectional'),
              confirmDismiss: (direction) {
                return Future.value(false);
              },
              onDismissed: (direction) {},
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    margin: const EdgeInsets.all(4),
                    height: 60,
                    width: 60,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius:
                          BorderRadius.circular(Dimension.borderRadiusAll),
                    ),
                    child: Center(
                        child: Icon(
                      Icons.compare_arrows,
                      color: AppColors.white,
                    )),
                  ),
                ],
              )),
        ],
      ),
    ),
  ),
);

补充说明 #

• 方式一简单直接，适合快速修复；方式二更符合布局逻辑，将可滑动元素放在容器内部，避免层次混乱。
• clipBehavior可选Clip.hardEdge（性能优先）或Clip.antiAlias（边缘平滑优先），可根据需求选择。

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