如何使用modal_bottom_sheet在Cupertino半模态底部弹窗内推送新视图

需求：从Cupertino半模态底部弹窗跳转到另一个同类型弹窗，使用modal_bottom_sheet 3.0.0-pre包，实现平滑过渡效果（保持半模态样式），Flutter版本3.16.0。

问题：尝试两种跳转方式时，均打开全屏的AddProductView而非半模态弹窗：

尝试1代码 #

showCupertinoModalBottomSheet(
  expand: false,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Navigator(
      onGenerateRoute: (context) => MaterialPageRoute(
        builder: (context) => ShowMordal(),
      ),
    );
  },
);

尝试2代码 #

Navigator.push(context, MaterialPageRoute(builder: (context) {
   return ShowMordal();
}));

MyApp代码 #

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: MainView.routeName,
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case MainView.routeName:
            return MaterialWithModalsPageRoute(
              builder: (context) => const MainView(),
              settings: settings,
            );
        }
        return null;
      },
    );
  }
}

解决方案 #

要实现半模态间的平滑跳转，无需嵌套Navigator或使用全局Navigator推送页面，直接在当前弹窗内再次调用showCupertinoModalBottomSheet即可：

1. 主视图打开第一个弹窗 #

showCupertinoModalBottomSheet(
  expand: false,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (context) => const ShowModal(),
);

2. 在ShowModal内触发跳转 #

在ShowModal的交互组件（如按钮）的点击事件中，调用showCupertinoModalBottomSheet打开新的半模态弹窗：

// ShowModal内的示例按钮
ElevatedButton(
  onPressed: () {
    showCupertinoModalBottomSheet(
      expand: false,
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => const AddProductView(),
    );
  },
  child: const Text('跳转到AddProductView'),
)

原理说明 #

• modal_bottom_sheet包的showCupertinoModalBottomSheet会在当前上下文的弹窗栈中添加新的半模态弹窗，而非使用全局导航栈，因此能保持半模态样式。
• 之前的错误在于使用了MaterialPageRoute，它会触发全局导航栈的页面跳转，导致全屏显示。

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