Flutter SlideTransition如何实现从屏幕底部90%位置开始滑入动画

问题核心原因 #

1. SlideTransition的Offset参数取值是相对于组件自身尺寸的比例，而非屏幕尺寸的比例。你当前设置的dy:0.9，实际含义是组件沿Y轴向下偏移自身高度的90%，不是偏移屏幕高度的90%。
2. 你当前的路由页面是全屏布局，没有给子组件加对齐约束，导致builder返回的固定高度Container被强制拉伸到全屏高度，偏移量计算基准完全不符合预期。

修复方案 #

你只需要给子组件增加底部对齐约束，保证你设置的容器高度生效，再调整偏移量数值即可：

class ChannelDetailRouter extends PageRoute<void> {
  final WidgetBuilder builder;

  ChannelDetailRouter({required this.builder, RouteSettings? settings}) : super(settings: settings);

  @override
  bool get opaque => false;

  @override
  Color? get barrierColor => Colors.black.withOpacity(0.5);

  @override
  String? get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return GestureDetector(
      onTap:()=>Navigator.of(context).pop(),
      behavior: HitTestBehavior.opaque, // 保证空白区域点击可以响应返回
      child: Align(
        alignment: Alignment.bottomCenter, // 核心：子组件对齐底部，不会被拉伸成全屏
        child: SlideTransition(
          position: Tween<Offset>(
            // 400高度的容器要偏移300，偏移比例为300/400=0.75，按需调整即可
            begin: const Offset(0, 0.75),
            end: Offset.zero,
          ).animate(CurvedAnimation(
            parent: animation,
            curve: Curves.easeIn,
          )),
          child: builder(context),
        ),
      ),
    );
  }

  @override
  Duration get transitionDuration => const Duration(milliseconds: 350);
}

使用时直接在builder中返回你指定高度的容器即可：

Navigator.of(context).push(ChannelDetailRouter(builder: (context) {
  return Container(
    height: 400,
    color: Colors.white,
    // 其他自定义样式
  );
}));

效果说明 #

修改后SlideTransition的偏移计算基准就是你设置的容器高度，400高度的容器0.75的dy值对应偏移量正好是300px，完全符合你要的从偏移300px位置滑到正常显示位置的需求。
如果你需要从屏幕高度90%的位置开始滑入，可以通过MediaQuery.of(context).size.height拿到屏幕高度，动态计算对应偏移比例即可。

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