Flutter页面返回黑屏报错：history is not empty: is not true

在Flutter中实现页面切换，从主页面跳转到第二页面正常，但从第二页面点击返回按钮后出现黑屏，抛出错误5243 pos 12 history is not empty: is not true。

错误原因分析 #

• 重复实例化MaterialApp：第二页面的SecondScreen组件内部再次创建了MaterialApp，Flutter应用应仅保留一个根MaterialApp，多个实例会导致导航上下文混乱，返回时无法匹配正确的导航栈。
• 错误使用Navigator.pushReplacement：主页面跳转时使用pushReplacement会将当前页面从导航栈中移除，替换为新页面。当从第二页面返回时，导航栈已无主页面，导致无页面可显示，触发黑屏和错误。
• WillPopScope拦截逻辑冲突：onWillPop: () async => false强制阻止系统返回键的默认行为，与自定义返回按钮的pop操作逻辑不一致，加剧导航栈异常。

修正后的主页面代码 #

import 'package:flutter/material.dart';
import 'second_screen.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Padding(
        padding: const EdgeInsets.only(left: 12.0, top: 28.0, right: 12.0, bottom: 12.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    InkWell(
                      onTap: () {
                        // 使用push保留主页面在导航栈中
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => const SecondScreen()),
                        );
                      },
                      child: Center(
                        child: Container(
                          margin: const EdgeInsets.only(right: 12.0),
                          height: 200,
                          width: 200,
                          color: Colors.deepOrange,
                          child: const Text('click me to jump'),
                        ),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(right: 12.0),
                      height: 200,
                      width: 200,
                      color: Colors.grey,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

修正后的第二页面代码 #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // 移除多余的MaterialApp，复用根导航上下文
    return WillPopScope(
      // 允许系统返回键的默认行为，如需拦截可添加自定义逻辑
      onWillPop: () async => true,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Go back to First Screen'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
      ),
    );
  }
}

修正后，主页面通过push跳转保留原页面在导航栈，第二页面复用根MaterialApp的导航上下文，点击返回按钮可正常回到主页面，不会出现黑屏和错误。

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