页面堆栈可以由小部件（AutoRouter.declarative）或（StackRouter）管理

Question

我正在使用 AutoRoute flutter 包中的声明式路由。

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

@override
Widget build(BuildContext context) {
    return MaterialApp.router(
        routerDelegate: AutoRouterDelegate.declarative(   
            _appRouter,
            routes: (_) => [
              // if the user is logged in, they may proceed to the main App
              if (authService().isLoggedIn)
                HomeRoute()
              // if they are not logged in, bring them to the Login page 
              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),
      )

当我尝试推送或导航到页面时，出现以下错误： Widget'：页面堆栈可以由 Widget (AutoRouter.declarative) 或 (StackRouter) 来管理

Answer 1

问题

根据

auto_route

的作者对他们的评论：

如果您使用 声明式导航，

context.pushRoute

。 。你有 选择一个。

还有很多问题尚未解决，因此如果

AutoRouterDelegate.declarative

能够实施改进那就太好了。

我的解决方案：

我避免使用

auto_route

的“声明式”方法，但我仍然有类似的代码。在我的应用程序的根目录附近，我有：

auto_route

我的 

          return AnimatedBuilder(
            animation: settingsController,
            builder: (BuildContext context, Widget? child) {
              return MaterialApp.router(
                restorationScopeId: 'app',
                routerDelegate: _appRouter.delegate(
                    initialRoutes: (settingsController.settings.showOnboarding)
                        ? [const OnboardingRoute()]
                        : [CurrentPoseRoute()]),
                routeInformationParser: _appRouter.defaultRouteParser(),
                theme: ThemeData(),
                darkTheme: ThemeData.dark(),
                themeMode: settingsService.settings.themeMode.toMaterial(),
              );
            },
          );

使用 mixin

settingsController

，所以我可以使用

ChangeNotifier

。这确实构建了一大块小部件树。对我来说，这并不重要，因为我在从入门切换到正常用户流程时使用它。

Answer 2

关于他的评论

我会等待身份验证服务，所以当我运行应用程序时我知道 无论我的用户是否经过身份验证，从那里我可以 使用 AutoRouteGuard 来保护主页（进行重定向） 或者简单地将 HomeRoute 或 LoginRoute 作为初始路由传递给 路由器代表。

notifyListeners();

然后将您的身份验证侦听器（我使用 Firebase 身份验证）放在主页/仪表板中以侦听您的身份验证状态。在该州，可以免费将用户重定向到任何地方。

Answer 3

使用 2 个路由器：AppRouter 和 AuthRouter。

main.dart：

void main() async {
  var isAuthenticated = await authService.state;
  // native splash screen is showing until runApp is called
  runApp(MyApp(authenticated: isAuthenticated));
}

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

  final bool authenticated;

  MyApp({Key? key, required this.authenticated}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      theme: ThemeData.dark(),
      routerDelegate: _appRouter.delegate(
        initialRoutes: [if (authenticated) HomeRoute() else LoginRoute()],
      ),
}

app_router.dart

class GApp extends StatefulWidget {
  const GApp({super.key});

  @override
  State<GApp> createState() => _GAppState();
}

class _GAppState extends State<GoApp> {
  final _appRouter = AppRouter();
  final _authRouter = AuthRouter();

  final _authController = AuthController();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        RepositoryProvider<BaseNetwork>(
          create: (context) => BaseNetwork(
            DioService.dioCore(baseUrl: 'baseUrl', header: {}),
          ),
        ),
        BlocProvider(create: (context) => _authController),
      ],
      child: BlocBuilder<AuthController, AuthControllerState>(
          builder: (context, state) {
        return MaterialApp.router(
          title: 'Gabaf',
          routerConfig: context.read<AuthController>().isLoggedIn
              ? _appRouter.config()
              : _authRouter.config(),
        );
      }),
    );
  }
}