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