如何在屏幕尺寸更改或交叉时停止 flutter web 重定向到主屏幕

Question

每当我更改 Flutter Web 应用程序的屏幕大小时，屏幕都会自动导航到主屏幕 这是我的 main.dart 代码，我使用 go_router 进行导航

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';

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: GoRouter(
            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']!,
                ),
              ),
              GoRoute(
                path: '/addProducts',
                builder: (context, state) =>
                    const CategoryNSubCategoryCRUDScreen(),
              ),
            ],
          ),
        ),
      );
    });
  }
}

在我的 Flutter Web 应用程序中，当屏幕尺寸发生变化（例如，调整浏览器窗口大小）或发生某些交互时，应用程序会无意中导航回主屏幕。此行为表明应用程序的导航流或状态保存中断，导致当前路线或页面上下文丢失。因此，用户会被重定向到默认主页路由，而不是停留在当前页面，从而对用户体验和功能产生负面影响。

Answer 1

发生这种情况是因为每当调整应用程序的窗口大小时，

ResponsiveSizer

都会重新运行其

builder

方法。因为您在

GoRouter

方法内部实例化了

builder

，所以每当调整窗口大小时它都会重置回其初始状态。一般来说，在

build

方法中定义路由器是一个坏主意，因为这会导致每当重建该小部件时（即使使用热重载）重置导航。

相反，在构建方法之外定义

GoRouter

，例如在顶级

final

变量中：

final _router = GoRouter(
  routes: [
    // Your routes here
  ],
);

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,
          ),
        );
      },
    );
  }
}