iOS平台如何实现带模态3D堆叠动画的底部弹窗？

问题描述 #

• 需求：在iOS上实现重叠于原页面之上的新闻编辑器窗口（即iOS原生带3D堆叠动画的sheet模态页）
• 错误：调用showCupertinoModalBottomSheet()时触发空指针异常，报错信息：

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value
#0      CupertinoScaffold.showCupertinoModalBottomSheet (package:modal_bottom_sheet/src/bottom_sheets/cupertino_bottom_sheet.dart:456:52)
#1      _NewsfeedPageState._onCupertinoAddPressed (package:myapp/presentation/newsfeed.dart:131:23)
#2      _NewsfeedPageState._buildAppBar.<anonymous closure>.<anonymous closure> (package: myapp/presentation/newsfeed.dart:78:30)
#3      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:351:24)
#4      TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:656:11)
#5      BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:313:5)
#6      BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:246:7)
#7      PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:703:9)
#8      PointerRouter._dispatch (package:flutter/src/<…>

• 效果问题：错误修复后，仅显示普通底部页面，无所需的3D堆叠动画效果

解决方案 #

1. 修复空指针错误 #

问题出在调用CupertinoScaffold.showCupertinoModalBottomSheet静态方法时，上下文未正确关联到CupertinoScaffold实例。改用modal_bottom_sheet包提供的全局showCupertinoModalBottomSheet方法即可解决：

修改newsfeed.dart中的_onCupertinoAddPressed方法：

void _onCupertinoAddPressed(BuildContext context) {
  // 替换CupertinoScaffold.showCupertinoModalBottomSheet为全局方法
  showCupertinoModalBottomSheet(
    context: context,
    builder: (context) => const NewPostPage(),
  );
}

2. 实现3D堆叠动画 #

要启用iOS原生的3D堆叠动画（页面缩放+位移效果），需配置两个关键参数：

• expand: true：让模态页全屏展开
• transitionStyle: CupertinoModalBottomSheetTransitionStyle.page：指定使用页面式的过渡动画

修改后的完整方法：

void _onCupertinoAddPressed(BuildContext context) {
  showCupertinoModalBottomSheet(
    context: context,
    expand: true, // 开启全屏模式
    transitionStyle: CupertinoModalBottomSheetTransitionStyle.page, // 启用3D堆叠动画
    builder: (context) => const NewPostPage(),
  );
}

3. 额外优化建议 #

• 确保NewPostPage内的PlatformScaffold布局适配全屏：无需额外修改，expand: true会自动让内容铺满屏幕
• 检查modal_bottom_sheet包版本，升级至最新版以避免兼容性问题

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