Flutter 两个 MaterialApp 之间的切换问题

看官网教程的时候，一般都是用同一个 MaterialApp ，然后在其中切换不同的页面，这种情况没问题，默认还有切换动画，非常完美。但是我在看文档的时候，想着能不能把所有例子写在同一个项目里面，所以就有了这么一个需求，在多个不同的 MaterialApp （和 CupertinoApp ）之间导航。

但是似乎 Flutter 不支持这种情况，当加载SecondApp的时候，原来那个 context 似乎直接被覆盖了，这时候点击就会把当前的 pop 掉，直接显示黑屏。请问这种情况应该如何解决？

import 'package:flutter/material.dart';
void main() {
// runApp(const FirstApp());
runApp(const MaterialApp(
home: First(),
));
}
class FirstApp extends StatelessWidget {
const FirstApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: First(),
);
}
}
class First extends StatelessWidget {
const First({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘First Screen’),
),
body: GestureDetector(
child: Container(
color: Colors.red,
),
onTap: () {
Navigator.of(context).push(
// MaterialPageRoute(builder: (context) => const SecondApp()),
MaterialPageRoute(builder: (context) => const Second()),
);
},
),
);
}
}
class SecondApp extends StatelessWidget {
const SecondApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Second(),
);
}
}
class Second extends StatelessWidget {
const Second({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘First Screen’),
),
body: GestureDetector(
child: Container(
color: Colors.green,
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}