如何在Flutter中实现类似iOS的模态页面？我曾用React Native Stack Navigator实现过

你可以通过Flutter的Navigator结合原生Cupertino组件或自定义路由动画来实现这种iOS风格的模态页面，以下是两种实用方案：

方案一：用CupertinoPageRoute实现原生效果（推荐） #

这是最贴合iOS原生模态页面的实现方式，自带底部滑入动画和iOS风格导航栏：

// 触发模态跳转
Navigator.push(
  context,
  CupertinoPageRoute(
    fullscreenDialog: true, // 关键参数：开启全屏模态模式
    builder: (context) => const ModalContentScreen(),
  ),
);

自定义模态页面内容，搭配Cupertino组件还原iOS视觉风格：

class ModalContentScreen extends StatelessWidget {
  const ModalContentScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('模态页面'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Text('完成'),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      child: const Center(
        child: Text('这里是模态页面内容'),
      ),
    );
  }
}

方案二：自定义路由动画实现灵活控制 #

如果需要调整动画细节，比如速度、曲线，可以用PageRouteBuilder自定义过渡效果：

Navigator.push(
  context,
  PageRouteBuilder(
    fullscreenDialog: true,
    pageBuilder: (context, animation, secondaryAnimation) => const ModalContentScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 定义从底部滑入的动画
      final tween = Tween(
        begin: const Offset(0.0, 1.0),
        end: Offset.zero,
      ).chain(CurveTween(curve: Curves.easeInOut));
      
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

注意事项 #

• 使用Cupertino组件前，需要引入包：import 'package:flutter/cupertino.dart';
• 设置fullscreenDialog: true后，系统会自动调整返回按钮样式为iOS风格的关闭按钮

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