Flutter页面跳转时如何实现圆角页面且适配屏幕？

针对你遇到的问题，以下是优化后的实现方案，解决固定圆角适配差、动画过渡生硬的问题：

核心改进点 #

• 采用屏幕自适应圆角：基于设备屏幕尺寸动态计算圆角大小，保证不同设备上比例一致
• 使用圆角动画补间：替代硬判断动画值的方式，实现圆角从有到无的平滑过渡
• 同步滑动与圆角动画曲线：让视觉效果更协调

完整代码实现 #

import 'package:flutter/material.dart';

class RoundedSlideRoute extends PageRouteBuilder {
  final Widget child;
  final Curve curve;
  final Duration duration;

  RoundedSlideRoute({
    required this.child,
    this.curve = Curves.easeInOut,
    this.duration = const Duration(milliseconds: 300),
  }) : super(
          pageBuilder: (context, animation, secondaryAnimation) => child,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // 基于屏幕短边的1/12计算圆角，适配不同设备
            final screenShortSide = MediaQuery.of(context).size.shortestSide;
            final adaptiveCornerRadius = screenShortSide / 12;

            // 圆角动画补间：从顶部圆角过渡到无圆角
            final borderRadiusTween = BorderRadiusTween(
              begin: BorderRadius.vertical(top: Radius.circular(adaptiveCornerRadius)),
              end: BorderRadius.zero,
            );

            // 滑动位移动画
            final offsetAnimation = Tween<Offset>(
              begin: const Offset(0, 1),
              end: Offset.zero,
            ).animate(CurvedAnimation(
              parent: animation,
              curve: curve,
            ));

            return SlideTransition(
              position: offsetAnimation,
              child: ClipRRect(
                borderRadius: borderRadiusTween.evaluate(animation),
                child: child,
              ),
            );
          },
        );
}

使用方式 #

在跳转页面时直接调用自定义路由：

Navigator.push(
  context,
  RoundedSlideRoute(child: TargetPage()),
);

额外注意事项 #

• 确保目标页面的根布局占满屏幕（如使用Scaffold或设置宽高为double.infinity），否则ClipRRect无法正确裁剪全屏区域
• 可根据需求调整screenShortSide / 12的比例值，控制圆角的大小

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