Flutter路由导航报错：Maximum call stack size exceeded 修复求助

问题根源 #

1. 路由配置错误：/main路由指向了MainApp本身，而MainApp是整个应用的根MaterialApp。当设置initialRoute: '/main'时，Flutter会尝试加载该路由对应的MainApp组件，新的MainApp又会初始化路由表并再次加载/main路由，形成无限循环，最终导致调用栈溢出。
2. MaterialApp的home与initialRoute属性冲突：这两个属性不应同时使用，initialRoute会覆盖home的配置，同时也会加重循环问题。

修复方案 #

步骤1：拆分独立的首页组件

把原来MainApp中home里的页面内容拆成一个单独的HomePage组件，避免路由直接指向根MaterialApp。

步骤2：修正路由配置

将/main路由指向新的HomePage，同时移除冲突的home属性。

修复后的代码 #

主页面代码

import 'package:flutter/material.dart';
import 'package:flutter_application_3/secondpage.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      initialRoute: '/main',
      routes: {
        '/main': (context) => HomePage(),
        '/secondpage': (context) => SecondPage(),
      },
    );
  }
}

// 新增独立的首页组件
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.pushNamed(context, '/secondpage');
        },
        child: const Text('Go to second page'),
      ),
    );
  }
}

第二页代码（无需修改）

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),
    );
  }
}

修复逻辑说明 #

• 启动应用时，initialRoute: '/main'会加载独立的HomePage组件，而非根MaterialApp，彻底打破无限循环。
• 点击按钮时，通过Navigator.pushNamed正常跳转到SecondPage，导航逻辑恢复正常。

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