Flutter中如何在AlertDialog内使用AutoRouter实现嵌套路由导航

要在Flutter的AlertDialog内实现独立的嵌套路由切换（比如AddDocumentPage和SubmitDocumentPage之间跳转，返回按钮仅影响对话框内内容），核心是利用AutoRouter的嵌套路由机制，为对话框内的页面创建独立的路由作用域和导航栈。以下是具体实现步骤：

1. 配置嵌套路由结构 #

首先在AutoRouter的配置类中，定义对话框内的路由层级：将一个宿主页面作为父路由，其下包含需要切换的子页面，并设置初始路由为AddDocumentPage。

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

// 路由配置类
@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: [
    AutoRoute(page: HomePage, initial: true), // 全局初始页面
    // 对话框内的嵌套路由宿主
    AutoRoute(
      page: DocumentFlowHostPage,
      children: [
        AutoRoute(page: AddDocumentPage, initial: true), // 嵌套栈初始页面
        AutoRoute(page: SubmitDocumentPage),
      ],
    ),
  ],
)
class AppRouter extends _$AppRouter {}

2. 创建嵌套路由宿主页面 #

这个页面作为AlertDialog的内容容器，内部嵌入AutoRouter，用于承载对话框内的所有嵌套路由切换。通过RouteData.of(context).nestedKey为嵌套路由栈绑定独立的标识，避免与全局路由栈冲突。

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

  @override
  Widget build(BuildContext context) {
    final routeData = RouteData.of(context);
    return AutoRouter(
      key: routeData.nestedKey, // 绑定嵌套路由栈的唯一标识
    );
  }
}

3. 显示AlertDialog并注入路由作用域 #

在触发对话框的页面中，使用AutoRouterScope包裹AlertDialog，确保对话框内的嵌套路由能获取到正确的路由上下文，同时与全局路由栈隔离。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showDocumentFlowDialog(context),
          child: const Text('Open Document Flow'),
        ),
      ),
    );
  }

  void _showDocumentFlowDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (dialogContext) {
        // 注入路由作用域，确保嵌套路由能正常工作
        return AutoRouterScope(
          router: AutoRouter.of(context),
          child: AlertDialog(
            title: const Text('Document Flow'),
            content: SizedBox(
              width: 400,
              height: 500,
              child: const DocumentFlowHostPage(), // 嵌套路由宿主
            ),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(dialogContext).pop(),
                child: const Text('Close'),
              ),
            ],
          ),
        );
      },
    );
  }
}

4. 实现嵌套页面的导航逻辑 #

在AddDocumentPage和SubmitDocumentPage中，使用context.router进行导航操作，这些操作只会影响对话框内的嵌套路由栈，不会关闭整个对话框。

AddDocumentPage示例 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Add Document'),
        // 返回按钮仅弹出嵌套路由栈的上一页，不关闭对话框
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => context.router.pop(),
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.router.push(const SubmitDocumentRoute()),
          child: const Text('Proceed to Submit'),
        ),
      ),
    );
  }
}

SubmitDocumentPage示例 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Submit Document'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => context.router.pop(), // 返回AddDocumentPage
        ),
      ),
      body: const Center(
        child: Text('Submit your document here'),
      ),
    );
  }
}

关键注意事项 #

• 确保已运行flutter pub run build_runner watch生成AutoRouter的代码文件。
• 嵌套路由的页面仅能通过宿主页面的嵌套栈访问，无法直接从全局路由栈跳转。
• 若要关闭整个对话框，需调用Navigator.of(dialogContext).pop()，而非context.router.pop()。

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