如何阻止Flutter Web在屏幕尺寸变化或交互时跳转至首页

问题根源 #

1. 重复路由路径：代码中/addProducts被定义了两次，分别指向不同页面，go_router无法正确匹配路由，在Widget树重建时会默认 fallback 到首页。
2. 路由状态丢失：GoRouter实例未绑定全局navigatorKey，当ResponsiveSizer因窗口尺寸调整重建Widget树时，路由状态被重置，导致跳转到初始路由（首页）。

修改后的代码 #

import 'package:door_rush_web/controller/provider/categoryNSubCategoryCRUDProvider.dart';
import 'package:door_rush_web/controller/provider/locationProvider/locationProvider.dart';
import 'package:door_rush_web/controller/provider/productDataProvider/productDataProvider.dart';
import 'package:door_rush_web/firebase_options.dart';
import 'package:door_rush_web/model/subCategoryModel/subCategoryModel.dart';
import 'package:door_rush_web/view/InfoScreen/InfoScreenBuilder.dart';
import 'package:door_rush_web/view/PrivacyPolicy/privacyPolicyDesktop.dart';
import 'package:door_rush_web/view/PrivacyPolicy/privacyPolicyScreenBuilder.dart';
import 'package:door_rush_web/view/addProductScreen/addProductScreen.dart';
import 'package:door_rush_web/view/categoryNSubCategoryCRUD/categoryNSubCategoryCRUDScreen.dart';
import 'package:door_rush_web/view/homeScreen/homeScreen.dart';
import 'package:door_rush_web/view/subCategoryScreen/subCategoryScreen.dart';
import 'package:door_rush_web/widgets/scrollBehaviour.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:responsive_sizer/responsive_sizer.dart';

// 全局路由key，避免窗口resize时丢失路由状态
final _routerKey = GlobalKey<NavigatorState>();
// 全局GoRouter实例，确保路由配置唯一且状态稳定
final GoRouter _router = GoRouter(
  navigatorKey: _routerKey,
  routes: [
    GoRoute(
      path: '/infoScreen',
      builder: (context, state) => const InfoScreenBuilder(),
    ),
    GoRoute(
      path: '/Privacy',
      builder: (context, state) => const PrivacyPolicyScreenBuilder(),
    ),
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
    ),
    GoRoute(
      path: '/addProductScreen',
      builder: (context, state) => const AddProductScreen(),
    ),
    GoRoute(
      path: '/addProducts',
      builder: (context, state) => const AddProductScreen(),
    ),
    GoRoute(
      path: '/categories/:category',
      builder: (context, state) => SubCategoryScreen(
        category: state.pathParameters['category']!,
      ),
    ),
    // 修复重复路径，改为唯一路径/addCategories
    GoRoute(
      path: '/addCategories',
      builder: (context, state) => const CategoryNSubCategoryCRUDScreen(),
    ),
  ],
);

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const DoorRushWeb());
}

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

  @override
  Widget build(BuildContext context) {
    return ResponsiveSizer(builder: (context, _, __) {
      return MultiProvider(
        providers: [
          ChangeNotifierProvider<ProductDataProvider>(
            create: (_) => ProductDataProvider(),
          ),
          ChangeNotifierProvider<CategoryNSubCategoryCRUDProvider>(
            create: (_) => CategoryNSubCategoryCRUDProvider(),
          ),
          ChangeNotifierProvider<LocationProvider>(
            create: (_) => LocationProvider(),
          ),
        ],
        child: MaterialApp.router(
          scrollBehavior: MyCustomScrollBehavior(),
          debugShowCheckedModeBanner: false,
          title: 'Quickzy',
          builder: FlutterSmartDialog.init(),
          routerConfig: _router, // 使用全局路由实例
        ),
      );
    });
  }
}

额外排查点 #

• 检查所有页面的交互逻辑，确认没有误触发context.go('/')或context.push('/')的代码（比如按钮点击、状态回调中的错误导航）。
• 优化Provider的使用，通过Consumer或Selector限定Widget重建范围，避免不必要的页面重建导致路由异常。

内容的提问来源于stack exchange，提问作者Sanjay kumar Das