Flutter auto_route v6 嵌套路由导航失败问题求助

开发基础应用学习auto_route库时，简单导航功能失效，报错提示尝试导航到嵌套路由但未先将其父路由加入栈，建议按Home->Page1的方式导航。

报错日志 #

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: 
Looks like you're trying to navigate to a nested route without adding their parent to stack first
try navigating to Home -> Page1
#0      RoutingController._matchOrReportFailure (package:auto_route/src/router/controller/routing_controller.dart:205:9)
#1      StackRouter._push (package:auto_route/src/router/controller/routing_controller.dart:1031:17)
#2      StackRouter.push (package:auto_route/src/router/controller/routing_controller.dart:978:35)
#3      HomeScreen.build.<anonymous closure> (package:auto_route_practice/home.dart:19:32)
#4      _InkResponseState.handleTap (package:flutter/src/material/ink_well.dart:1096:21)
#5      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:253:24)
#6      TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:627:11)
#7      BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:306:5)
#8      BaseTapGestureRecognizer.handlePrimaryPointe<…>

相关代码 #

app_router.dart #

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_practice/empty_route_widget.dart';
import 'package:auto_route_practice/home.dart';
import 'package:auto_route_practice/page_1.dart';
import 'package:auto_route_practice/page_2.dart';
import 'package:flutter/material.dart';

part 'app_router.gr.dart';

AppRouter autoRouter = AppRouter();

@AutoRouterConfig(replaceInRouteName: "Route")
class AppRouter extends _$AppRouter {
  @override
  final List<AutoRoute> routes = [
    AutoRoute(
      page: Home.page,
      path: "/",
      children: [
        // RedirectRoute(path: '', redirectTo: "page1"),
        AutoRoute(page: Page1.page, path: "page1"),
      ],
    ),
  ];
}

main.dart #

import 'package:auto_route_practice/app_router.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      routerConfig: autoRouter.config(navigatorObservers: () {
        return [AppObserver()];
      }),
    );
  }
}

home.dart #

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_practice/app_router.dart';
import 'package:flutter/material.dart';

@RoutePage(name: 'home')
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("HomeScreen"),
      ),
      body: Column(
        children: [
          ElevatedButton(
              onPressed: () {
                context.router.navigate(const Page1());
              },
              child: const Text("page 1")),
        ],
      ),
    );
  }
}

解决方案 #

• 在父路由页面添加AutoRouter容器：嵌套路由需要父页面提供渲染子路由的容器，修改home.dart的body部分，加入AutoRouter()组件：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("HomeScreen")),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              context.router.navigate(const Page1Route());
            },
            child: const Text("page 1")),
          // 添加AutoRouter作为子路由的容器
          Expanded(child: AutoRouter()),
        ],
      ),
    );
  }
  

• 使用生成的Route类进行导航：auto_route会为每个页面生成对应的Route类（如Page1Route），而非直接使用页面类Page1()，这样路由系统才能识别嵌套关系。
• 重新生成路由代码：修改路由配置后，运行以下命令更新自动生成的路由文件：

  dart run build_runner build
  

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