Flutter使用auto_route路由报错：上下文未包含AutoRouter的技术问询

问题根源是你的App未正确集成AutoRouter，当前路由结构由原生Navigator管理，导致页面context无法找到AutoRouter实例，从而触发错误提示。以下是具体解决步骤：

1. 确保AutoRouter代码生成正确 #

首先确认你的AppRouter类已通过auto_route_generator正确生成，示例配置如下：

// app_router.dart
import 'package:auto_route/auto_route.dart';
import 'package:your_app/pages/home_page.dart';
import 'package:your_app/pages/instruction.dart';
import 'package:your_app/pages/save_data.dart';
import 'package:your_app/pages/weather_route.dart';
import 'package:your_app/pages/calculate_page.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: [
    AutoRoute(page: HomePage, initial: true), // 设置HomePage为初始路由
    AutoRoute(page: Instruction),
    AutoRoute(page: SaveData),
    AutoRoute(page: WeatherRoute),
    AutoRoute(page: CalculatePage),
  ],
)
class $AppRouter {}

运行命令生成路由代码：

flutter pub run build_runner build

2. 重构main.dart的App结构 #

移除原生Navigator，改用MaterialApp.router集成AutoRouter，并将Hive初始化逻辑移到App外层：

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await initHive();
  await initSettings();

  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (_) => WeatherProvider()),
    ],
    child: FutureBuilder(
      future: Future.wait([Hive.openBox<Farm>('farmBox')]),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.error != null) {
            print(snapshot.error);
            return MaterialApp(
              home: Scaffold(
                body: Center(child: Text('Something went wrong :/')),
              ),
            );
          } else {
            // Hive初始化完成，加载带AutoRouter的App
            return MyApp();
          }
        } else {
          return MaterialApp(
            home: Scaffold(
              body: Center(child: Text('Opening Hive...')),
            ),
          );
        }
      },
    ),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appRouter = AppRouter();
    return MaterialApp.router(
      title: 'Mag-uuma',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: const Color(0xFF00838f),
          visualDensity: VisualDensity.adaptivePlatformDensity,
          hintColor: Color(0xFFf50057),
          fontFamily: 'Poppins'),
      // 配置AutoRouter核心代理
      routerDelegate: AutoRouterDelegate(appRouter),
      routeInformationParser: appRouter.defaultRouteParser(),
      routeInformationProvider: PlatformRouteInformationProvider(
        initialRouteInformation: RouteInformation(location: '/'),
      ),
    );
  }
}

3. 修正页面中的路由调用 #

将所有路由调用改为AutoRouter的正确方式，移除原生Navigator.push，并使用生成的路由类：

// IconButton的onPressed示例
onPressed: () {
  context.router.push(const InstructionRoute());
}

// MenuItem的onTap示例：
// Humay项
onTap: () {
  context.router.push(CalculatePageRoute(plantEnum: PlantEnum.rice));
}

// Mga datus项
onTap: () {
  context.router.push(const SaveDataRoute());
}

// Tempo项
onTap: () {
  context.router.push(const WeatherRoute());
}

关键说明 #

• 必须确保所有页面的context都在AutoRouter的子树中，整个App的路由管理要完全交给AutoRouter，禁止混合使用原生Navigator。
• 不要直接实例化页面类（如Instruction()）作为路由参数，必须使用auto_route生成的XXXRoute类，这类对象才符合PageRouteInfo类型要求。

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