使用AutoRoute声明式路由时pushRoute报错：页面栈管理冲突

在Flutter中使用AutoRoute的声明式路由配置后，调用context.pushRoute()跳转页面时出现以下错误：

页面栈只能由组件（AutoRouter.declarative）或（StackRouter）其中之一管理

相关代码如下：

App组件路由配置：

class App extends StatelessWidget {
final _appRouter = AppRouter();

@override
Widget build(BuildContext context) {
    return MaterialApp.router(
        routerDelegate: AutoRouterDelegate.declarative(   
            _appRouter,
            routes: (_) => [
              // 已登录则进入主页
              if (authService().isLoggedIn)
                HomeRoute()
              // 未登录则进入登录页
              else
                LoginWrapperRoute(onLogin: () => authService().logIn),
            ],
        ),
        routeInformationParser:
            _appRouter.defaultRouteParser(includePrefixMatches: true));
}
}

跳转按钮代码：

IconButton(
        onPressed: () {
          context.pushRoute(const AlarmRoute());
        },
        icon: const Icon(Icons.notifications_active),
        color: const Color(0xFF666666),
      )

原因分析 #

AutoRoute的声明式路由（AutoRouterDelegate.declarative）是通过routes回调主动管理页面栈结构的，而pushRoute()属于命令式路由操作，两种路由管理模式不能同时混用，否则会触发冲突报错。

解决方案 #

方案1：继续使用声明式路由，通过状态更新页面栈 #

将App改为StatefulWidget，维护页面栈状态，通过更新状态来添加/移除路由：

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  final _appRouter = AppRouter();
  late List<PageRouteInfo> _currentRoutes;

  @override
  void initState() {
    super.initState();
    // 初始化路由栈
    _currentRoutes = authService().isLoggedIn 
        ? [HomeRoute()] 
        : [LoginWrapperRoute(onLogin: _handleLogin)];
  }

  void _handleLogin() {
    authService().logIn();
    setState(() {
      _currentRoutes = [HomeRoute()];
    });
  }

  // 声明式跳转AlarmRoute的方法
  void _navigateToAlarm() {
    setState(() {
      _currentRoutes.add(const AlarmRoute());
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate.declarative(
        _appRouter,
        routes: (_) => _currentRoutes,
      ),
      routeInformationParser:
          _appRouter.defaultRouteParser(includePrefixMatches: true),
    );
  }
}

之后需通过状态管理（如Provider、Riverpod）或组件传值，让IconButton调用_navigateToAlarm()完成跳转。

方案2：改用命令式路由，移除声明式配置 #

如果更习惯使用pushRoute()这类命令式跳转，将AutoRouterDelegate.declarative替换为常规的AutoRouterDelegate：

class App extends StatelessWidget {
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: AutoRouterDelegate(
        _appRouter,
        // 设置初始路由
        initialRoute: authService().isLoggedIn 
            ? HomeRoute.name 
            : LoginWrapperRoute.name,
      ),
      routeInformationParser:
          _appRouter.defaultRouteParser(includePrefixMatches: true),
    );
  }
}

修改后，原有的context.pushRoute(const AlarmRoute())即可正常使用。若需处理登录后跳转，可在登录成功后调用：

context.replaceRoute(const HomeRoute());

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