Flutter切换多个Material App时出现黑屏问题求助

黑屏的核心原因是：多次调用runApp切换根Material App时，Flutter在卸载旧根组件与加载新根组件的间隙，会显示窗口默认的黑色背景；或是新Material App初始化时，页面背景未及时渲染导致短暂黑屏。以下是无需将Material App改为Scaffold的解决方案：

方案1：给所有Material App设置窗口背景色 #

给每个涉及的Material App添加color属性并设为白色，该属性会指定应用窗口的背景色，切换间隙会直接显示白色，替代黑屏。

示例代码：

// 启动页的Material App
runApp(MaterialApp(
  color: Colors.white,
  home: SplashScreen(),
  debugShowCheckedModeBanner: false,
));

// 登录页的Material App
runApp(MaterialApp(
  color: Colors.white,
  home: LoginScreen(),
  debugShowCheckedModeBanner: false,
));

// 完整/访客应用的Material App
runApp(MaterialApp(
  color: Colors.white,
  home: FullAppScreen(), // 替换为GuestAppScreen()即可
  debugShowCheckedModeBanner: false,
));

方案2：给每个首页添加白色根容器 #

在SplashScreen、LoginScreen等页面的最外层包裹一个白色背景的Container，确保页面初始化时第一时间渲染白色背景，避免初始黑屏。

示例代码（以SplashScreen为例）：

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Scaffold(
        body: Center(
          child: CircularProgressIndicator(), // 示例启动页内容
        ),
      ),
    );
  }
}

额外说明 #

如果黑屏是因为在Navigator中嵌套Material App导致的，这种架构本身不符合Flutter的最佳实践，推荐改为单个根Material App+多路由页面的结构。但按照你的要求保留多Material App的前提下，上述两个方案可以有效将黑屏改为白屏或彻底消除。

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