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);
        },
      ),
    );
  }
}